使用javascript可以实现常见的动态网页轮播效果，如下图1所示：

图1

实现轮播有几个关键点：

(1)左右两边有一个箭头，指的是切换到左右，即点击相应的位置会切换到图片前(或后)的图片。

(2)图片底部有一排圆形按钮，每个按钮都有自己的点击事件。单击任意按钮切换到相应的图片

(3)不点击图片时，图片会自动播放，即出现图片轮播效果

首先，您可以将近似的HTML代码写成代码1:

代码1:

div id=' container ' div id=' list ' style=' left :-600 px；//将图像的父元素设置为向左定位600px，即向左移动一张图片的宽度。img src=' http : images/16 . jpg ' alt=' 1 '/设置5张图片的自动轮播，这里会有7张图片，图片以red team和img src=' http : images/12 . jpg ' alt=表示，这是因为每张图片都有两个事件：点击img src=' http : images/13 . jpg ' alt=' 2 '。要使第一张图片单击“前进”显示第五张图片，您需要在其前面添加第五张img src=' http : images/14 . jpg ' alt=' 3 '图片，并避免在第一张图片中单击“左”。同样，第一张图片应该添加在第五张图片的img src=' http : images/15 . jpg ' alt=' 4 '之后。使其实现平稳过渡。img src=' http : images/16 . jpg ' alt=' 5 ' img src=' http : images/12 . jpg ' alt=' 5 '/div div id=' buttons '/设置相应的按钮。用户定义的属性索引span index=' 1 ' class=' on '/span span index=' 2 '/span span index=' 3 '/span span index=' 4 '/span span index=' 5 '/span/diva href=' # Rel=' external nofollow ' Rel=' external nofollow ' id=' prev ' class=' arrow '/a//其中a表示箭头；(左箭头)、(右箭头)a href=' # ' rel=' external nofollow ' rel=' external nofollow ' id=' next ' class=' arrow '/a/div在上例中，图片宽600px，宽400px高；

然后将其CSS样式设置为代码2:

代码2:

* { margin : 0；padd : 0；文本装饰：无；}//设置所有元素body的基本样式{ padding: 20px} #容器{ position: relative//将最外层div元素的定位设置为相对定位，即相对于未设置定位前的位置进行定位。宽度： 600 px；高度： 400 px；border: 3px固体# 333；飞越：隐藏；//设置容器的宽度和高度，溢出部分设置为隐藏} # list { position: absolute//将图片所在父div的定位设置为绝对定位，即相对于被定位的父元素z-index: 1的定位；//设置此div的显示级别：width: 4200px//这个div是所有图片的父元素，所以它的宽度和高度设置应该包括所有图片height: 400px} # list img { float: left//设置图片显示的显示模式，向左横向浮动： 600 px；高度： 400 px；} # buttons { position : absolute；//设置屏幕底部所有点的定位方式，相对于容器元素绝对定位left: 250px//距父元素定位元素左侧的距离为250pxbottom: 20pxz-index : 2；//将点的显示级别设置为2，即图片div上方高度： 10px；宽度： 100 px；} #按钮跨度{左侧浮动：右边距： 5px；宽度： 10px；height: 10pxborder: 1px实心# fff边界半径：50%；//半径为50%，即设置为点显示背景： # 333；cursor:指针；} #按钮。在{ background: orangered}.箭头{position:绝对值；//设置按钮的定位方式，即相对于容器元素绝对定位top: 180pxz-index : 2；display:无；宽度： 40px；高度： 40px；font-size : 36px；font-weight:粗体；线高： 39px；文本对齐：中心；color: # fff背景-color: rgba(0，0，0， 3)；cursor:指针；} . arrow : hover { background-color : rgba(0，0，0， 7)；}#container:hover。箭头{display:块；} # prev { left: 20px} # next { right: 20px} */设置好基本样式后，其显示效果如图2所示：

图2

此时，您需要向特定元素添加一个事件，如下面的代码3所示：

代码3:

window . onload=function(){ var list=document . getelementbyid(' list ')；//获取图片元素的父元素，并将其命名为list var prev=document . getelementbyid(' prev ')；//获取左箭头var next=document . getelementbyid(' next ')；//获取右箭头函数animate(offset){ //设置一个名为animate的函数，该函数接收一个参数var new left=par sent(list。风格。左)偏移；//获取图片父元素左侧的定位值，加上上传的参数offset if(newleft-3000){//图片父div移动时，显示图片的定位为负，如图3，list . style . left=-600 ' px '；//但是当图片显示到五张图片的最后一张时，会自动跳转到第一张图片}否则如果(newleft-600){ //当你点击第一张图片上的左键时，会自动跳转到最后一张列表. style . left=-3000 ' px '；} else { list . style . left=new left ' px '；}}函数animate()获取style.left，它是相对于左边来获取距离的，所以style.left在第一张图片之后是负数，如图3所示：

图3

结合上面的代码3，我们可以设置左右按钮的点击事件，如代码4所示：

代码4:

Prev.onclick=function(){ //左键单击事件动画(600)；}next.onclick=function(){ //右击事件animate(-600)} var timer；function play(){ timer=set interval(function(){//set interval调用，时间间隔为1500毫秒。next.onclick() //这里是自动右切换，如果要设置左切换，可以改成next to prev }，1500)} play()；//实现自动调用varcontainer=document . getelementbyid(' container ')；//获取最外面的容器元素functionstop(){ clearinterval(timer)；} container.onmouseover=stop//当鼠标上移时，清除timer容器. onmouseout=play；//当鼠标从容器元素的顶部移开时，var buttons=document的自动转盘。getelementbyid ('buttons ')。执行getelementsbyname(' span ')；var指数=1；函数buttonssshow(){ for(var I=0；ibutton s . length；I){ if(button[I]。class name=' on '){//如果一个span设置了class='on '，那么它的class属性设置为空按钮[I]。classname=} }//数组从0开始，所以index需要-1buttons [index-1]。' on '；//将下一个span的class属性值设置为“on”，即highlight } prev . onclick=function(){ index-=1；if(index 1){ index=5；} buttonssshow()；动画(600)；}next.onclick=function(){//由于上面计时器的作用，索引会一直增加，元点只有5个，所以需要先做个判断。索引=1；if(index 5){ index=1；} buttonssshow()；动画(-600)；}//点击任意点切换到对应的图片为(var I=0；ibutton s . length；I ){(功能(i){ //使用立即功能按钮[I]。onclick=function(){ var click index=par sent(这。getattribute(' index ')；var offset=600 *(index-click index)；动画(偏移)；//存储鼠标点击后的位置，正常显示小点索引=clickIndexbuttonssshow()；}})(i)}}以上是边肖介绍的JavaScript动态轮播效果的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！