类似京东的这种无缝轮播效果：
HTML代码：
<body>
<!-- /*觅me 探索生活*/ -->
<div class="test">
<!-- 觅me 探索生活 》 标题 -->
<div class="test-title">
<span>觅me</span>
<img src="./images/logo.png" alt="">
<span>探索生活</span>
</div>
<!-- 觅me 探索生活 滑动区域 -->
<div class="test-scroll">
<div class="test-scroll-1">
<img src="./images/3.webp" alt="">
<br>
<span>看中性价比和安全，17万出头买福特翼虎值得吗？</span>
<br>
<span>
预算十七八万，如果要选择合资紧凑型SUV，选择面其实并不多，几款老牌劲旅，本田CR-V、日产奇骏、丰田RAV4、福特翼虎、马自达CX-5，而且这个价位能选择的，大多数是这些车型的中低配，甚至是低配，所以就需要消费者在这其中做选择的时候，权衡方方面面的因素要更多了，这些车型都有自己的消费者群体。
</span>
</div>
<div class="test-scroll-1">
<img src="./images/1.webp" alt="">
<br>
<span>挑飞度战五菱，这款7.99万起的比亚迪，能走上神坛？</span>
<br>
<span>
放开二胎政策后，给国内的汽车市场注入了一剂猛药，因此催生了一个词——二胎车。很多人买7座车，不论是MPV还是7座SUV，给人的第一感知是要生二胎了？针对二胎车，合资品牌推出众多相应的车型，自主品牌更是纷纷效仿。但由于自主品牌自身在研发的不足，导致中国的“二胎车”缺乏国际范，不过下面这款比亚迪车型，或许颠覆我们对自主MPV的看法，走上神坛！
</span>
</div>
<div class="test-scroll-1">
<img src="./images/2.webp" alt="">
<br>
<span>133万全款订车三年后提车，也就特斯拉能干得出来</span>
<br>
<span>
众筹搞项目在前俩年就像现如今的共享经济一样繁荣，其中混着不少投机分子盯着老百姓的荷包忽悠，当然也有不少蛮不错的项目，让好的概念得以面市，只不过众筹这种形式都是玩玩小钱的，大不了就万把块钱，然而这个地球就有人牛气，搞个项目能哄的全球的有钱人乖乖掏钱，而且一套就是133万......
</span>
</div>
<div class="test-scroll-1">
<img src="./images/3.webp" alt="">
<br>
<span>看中性价比和安全，17万出头买福特翼虎值得吗？</span>
<br>
<span>
预算十七八万，如果要选择合资紧凑型SUV，选择面其实并不多，几款老牌劲旅，本田CR-V、日产奇骏、丰田RAV4、福特翼虎、马自达CX-5，而且这个价位能选择的，大多数是这些车型的中低配，甚至是低配，所以就需要消费者在这其中做选择的时候，权衡方方面面的因素要更多了，这些车型都有自己的消费者群体。
</span>
</div>
<div class="test-scroll-1">
<img src="./images/1.webp" alt="">
<br>
<span>挑飞度战五菱，这款7.99万起的比亚迪，能走上神坛？</span>
<br>
<span>
放开二胎政策后，给国内的汽车市场注入了一剂猛药，因此催生了一个词——二胎车。很多人买7座车，不论是MPV还是7座SUV，给人的第一感知是要生二胎了？针对二胎车，合资品牌推出众多相应的车型，自主品牌更是纷纷效仿。但由于自主品牌自身在研发的不足，导致中国的“二胎车”缺乏国际范，不过下面这款比亚迪车型，或许颠覆我们对自主MPV的看法，走上神坛！
</span>
</div>
</div>
<!-- 觅me 探索生活 滚动按钮 -->
<div class="test-scroll-btn">
<span class="selected"></span>
<span></span>
<span></span>
</div>
<!-- 觅me 探索生活 左右按钮 -->
<div class="test-btn">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
</body>
CSS代码：
<style>
*{
padding:;
margin:;
}
body{
background:#F0F3EF;
}
/*觅me 探索生活*/
.test{
width:390px;
height:450px;
background: #fff;
position: relative;
margin:100px;
padding:20px;
box-sizing:border-box;
overflow:hidden;
}
/*觅me 探索生活 --> 标题*/
.test-title{
margin-bottom: 4px;
}
.test-title>span:first-child{
color:#222;
font-size:22px;
font-weight:bold;
}
.test-title img{
vertical-align: middle;
}
.test-title>span:last-child{
color:#999;
font-size:14px;
} /*觅me 探索生活 --> 滑动区域*/
.test-scroll{
width:1950px;
height:355px;
border-bottom:1px solid #f5f5f5;
position: absolute;
left:-390px;
display: flex;
justify-content:space-around;
cursor:pointer;
}
.test-scroll-1{
/*margin:0 20px;*/
width:350px;
height:355px;
display: inline-block;
/*border:1px solid;*/
}
/*觅me 探索生活 --> 滑动区域 --> 标题*/
.test-scroll-1>span:first-of-type{
display: inline-block;
width:350px;
height:50px;
line-height: 50px;
color:#333;
font-size:16px;
/*border:2px solid;*/
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.test-scroll-1>span:last-of-type{
display: inline-block;
width:350px;
height:40px;
color:#999;
font-size:14px;
/*border:2px solid;*/
overflow:hidden;
text-align:center;
} /*觅me 探索生活 滚动按钮*/
.test-scroll-btn{
position: relative;
/*border:1px solid;*/
top:355px;
text-align:center;
}
.test-scroll-btn>span{
display: inline-block;
width:6px;
height:6px;
border:2px solid #b9beba;
border-radius:50%;
margin:10px 4px 0 4px;
cursor:pointer;
}
.test-scroll-btn .selected{
background: #eb3436;
border:2px solid transparent;
box-shadow:0 0 2px #eb3436;
}
/*觅me 探索生活 左右按钮*/
.test-btn{
width:100%;
height:40px;
position: absolute;
left:0px;
top:50%;
margin-top:-20px;
/*border:1px solid;*/
}
.test-btn>span{
width:20px;
height:40px;
line-height:40px;
text-align:center;
display: inline-block;
font-size:20px;
background: #d9d9d9;
color:hsla(0,0%,100%,.4);
}
.test-btn>span:last-child{
float:right;
}
.test-btn>span:hover{
cursor:pointer;
background: #999999;
}
</style>
JS代码:
<script src="./js/slidings.js"></script>
<script>
var params={
client:$('.test'),
move:$('.test-scroll'),
moveChild:$('.test-scroll>div'),
scrollBtn:$('.test-scroll-btn span'),
scrollBtnColor:'selected',
nextBtn:$('.next'),
prevBtn:$('.prev'),
i:1,
timer:null,
times:1200
} slidings(params);
</script>
插件代码：
function slidings(params){
params.timer=setInterval(function(){
params.i++;
moveImg(params.i)
},params.times);
$(params.client).hover(function(){
clearInterval(params.timer)
},function(){
params.timer=setInterval(function(){
params.i++;
moveImg(params.i)
},params.times);
})
$(params.nextBtn).click(function(){
params.i++;
moveImg(params.i);
});
$(params.prevBtn).click(function(){
params.i--;
moveImg(params.i);
});
$(params.scrollBtn).click(function(){
var _index=$(this).index()+1;
params.i=_index;
moveImg(params.i);
});
function moveImg(){
if (params.i == params.moveChild.length-1) {
console.log(params.i);
params.i=1;
$(params.move).css({'left':'0'});
}
if(params.i == 0){
params.i=params.moveChild.length-2;
$(params.move).css({left:((params.moveChild.length-1)*-params.client.outerWidth())});
}
$(params.move).stop().animate({'left':-params.client.outerWidth()*params.i+'px'},params.times,function(){
});
if (params.i == params.moveChild.length-1) {
$(params.scrollBtn).eq(0).addClass(params.scrollBtnColor).siblings().removeClass(params.scrollBtnColor);
}else{
$(params.scrollBtn).eq(params.i-1).addClass(params.scrollBtnColor).siblings().removeClass(params.scrollBtnColor);
}
}
}
插件使用说明:
无缝轮播图： 滑动的是改变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);