js插件-图片椭圆轮播效果

 

1. 插件效果图：
2. html 代码如下：
   

    <div id="container">
   
           <img src="images/cartoon/1.jpg" />
   
           <img src="images/cartoon/2.jpg" />
   
           <img src="images/cartoon/3.jpg" />
   
           <img src="images/cartoon/4.jpg" />
   
           <img src="images/cartoon/5.jpg" />
   
           <img src="images/cartoon/6.jpg" />
   
           <img src="images/cartoon/7.jpg" />
   
           <img src="images/cartoon/8.jpg" />
   
           <img src="images/cartoon/9.jpg" />
   
           <img src="images/cartoon/10.jpg" />
   
           <img src="images/cartoon/11.jpg" />
   
           <img src="images/cartoon/12.jpg" />
   
           <img src="images/cartoon/13.jpg" />
   
           <img src="images/cartoon/14.jpg" />
   
           <img src="images/cartoon/15.jpg" />
   
   
   
       </div>

   View Code

    

3. css代码如下：
   

      * {
   
               margin: 0;
   
               padding: 0;
   
           }
   
   
   
           body {
   
               background-color: #efd;
   
           }
   
           #container {
   
               width: 800px;
   
               height: 400px;
   
               position: relative;
   
               margin: 50px auto;
   
           }

   View Code

    

