创建一个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>
时间： 2024-11-02 13:11:48