前言
简单带过一下html结构：主体结构：div(.center)>ul>li>ol>li;
<div class='officalCommunity' style="margin-top:100px;"> <!--官方社群-->
<div class='title'>
社群
</div>
<div class='slider'> <!--可无限循环的游戏slider-->
<div class='left'></div>
<div class='center'>
<ul class='centerul'> <!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
<li> //只保留了一个li
<ol class='centerol'>
<li>
<div class='image_content'><img src='img/8ad656a4-eac9-4fee-acde-f9d211e70bdc.png'/></div>
<div class='image_text'>王牌竞速</div>
<a href="#" class="addLinks">
<p>一键加群</p>
</a>
</li>
<li>
<div class='image_content'><img src='img/8ad656a4-eac9-4fee-acde-f9d211e70bdc.png'/></div>
<div class='image_text'>王牌竞速</div>
<a href="#" class="addLinks">
<p>一键加群</p>
</a>
</li>
<li>
<div class='image_content'><img src='img/8ad656a4-eac9-4fee-acde-f9d211e70bdc.png'/></div>
<div class='image_text'>王牌竞速</div>
<a href="#" class="addLinks">
<p>一键加群</p>
</a>
</li>
<li>
<div class='image_content'><img src='img/8ad656a4-eac9-4fee-acde-f9d211e70bdc.png'/></div>
<div class='image_text'>王牌竞速</div>
<a href="#" class="addLinks">
<p>一键加群</p>
</a>
</li>
<li>
<div class='image_content'><img src='img/8ad656a4-eac9-4fee-acde-f9d211e70bdc.png'/></div>
<div class='image_text'>王牌竞速</div>
<a href="#" class="addLinks">
<p>一键加群</p>
</a>
</li>
</ol>
<li>
</ul>
</div>
<div class=right></div>
</div>
</div>
提示：以下是本篇文章正文内容，下面案例可供参考
JS–效果实现
1.右侧按钮效果
首先，我们要明确这种动态过渡效果是通过调节ul(所有分好类的图片载体)的left使其移动出ul的父级div(overflow:hidden)实现图的切换，加上ul设定的transition：1s来实现慢慢切换图片的过渡效果；
下面是js中所有需要选择的元素和设定的变量:
//移动ul
var centerul=this.$('.centerul')[0];
centerul.innerHTML += centerul.innerHTML; //关键！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
//最内部的li
var centerolli=this.$('.centerol li');
//左边按钮
var leftbtn=this.$('.left')[0];
//右边按钮
var rightbtn=this.$('.right')[0];
//广告结构位ul>li>ol>li
//ul移动基本位移 1个ul>li的宽度
var lwidth=centerul.children[0].offsetWidth; //offsetwidth=width+padding+border;
//ul宽度
centerul.style.width=centerul.children[0].offsetWidth*centerul.children.length + 'px'; ///一个children的宽度*children个数
var index=0;
//特殊宽度 //只走一个ol>li
var lt=162;
var slider=this.$('.slider')[0]; //整个广告模块
var timer=null;
var b=true;
var timer=null;
在图中我去掉了ul父级div的overflow：hidden效果，可以看到如果我们想要点击右边的按钮让div外部的图片从右向左将原本的展示图挤出的话，我们需要在点击右边按钮时让ul向左移动一个 lwidth(也就是ul的left从0变为一个-lwidth)，因此我们需要一个变量index来决定ul的移动量从而切换不同的li（图片集);
index的初始值为0,每次点击右侧按钮时让index自减;
然后改变ul的left属性值；
centerul.style.left=lwidth*index+‘px’;
这样第一步就做到位了；
一、接下来我们考虑第一个特殊情况：
我在实际的html文件中有一个li里只放了一张图片(其余的都是五张),那么我要到切换到这个li时也就是index=-3时就要对left赋予一个特殊值；（centerul.style.left=lwidthindex+4lt+‘px’); 当index=-3时让ul的left值能让ul少向左移动4张图片大小的距离；
二、接下来我们考虑第二个特殊情况：
那当index=-4时我们需要让图片切换到第一个li也就是最开始时我们见到的那几张图；怎么办呢?
首先我让内容都复制了一遍
centerul.innerHTML += centerul.innerHTML; //关键！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
这行js代码是关键！（效果就是让ul的所有内容都复制一遍排在后面）
让数字表示图片集合的话就类似于这种感觉：12341234；
完成了这步后，就想好此时ul的left属性值为多少；
比index=-3时多一个lwidth;
刚好此时index=-4,所以依旧是centerul.style.left=lwidthindex+4lt+‘px’;
然后我们需要将这个复制的1变为原本的1，此时应先让index变为0；
关键的最后一步来了，因为我们切换图片的速度为1s(transition:1s),所以我们只要在切换完成的一瞬间(换好后0.1s）先让切换图片的速度变为0s，然后让ul的left变为0不就直接神不知鬼不觉的让图片切换回最初的位置了吗？（完成这两步不要忘了让图片的切换速度恢复为1s，也就是transition:1s;)
setTimeout(function(){
centerul.style.transition= '0s';
setTimeout(function(){
centerul.style.left=0;
setTimeout(function(){
centerul.style.transition= '1s';
},100)
},10)
},1010)
一些其他的小细节：按钮开关：设定一个布尔值b为ture;当点击右侧按钮时先判断 !b 是否为true,若为true则结束本点击函数；要不是则令b值变为false则下次点击右侧按钮时就会满足 !b 为true的条件直接结束点击函数，需要等到上一次点击事件触发的一个1200ms也就是1.2s的延时器记时完毕后（也就是上次点击右侧按钮让图片切换好后0.2s时）将b的值赋值为true时才能恢复右侧按钮的点击效果；
右边按钮的js主体代码：
//向右循环
rightbtn.onclick=function(){
if(!b) //开关
{
return;
}
b=false;
setTimeout(function(){
b=true;
},1200);
index--;
if(index==-3)
{
centerul.style.left=lwidth*index+4*lt+'px';
}
else if(index==-4)
{
centerul.style.left=lwidth*index+4*lt+'px';
index=0;
setTimeout(function(){
centerul.style.transition= '0s';
setTimeout(function(){
centerul.style.left=0;
setTimeout(function(){
centerul.style.transition= '1s';
},100)
},10)
},1010)
}
else
{
centerul.style.left=lwidth*index+'px';
};
};
2.左侧按钮效果
如果我们想要点击左边的按钮让外部的图片从左向右将原本的展示图挤出的话，我们需要在点击左边按钮时让ul向右移动一个 lwidth(也就是ul的left从0变为一个lwidth)。
BUT:
点击左侧按钮的情况在一开始时就是比较特殊的，因为我需要图片直接切换到第3个图片集，因为第四个图片集只有一张图所以我在这就让它在一开始第一次点击左侧按钮时能在视线里掠过一下就好；
首相要回忆其这个之前的步骤
我让内容都复制了一遍
centerul.innerHTML += centerul.innerHTML; //关键！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
上面这行js代码是关键！（效果就是让ul的所有内容都复制一遍排在后面）
之后我们在点击leftbtn时先对index值来个判断，如果index值为0，那么就先让图片的切换速度调为0s，然后将ul的left变为 centerul.style.left=(-3lwidth)-lt+‘px’;* 也就是让第五个图片集神不知鬼不觉的（和第一个图片集长得一样的图片集）替换原本的展示图集；
注意：此时展示的图片集左侧被隐藏的图片集就为一个完整循环图片集的最后两个；（1234中的34）
接下来恢复让图片的切换速度调为1s,让index的值变为-2，然后将ul的left变为 centerul.style.left=indexlwidth+‘px’;*
就可以如下完成循环效果：
centerul.style.transition= '0s';
centerul.style.left=(-3*lwidth)-lt+'px';
setTimeout(function(){
centerul.style.transition= '1s';
index=-2;
centerul.style.left=index*lwidth+'px';
},100)
排开以上这种情况，我们还有种情况不能忽视就是index==-3时的情况
以为这一次点击其实我们要切换到第二个图集那么就应让index的值为1，ul的left的值为：centerul.style.left=lwidthindex+‘px’;(除了index=0的情况left的值都由此运算式决定）*
leftbtn.onclick=function(){
if(!b)
{
return;
}
b=false;
setTimeout(function(){
b=true;
},1200)
if(index==0)
{
centerul.style.transition= '0s';
centerul.style.left=(-3*lwidth)-lt+'px';
setTimeout(function(){
centerul.style.transition= '1s';
index=-2;
centerul.style.left=index*lwidth+'px';
},100)
}
else{
if(index==-3)
{
index=-1;
}
else
{
index++;
}
centerul.style.left=lwidth*index+'px';
}
};
3.最后一点细节，自动轮播
//自动循环
clearInterval(timer);
timer=setInterval(rightbtn.onclick,5000);
//暂停循环
slider.onmouseenter=function(){
clearInterval(timer);
}
//重新循环
slider.onmouseleave=function(){
clearInterval(timer);
timer=setInterval(rightbtn.onclick,5000);
}
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
