照片轮播效果几乎是当前网站首页必不可少的效果展示，所以我就从三个方面来说明这个效果的简单实现。

图片跳转图片顺序控制前后按钮控制的实现本文展示了图片的间隔切换。

让我们先完成结构代码。这个我就不详细解释了。看效果。

代码：如下。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style * { box-sizing : border-box；} a { text-decoration : none；} ul、ol、Li { list-style : none；margin : 0；padd : 0；} #滑块{ width: 800pxheight: 300px飞越：隐藏；相对位置：margin: 0 auto} #滑块ul { width: 2400px相对位置：} #滑块ul :在{ content : }之后；宽度： 0；高度： 0；display:块；} #滑块ul li{左侧浮动：宽度： 800 px；height: 300px飞越：隐藏；} #滑块ul Li img { width : 100%；} #滑块ol { position: absolutebottom: 10px左： 46%；} #滑块ol Li { display : inline-block；} #阿利滑块{ display:内嵌块；padding:4px 8pxborder-radius :15 px；背景色： # 000；color: # fff} #滑块。上一页，#滑块。next { display : inline-block；绝对位置：top : 49%；背景色： # 000；opacity: 0.6color: # fffpadding: 3px} #滑块。prev { left: 10px} #滑块。next { right: 10px}/style/head body div id=' Slider ' ul Li img src=' http :3358 www . Bates-hew TT.com/images/Slider/Slider-1 . jpg '/Li Li img src=' http :http://www . Bates-hew TT.com/images/Slider/Slider-2 . jpg '/Li img src=' http :3358 www . Bates-hew TT.com/images/Slider/Slider-Slider

首先，我们需要找到图片的位置。在这里，我们是通过ul布局的，所以首先要找到UL手下的LI数量。

然后让图片一张一张地显示出来。我们使用窗口模式，也就是蒙版图层模式。#slider是窗口，ul是窗外的风景，ul的风景是水平排版的。

然后让外面的风景显示成窗户的大小，也就是让每一张图片每次都是窗户的风景。这里是控制图片的大小与窗口的大小相同。

以上解释是一个概念，即布局处理。现在我们用JS控制它，需要使用JS的setInterval或者setTimeout。这里我们使用setInterval(因为它使用起来很方便。).

每次跳跃的时候，我们都会控制ul位置的左边，这样每次UL下的风景就可以有不同的展现，这个左边是根据窗户的宽度来决定的。左边第一个当然是-800 * 0，第二个是-800*1，第三个是-800*2，以此类推。然后我们可以得到下面的代码。

script(function(){ var slider=document . getelementbyid(' slider ')；var imgul=slider . getelementsbytagname(' ul ')[0]；var imglis=imgul . getelementsbytagname(' Li ')；var len=imglis.lengthvar索引=0；setInterval(function(){ if(index=len){ index=0；} imgul . style . left=-(800 * index)' px '；指数；},2000);})();/scriptJS代码看起来很简单。我在这里设置了2秒的跳转顺序，然后让它在跳转次数大于等于图片数后返回到第一张图片。

希望这篇文章对大家学习javascript编程有所帮助。