首先，分析轮播效果的实现原理：

1.父元素作为显示窗口，大小固定，部分隐藏，即overflow:hidden设置；

2.子元素存储图片列表用ul和ul固定定位，引用为父元素，即父元素position:relativeUl元素位置：绝对值；

3.li(即图片)的宽度是父元素的显示宽度

4.最初，ul的左边是0，然后第一张图片是第一个li显示

5.单击“下一步”按钮将整个ul向左移动，以便第二个li与父元素的左边框对齐。此时，ul的左边是负li的宽度

6.单击上一步按钮将整个ul向右移动

7.处理特殊情况，即第一张是上一张，最后一张是下一张

当第一张图片指向前一张图片时，我们滚动到最后一张图片，整个ul向左移动，也就是左边的值变为负n-1图片的宽度；

当最后一张图片指向下一张图片时，我们滚动到第一张图片的位置，整个ul向右移动，也就是左边的值变为0

用图片帮助理解：

修改ul元素的左值非常简单。ul.style.left=设置值，但是我们想要有滑动效果，所以需要使用setInterval来实现

最终效果如下：

动图不能录太多。CSDN有200万_(:)_限额

把代码写在下面

脚本部分

script window . onload=function(){ var nav=document . getelementbyid(' nav ')。getElementsByTagName(' Li ')；var img=document . getelementbyid(' imgList ')；var prev=document . getelementbyid(' prev ')；var next=document . getelementbyid(' next ')；var索引=0；//当前图片序列号var定时器；//定时器名称var iSpeed=-10；//滚动速度函数goroll(){ timer=set interval(function(){ img . style . left=img . offsetleftispeed ' px '；var stop=-index * 870 ' px '；//当到达目标位置时，停止定时器if(img . style . left==stop){ is peed=-10；clearInterval(计时器)；} }，10) }//上一次和下一次点击效果prev。onclick=function(){ if(index==0){ index=2；iSpeed=-20；} else { index-；iSpeed=10} Goroll()；//img . style . left=-index * 870 ' px '；};next . onclick=function(){ if(index==2){ index=0；iSpeed=20} else { indexiSpeed=-10；} Goroll()；//img . style . left=-index * 870 ' px '；};}/scripthtml放下它

div class=' panel center-panel BC _ rice ' div class=' panel-box ' a class=' prev-BTN ' id=' prev '/a div class=' img-box ' div class=' list-box ' ul class=' img-list ' id=' imgList ' Li img src=' http : img/c 1 . jpg '/Li img src=' http : img/c 2 . jpg '/Li liimg src=' http。FB { font-weight : bold；}.c _ fff { color: # fff}。f24 { font-size :24 px} .f72 { font-size :72 px} .lh40 {线高：40 px}.BC _ brown {背景： # 533d 3b}.BC _ green {背景： # 74 cdab}.BC _ rice {背景： # ecf1 c8}.bc _米色{ background: # d1d5b0}。mt10 { margin-top :10 px；} .mt20 { margin-top :20 px；} .mt30 { margin-top :30 px；} .mt40 { margin-top :40 px；}.TC { text-align :居中；}.dblock { display : block } . clear fix : after。在{内容： }之后；显示：块；可见性：隐藏；clear:both线高：0;字号：0；}.clearfix { zoom:1}html，正文{宽度：100%；高度：100%;font-size :14 px字体-家族：万千Procolor: # 433c3c}div、p、a、span、ul、li、em { margin:0划水：0;} ul Li { list-style-type : none；} :悬停{光标：指针；}/*主面板*/。主面板{宽度：100%;最小宽度宽度：1030pxmargin:0 auto}。主面板。面板{宽度：100%;}.主面板。面板。线{宽度：100%；height :23 pxbackground : URL('./img/line。png ')；}.主面板。面板。面板盒{宽度：960像素高度：100%;margin:0汽车飞越：隐藏；位置：相对；}.中央面板{ height:510px位置：相对；}.中央面板。面板盒{ width:990pxz指数：1000;}.中央面板。中心线高：76像素位置：绝对；宽度：100%;top:200pxz索引：10;}.中央面板。面板盒a { width :51 pxh8 :82 px显示：块；位置：绝对；top:200px}。中央面板prev-btn{background:url('./img/按钮-左侧。png ')；left:0}。中央面板下一个-btn{background:url('./img/按钮-右侧。png ')；右：0}。中央面板img-box {宽度：940 px高度：366 pxbackground:url('./img/暗影。png ')；页边距-顶部：45像素；边距-左侧：10 px飞越：隐藏；}.中央面板。列表框{ width :870 pxh three :334 pxmargin 336016 px汽车；飞越：隐藏；位置：相对；}.中央面板img-list { width :4000 px；高度：334px位置：绝对；left:0}。中央面板img-list Li { width :870 px；高度：100%;float:left}因为我写了一整个页面都放出来没啥用，所以我只截取了用到的部分。现在还是有些问题的，比如如果点击过快是会出问题的，这个以后看看能不能完善。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。