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

标签：

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

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

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

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

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

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

<img src="" />

……//首尾各需要重复一张图片

　　　　　 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");

　　prev.onclick=function{
　　　　list.style.left=parseInt(liat.style.left)-600+"px";
　　}

　　next.onclick=function{
　　　　list.style.left=parseInt(liat.style.left)+600+"px";
　　}

}　　　　

</script>

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

标签：

原文地址：http://www.cnblogs.com/Thelma/p/5800994.html