类似京东的这种无缝轮播效果：
HTML代码：
1 <body> 2 <!-- /*觅me 探索生活*/ --> 3 <div class="test"> 4 <!-- 觅me 探索生活 》 标题 --> 5 <div class="test-title"> 6 <span>觅me</span> 7 <img src="./images/logo.png" alt=""> 8 <span>探索生活</span> 9 </div> 10 <!-- 觅me 探索生活 滑动区域 --> 11 <div class="test-scroll"> 12 <div class="test-scroll-1"> 13 <img src="./images/3.webp" alt=""> 14 <br> 15 <span>看中性价比和安全，17万出头买福特翼虎值得吗？</span> 16 <br> 17 <span> 18 预算十七八万，如果要选择合资紧凑型SUV，选择面其实并不多，几款老牌劲旅，本田CR-V、日产奇骏、丰田RAV4、福特翼虎、马自达CX-5，而且这个价位能选择的，大多数是这些车型的中低配，甚至是低配，所以就需要消费者在这其中做选择的时候，权衡方方面面的因素要更多了，这些车型都有自己的消费者群体。 19 </span> 20 </div> 21 <div class="test-scroll-1"> 22 <img src="./images/1.webp" alt=""> 23 <br> 24 <span>挑飞度战五菱，这款7.99万起的比亚迪，能走上神坛？</span> 25 <br> 26 <span> 27 放开二胎政策后，给国内的汽车市场注入了一剂猛药，因此催生了一个词——二胎车。很多人买7座车，不论是MPV还是7座SUV，给人的第一感知是要生二胎了？针对二胎车，合资品牌推出众多相应的车型，自主品牌更是纷纷效仿。但由于自主品牌自身在研发的不足，导致中国的“二胎车”缺乏国际范，不过下面这款比亚迪车型，或许颠覆我们对自主MPV的看法，走上神坛！ 28 </span> 29 </div> 30 <div class="test-scroll-1"> 31 <img src="./images/2.webp" alt=""> 32 <br> 33 <span>133万全款订车三年后提车，也就特斯拉能干得出来</span> 34 <br> 35 <span> 36 众筹搞项目在前俩年就像现如今的共享经济一样繁荣，其中混着不少投机分子盯着老百姓的荷包忽悠，当然也有不少蛮不错的项目，让好的概念得以面市，只不过众筹这种形式都是玩玩小钱的，大不了就万把块钱，然而这个地球就有人牛气，搞个项目能哄的全球的有钱人乖乖掏钱，而且一套就是133万...... 37 </span> 38 </div> 39 <div class="test-scroll-1"> 40 <img src="./images/3.webp" alt=""> 41 <br> 42 <span>看中性价比和安全，17万出头买福特翼虎值得吗？</span> 43 <br> 44 <span> 45 预算十七八万，如果要选择合资紧凑型SUV，选择面其实并不多，几款老牌劲旅，本田CR-V、日产奇骏、丰田RAV4、福特翼虎、马自达CX-5，而且这个价位能选择的，大多数是这些车型的中低配，甚至是低配，所以就需要消费者在这其中做选择的时候，权衡方方面面的因素要更多了，这些车型都有自己的消费者群体。 46 </span> 47 </div> 48 <div class="test-scroll-1"> 49 <img src="./images/1.webp" alt=""> 50 <br> 51 <span>挑飞度战五菱，这款7.99万起的比亚迪，能走上神坛？</span> 52 <br> 53 <span> 54 放开二胎政策后，给国内的汽车市场注入了一剂猛药，因此催生了一个词——二胎车。很多人买7座车，不论是MPV还是7座SUV，给人的第一感知是要生二胎了？针对二胎车，合资品牌推出众多相应的车型，自主品牌更是纷纷效仿。但由于自主品牌自身在研发的不足，导致中国的“二胎车”缺乏国际范，不过下面这款比亚迪车型，或许颠覆我们对自主MPV的看法，走上神坛！ 55 </span> 56 </div> 57 </div> 58 <!-- 觅me 探索生活 滚动按钮 --> 59 <div class="test-scroll-btn"> 60 <span class="selected"></span> 61 <span></span> 62 <span></span> 63 </div> 64 <!-- 觅me 探索生活 左右按钮 --> 65 <div class="test-btn"> 66 <span class="prev"><</span> 67 <span class="next">></span> 68 </div> 69 </div> 70 </body>
CSS代码：
1 <style> 2 *{ 3 padding:0; 4 margin:0; 5 } 6 body{ 7 background:#F0F3EF; 8 } 9 /*觅me 探索生活*/ 10 .test{ 11 width:390px; 12 height:450px; 13 background: #fff; 14 position: relative; 15 margin:100px; 16 padding:20px; 17 box-sizing:border-box; 18 overflow:hidden; 19 } 20 /*觅me 探索生活 --> 标题*/ 21 .test-title{ 22 margin-bottom: 4px; 23 } 24 .test-title>span:first-child{ 25 color:#222; 26 font-size:22px; 27 font-weight:bold; 28 } 29 .test-title img{ 30 vertical-align: middle; 31 } 32 .test-title>span:last-child{ 33 color:#999; 34 font-size:14px; 35 } 36 37 /*觅me 探索生活 --> 滑动区域*/ 38 .test-scroll{ 39 width:1950px; 40 height:355px; 41 border-bottom:1px solid #f5f5f5; 42 position: absolute; 43 left:-390px; 44 display: flex; 45 justify-content:space-around; 46 cursor:pointer; 47 } 48 .test-scroll-1{ 49 /*margin:0 20px;*/ 50 width:350px; 51 height:355px; 52 display: inline-block; 53 /*border:1px solid;*/ 54 } 55 /*觅me 探索生活 --> 滑动区域 --> 标题*/ 56 .test-scroll-1>span:first-of-type{ 57 display: inline-block; 58 width:350px; 59 height:50px; 60 line-height: 50px; 61 color:#333; 62 font-size:16px; 63 /*border:2px solid;*/ 64 overflow:hidden; 65 text-overflow:ellipsis; 66 white-space:nowrap; 67 } 68 .test-scroll-1>span:last-of-type{ 69 display: inline-block; 70 width:350px; 71 height:40px; 72 color:#999; 73 font-size:14px; 74 /*border:2px solid;*/ 75 overflow:hidden; 76 text-align:center; 77 } 78 79 /*觅me 探索生活 滚动按钮*/ 80 .test-scroll-btn{ 81 position: relative; 82 /*border:1px solid;*/ 83 top:355px; 84 text-align:center; 85 } 86 .test-scroll-btn>span{ 87 display: inline-block; 88 width:6px; 89 height:6px; 90 border:2px solid #b9beba; 91 border-radius:50%; 92 margin:10px 4px 0 4px; 93 cursor:pointer; 94 } 95 .test-scroll-btn .selected{ 96 background: #eb3436; 97 border:2px solid transparent; 98 box-shadow:0 0 2px #eb3436; 99 } 100 /*觅me 探索生活 左右按钮*/ 101 .test-btn{ 102 width:100%; 103 height:40px; 104 position: absolute; 105 left:0px; 106 top:50%; 107 margin-top:-20px; 108 /*border:1px solid;*/ 109 } 110 .test-btn>span{ 111 width:20px; 112 height:40px; 113 line-height:40px; 114 text-align:center; 115 display: inline-block; 116 font-size:20px; 117 background: #d9d9d9; 118 color:hsla(0,0%,100%,.4); 119 } 120 .test-btn>span:last-child{ 121 float:right; 122 } 123 .test-btn>span:hover{ 124 cursor:pointer; 125 background: #999999; 126 } 127 </style>
JS代码:
1 <script src="./js/slidings.js"></script> 2 <script> 3 var params={ 4 client:$('.test'), 5 move:$('.test-scroll'), 6 moveChild:$('.test-scroll>div'), 7 scrollBtn:$('.test-scroll-btn span'), 8 scrollBtnColor:'selected', 9 nextBtn:$('.next'), 10 prevBtn:$('.prev'), 11 i:1, 12 timer:null, 13 times:1200 14 } 15 16 slidings(params); 17 </script>
插件代码：
1 function slidings(params){ 2 params.timer=setInterval(function(){ 3 params.i++; 4 moveImg(params.i) 5 },params.times); 6 7 $(params.client).hover(function(){ 8 clearInterval(params.timer) 9 },function(){ 10 params.timer=setInterval(function(){ 11 params.i++; 12 moveImg(params.i) 13 },params.times); 14 }) 15 16 $(params.nextBtn).click(function(){ 17 params.i++; 18 moveImg(params.i); 19 }); 20 21 $(params.prevBtn).click(function(){ 22 params.i--; 23 moveImg(params.i); 24 }); 25 26 $(params.scrollBtn).click(function(){ 27 var _index=$(this).index()+1; 28 params.i=_index; 29 moveImg(params.i); 30 }); 31 32 function moveImg(){ 33 if (params.i == params.moveChild.length-1) { 34 console.log(params.i); 35 params.i=1; 36 $(params.move).css({'left':'0'}); 37 } 38 39 if(params.i == 0){ 40 params.i=params.moveChild.length-2; 41 $(params.move).css({left:((params.moveChild.length-1)*-params.client.outerWidth())}); 42 } 43 44 45 $(params.move).stop().animate({'left':-params.client.outerWidth()*params.i+'px'},params.times,function(){ 46 47 }); 48 49 if (params.i == params.moveChild.length-1) { 50 $(params.scrollBtn).eq(0).addClass(params.scrollBtnColor).siblings().removeClass(params.scrollBtnColor); 51 }else{ 52 $(params.scrollBtn).eq(params.i-1).addClass(params.scrollBtnColor).siblings().removeClass(params.scrollBtnColor); 53 } 54 55 } 56 57 }
插件使用说明:
无缝轮播图： 滑动的是改变move的left，而非moveChild；
页面布局样式：
(1)一开始布局时，第一图前有最后一图，最后一图后有第一图
(2)style{
move --> position: absolute
--> left: -client.outerWidth()
}
3区域：
client 可视区域
move 滑动区域
moveChild 滑动区域的每一个子块
2按钮：
scrollBtn 滚动（点击）按钮
scrollBtnColor 滚动（点击）按钮添加类名改变当前按钮颜色
nextBtn/prevBtn 左右按钮
初始值
i=1 代表下标0是最后图，下标1是第一图
// 注：i=1的原因是，一开始布局时，第一图前有最后一图，最后一图后有第一图，
// 为了第一眼看到的是第一图，要做move.style.left=moveChild.width，且初始时第一图下标是1而非0
timer 定时器名称（自动轮播）
times 动画时间
var params={
client:$('.container'),
move:$('.list'),
moveChild:$('.list li'),
scrollBtn:$('.nav span'),
scrollBtnColor:'.selected'
nextBtn:$('.next'),
prevBtn:$('.pre'),
i:1,
timer:null,
times:2000,
}
slidings(params);