网站——如何实现轮播效果

实现轮播效果需要运用到的知识：

• DOM操作
• 定时器
• 事件运用
• Js动画
• 函数递归
• 无限滚动

原理：控制图片列表的“left”值来显示相应的图片

组成部分<div id="container">：

1. <div id="list">//图片列表

<div id="list" style="left:-600px">//当图片的宽度全部为600px时

<img src="" alt=""/>

……//首尾各需要重复一张图片:例：假设有五张图片

<img src="images/5.png" alt="1">

<img src="images/1.png" alt="1">

<img src="images/2.png" alt="1">

<img src="images/3.png" alt="1">

<img src="images/4.png" alt="1">

<img src="images/5.png" alt="1">

<img src="images/1.png" alt="1">

　　　　　 2.<div id="button">//n个小圆点；箭头

<div id="button">

　　<span index="1" class="on"></span>

　　<span index="2"></span>

　　<span index="3"></span>

　　……//index～～？

</div>

　　　　　 3.<a href>//两个超链接_左右两个箭头的链接

<a href="" class="arrow" id="prev">&lt</a>

<a href="" class="arrow" id="next">&gt</a>

重点样式

#container{

　　overflow:hidden;//隐藏超出的图片列表

　　position:relative;

}

#list{

　　position:absolute;

　　z-index:1;

}

#buttom{

　　position:absolute;

　　z-index:2

}

#button#arrow{

　　display:none;

}

#arrow:hover{

　　background-color:RGBA(0,0,0,7)//最后一个数值改变的是当鼠标移到箭头上时箭头的透明度。

}

#container:hover .arrow{display:block}

JS脚本部分

<script type="text/javascript">

window.onload functino(){
　　var container=document.getElementById("container");
　　var list=document.getElementById("list");
　　var button=document.getElementById("button").getElementByTagname("span");
　　var prev=document.getElementById("prev");
　　var next=document.getElementById("next");
　　var index="1";
　　
　　function animate(offset){
　　　　var newleft=parseInt(list.style.left)+offset;

　　　　list.style.left=newleft+"px"
　　　　if newleft>-600{
　　　　　　　　list.style.left=-3000+"px";
　　　　　　}　
　　　　if newleft<-3000
　　　　　　　　list.style.left=-600+"px";　　　//img5:0; img1:-600; img2:-1200; img3:-1800; img4:-2400; img5:-3000; img1:-3600

　　}
　　prev.onclick=function{
　　　　animate(600);
　　　　
　　}
　　next.onclick=function{

　　　　animate(-600);
　　}}
　　
　　function showbutton()
　

</script>