轮播slide

最新推荐文章于 2024-01-15 18:56:46 发布

weixin_30326741

最新推荐文章于 2024-01-15 18:56:46 发布

阅读量91

点赞数

原文链接：http://www.cnblogs.com/houxingkuo/p/6186153.html

版权

创建一个slide.js写入代码

  1 var Mod = function(obj){  3     this.init(obj);
  4 }
  5 Mod.prototype = {
  6     init:function(obj){
  7         var self = this;
  8         //ul的容器类名
  9         self.lunBoUl = obj.ulActiveClass;
 10         //获取到盒子的宽度
 11         self.widthBox = $(self.lunBoUl).width();
 12         //获取到盒子的高度
 13         var heightBox = $(self.lunBoUl).height();
 14         //按钮局容器顶部的top值
 15         self.styleTop = heightBox/2 - 25 + 'px';
 16         //轮播时间（每隔多长时间运动一次）
 17         self.time = obj.time;
 18         //li的容器类名
 19         var lunBoli = obj.liActiveClass;
 20         //获取li的个数
 21         self.liLength = window.pageData.items.length; 23         //给ul容器总长
 24         $(self.lunBoUl).css({
 25             'width':self.widthBox*(self.liLength+1) + 'px',
 26             'position':'relative'
 27         });
 28         //把li的第一个追加到最后一个的后边
 29         $(self.lunBoUl).append($($(lunBoli)[0]).clone())
 30         var i = 1;//向左滑动的索引值
 31         var ii = 0;//向右滑动的索引值
 32         self.judge(i,ii,obj)
 33         
 34     },
 35     mobile:function(i,ii){
 36         var self = this;
 37         var B = setInterval(function(){
 38             if (i > self.liLength - 1) {//当移动的个数大于li的个数时候回到原位重新开始
 39                 i=0
 40             };
 41             $(self.lunBoUl).css({
 42                 'overflow': 'hidden',
 43                 'transition-duration':'0.3s',
 44                 'transform':'translate3d(-' + self.widthBox*i++ + 'px, 0px, 0px)',
 45                 'backface-visibility': 'hidden'
 46             });
 47         },self.time); 49     },
 50     judge:function(i,ii,obj){
 51         var self = this;
 52         if (obj.switchBtn == true) {//当配置参数为true的时候执行自动轮播的状态
 53             self.mobile(i,ii)
 54         }else if (obj.switchBtn == false) {//当配置参数为false的时候执行点击轮播的状态
 55             console.log('按钮出现');
 56             //左侧按钮追加到盒子容器里
 57             $(self.lunBoUl).parent().append(
 58                 '<i class="leftBtn" style="cursor: pointer;width: 40px;height: 50px;background: #000;opacity: 0.5;color: #fff;position: absolute;left:0;top:' + self.styleTop + ';text-align:center;line-height: 50px;font-style:normal;"><<i>'
 59             );
 60             //右侧按钮追加到盒子容器里
 61             $(self.lunBoUl).parent().append(
 62                 '<i class="rightBtn" style="cursor: pointer;width: 40px;height: 50px;background: #000;opacity: 0.5;color: #fff;position: absolute;right:0;top:' + self.styleTop + ';text-align:center;line-height: 50px;font-style:normal;">><i>'
 63             );
 64             self.btnClick(i,ii);
 65         }else{//当配置参数非true和flase的时候执行自动轮播的状态
 66             self.mobile(i,ii)
 67         };
 68     },
 69     //click左右点击轮播
 70     btnClick:function(i,ii){
 71         var self = this;
 72         //点击左按钮向右滑动
 73         $(".leftBtn").click(function(){
 74             if (ii < 1) {//当移动的个数大于li的个数时候回到原位重新开始
 75                 ii = self.liLength
 76             };
 77             // console.log(ii);
 78             $(self.lunBoUl).css({
 79                 'overflow': 'hidden',
 80                 'transition-duration':'0.3s',
 81                 'transform':'translate3d(-' + self.widthBox*--ii + 'px, 0px, 0px)',
 82                 'backface-visibility': 'hidden'
 83             });
 84         })
 85         //点击右按钮向左滑动
 86         $(".rightBtn").click(function(){
 87             if (i > self.liLength - 1) {//当移动的个数大于li的个数时候回到原位重新开始
 88                 i = 0
 89             };
 90             // console.log(i)
 91             $(self.lunBoUl).css({
 92                 'overflow': 'hidden',
 93                 'transition-duration':'0.3s',
 94                 'transform':'translate3d(-' + self.widthBox*i++ + 'px, 0px, 0px)',
 95                 'backface-visibility': 'hidden'
 96             }); 98         })
 99     },
100     //绑定事件
101     bindEvent:function(){
102         var self = this;
103     }
104 }

HTML文件：

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>slide</title>
 6         <script src="js/jquery-1.11.0.js"></script>
 7         <script src="js/silde.js"></script>
 8         <style type="text/css">
 9             .sildeImg{
10                 width: 364px;
11                 height: 157px;
12             }
13             .lunBoBy{
14                 width: 990px;
15                 height: 235px;
16                 margin: 100px auto 0 auto;
17             }
18             .lunBoBox{
19                 width: 364px;
20                 height: 157px;
21                 position: relative;
22                 overflow: hidden;
23                 float: right;
24             }
25             .lunBoUl{
26                 height: 157px;
27                 overflow: hidden;
28             }
29             .lunBoLi{
30                 float: left;
31                 width: 364px;
32             }
33         </style>
34     </head>
35     <body>
36         <div class="lunBoBy">
37             <div class="lunBoBox">
38                 <ul class="lunBoUl" id="interpolation">
39                     <li class="lunBoLi">
40                         <img src="//img12.360buyimg.com/da/jfs/t3550/310/1004523733/231065/55923857/58199412Nab931015.jpg" class="sildeImg">
41                     </li>
42                     <li class="lunBoLi">
43                         <img src="//img1.360buyimg.com/da/jfs/t3346/15/950650929/165454/74848661/581995a2N995b03ee.jpg" class="sildeImg">
44                     </li>
45                     <li class="lunBoLi">
46                         <img src="//img1.360buyimg.com/da/jfs/t3346/15/950650929/165454/74848661/581995a2N995b03ee.jpg" class="sildeImg">
47                     </li>
48                 </ul>
49             </div>
50         </div>
51     </body>
52     <script>
53         //自创轮播组件shuffling参数说明：
54         //    1：time 轮播切换的时间,该参数值是Boolean类型  注：(务必填写该参数)
55         //    2：switchBtn 填写true自动轮播  false关闭轮播按钮切换出现 不填则按默认执行自动轮播,该参数值是Boolean类型  注：(双重选择可填写，可不填，随需求功能而意)
56         //    3：boxActiveClass 获取ul的类名,该参数值是字符串类型  注：(务必填写该参数)
57         //    4：liActiveClass 获取li的类名,该参数值是字符串类型  注：(务必填写该参数)
58         var slide = new Mod({
59             time:3000,
60             switchBtn:false,
61             ulActiveClass:".lunBoUl",
62             liActiveClass:".lunBoLi"
63         });
64     </script>
65 </html>