4. js Carousel类代码：
   

   var Carousel = function (options) {
   
   
   
               this.settings = {
   
                   imgs: [],
   
                   imgWidth: 150,              //图片宽
   
                   imgHeight: 100,             //图片高
   
                   time: 0,
   
                   rate: 0.5,                  //转动速度
   
                   containerId: "container",   //包含图片容器id
   
                   containerWidth: 800,        //包含图片容器宽
   
                   containerHeight: 300,       //包含图片容器高
   
               };
   
   
   
               for (var item in options) {         //extend
   
                   if (options.hasOwnProperty(item)) {
   
                       this.settings[item] = options[item];
   
                   }
   
               }
   
   
   
   
   
               this.init.apply(this, arguments); //init
   
           };
   
   
   
           Carousel.prototype = {
   
   
   
               each: function (fn) {
   
                   for (var index = 0; index < this.settings.imgs.length; index++)
   
                       fn.call(this.settings.imgs[index], index);
   
               },
   
               init: function () {
   
                   var _this = this;
   
   
   
                   this.settings.imgs = document.getElementById(this.settings.containerId).getElementsByTagName("img");
   
   
   
                   this.each(function (index) {
   
                       this.style.width = _this.settings.imgWidth + "px";
   
                       this.style.height = _this.settings.imgHeight + "px";
   
                       this.style.position = "absolute";
   
                   });
   
   
   
                   document.onmousemove = function (event) {
   
                       var event = event || window.event, positionX;
   
                       var positionX = _this.getPageX(event);
   
                       console.log(positionX);
   
                       _this.settings.rate = (positionX - document.body.clientWidth / 2) / (document.body.clientWidth / 2) * 0.25;
   
                   }
   
                   this.play();
   
               },
   
               getPageX: function (event) {
   
   
   
                   if (event.pageX) {
   
                       return event.pageX;
   
                   } else {
   
                       return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
   
                   }
   
               },
   
               play: function () {
   
                   var _this = this;
   
                   setInterval(function () {
   
                       var that = _this.settings;
   
                       that.count = _this.settings.imgs.length;
   
                       that.time += that.rate * 40 / 1000;
   
                       _this.each(function (index) {            //算法BaiDu所得
   
                           this.style.left = (Math.sin(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerWidth - that.imgWidth) / 2 + "px";
   
                           this.style.top = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerHeight - that.imgHeight) / 2 + "px";
   
                           this.style.width = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgWidth / 2 + that.imgWidth / 2 + "px";
   
                           this.style.height = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgHeight / 2 + that.imgHeight / 2 + "px";
   
                           this.style.zIndex = Math.floor((Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * 10);
   
                       })
   
                   }, 40);
   
               }
   
           };

   View Code

    

5. 最后 调用代码：
   

   window.onload = function () {
   
               new Carousel();
   
           }

   View Code

    

6. 页面最终代码：
   

   <!DOCTYPE html>
   
   <html xmlns="http://www.w3.org/1999/xhtml">
   
   <head>
   
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
       <title></title>
   
       <style>
   
           * {
   
               margin: 0;
   
               padding: 0;
   
           }
   
   
   
           body {
   
               background-color: #efd;
   
           }
   
           #container {
   
               width: 800px;
   
               height: 400px;
   
               position: relative;
   
               margin: 50px auto;
   
           }
   
   
   
       </style>
   
       <script>
   
           var Carousel = function (options) {
   
   
   
               this.settings = {
   
                   imgs: [],
   
                   imgWidth: 150,              //图片宽
   
                   imgHeight: 100,             //图片高
   
                   time: 0,
   
                   rate: 0.5,                  //转动速度
   
                   containerId: "container",   //包含图片容器id
   
                   containerWidth: 800,        //包含图片容器宽
   
                   containerHeight: 300,       //包含图片容器高
   
               };
   
   
   
               for (var item in options) {         //extend
   
                   if (options.hasOwnProperty(item)) {
   
                       this.settings[item] = options[item];
   
                   }
   
               }
   
   
   
   
   
               this.init.apply(this, arguments); //init
   
           };
   
   
   
           Carousel.prototype = {
   
   
   
               each: function (fn) {
   
                   for (var index = 0; index < this.settings.imgs.length; index++)
   
                       fn.call(this.settings.imgs[index], index);
   
               },
   
               init: function () {
   
                   var _this = this;
   
   
   
                   this.settings.imgs = document.getElementById(this.settings.containerId).getElementsByTagName("img");
   
   
   
                   this.each(function (index) {
   
                       this.style.width = _this.settings.imgWidth + "px";
   
                       this.style.height = _this.settings.imgHeight + "px";
   
                       this.style.position = "absolute";
   
                   });
   
   
   
                   document.onmousemove = function (event) {
   
                       var event = event || window.event, positionX;
   
                       var positionX = _this.getPageX(event);
   
                       console.log(positionX);
   
                       _this.settings.rate = (positionX - document.body.clientWidth / 2) / (document.body.clientWidth / 2) * 0.25;
   
                   }
   
                   this.play();
   
               },
   
               getPageX: function (event) {
   
   
   
                   if (event.pageX) {
   
                       return event.pageX;
   
                   } else {
   
                       return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
   
                   }
   
               },
   
               play: function () {
   
                   var _this = this;
   
                   setInterval(function () {
   
                       var that = _this.settings;
   
                       that.count = _this.settings.imgs.length;
   
                       that.time += that.rate * 40 / 1000;
   
                       _this.each(function (index) {
   
                           this.style.left = (Math.sin(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerWidth - that.imgWidth) / 2 + "px";
   
                           this.style.top = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerHeight - that.imgHeight) / 2 + "px";
   
                           this.style.width = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgWidth / 2 + that.imgWidth / 2 + "px";
   
                           this.style.height = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgHeight / 2 + that.imgHeight / 2 + "px";
   
                           this.style.zIndex = Math.floor((Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * 10);
   
                       })
   
                   }, 40);
   
               }
   
           };
   
   
   
           window.onload = function () {
   
               new Carousel();
   
           }
   
   
   
       </script>
   
   
   
   
   
   </head>
   
   <body>
   
   
   
       <div id="container">
   
           <img src="images/cartoon/1.jpg" />
   
           <img src="images/cartoon/2.jpg" />
   
           <img src="images/cartoon/3.jpg" />
   
           <img src="images/cartoon/4.jpg" />
   
           <img src="images/cartoon/5.jpg" />
   
           <img src="images/cartoon/6.jpg" />
   
           <img src="images/cartoon/7.jpg" />
   
           <img src="images/cartoon/8.jpg" />
   
           <img src="images/cartoon/9.jpg" />
   
           <img src="images/cartoon/10.jpg" />
   
           <img src="images/cartoon/11.jpg" />
   
           <img src="images/cartoon/12.jpg" />
   
           <img src="images/cartoon/13.jpg" />
   
           <img src="images/cartoon/14.jpg" />
   
           <img src="images/cartoon/15.jpg" />
   
   
   
       </div>
   
   
   
   </body>
   
   </html>

   View Code