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>

    

3. css代码如下：

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

    

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);
               }
           };

    

5. 最后 调用代码：

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

    

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>