轮播slide
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播slide相关的知识，希望对你有一定的参考价值。
创建一个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>
以上是关于轮播slide的主要内容，如果未能解决你的问题，请参考以下文章