<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
img{
width: 500px;
height: 330px;
}
#outer{
width: 520px;
height: 330px;
margin: 50px auto;
background-color: yellowgreen;
padding: 10px 0;
position: relative;
/* 裁剪溢出部分 */
overflow: hidden;
}
#imgList{
list-style:none;
position: absolute;
}
#imgList li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 15px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
/* 兼容ie8*/
filter:alpha(opacity=50);
}
#navDiv a:hover{
background-color: yellow;
}
</style>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">
window.onload=function () {
var timer;
var imgList=document.getElementById("imgList");
var imgAll=document.getElementsByTagName("img");
imgList.style.width=520 *imgAll.length+"px";
//设置导航居中
var navDiv=document.getElementById("navDiv");
var outer=document.getElementById("outer");
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
//默认图片索引
var index=0;
//获取所有的a元素超链接
var allA=document.getElementsByTagName("a");
//设置默认选中效果
allA[index].style.backgroundColor="blue";
for (var i=0;i<allA.length;i++){
//为每一个超链接添加一个属性
allA[i].num =i;
//为超链接绑定单机响应函数
allA[i].onclick=function () {
//点击时停止自动轮播
clearInterval(timer);
//获取点击超链接的索引,并将其设置为index
index=this.num;
//切换图片
// imgList.style.left=-520*index+"px";
move(imgList,"left",-520*index,10,function () {
autoChange();
});
//修改正在选中的a
setA();
}
};
//自动切换图片
autoChange();
function setA() {
//判断是否是最后一张图片
if(index>=imgAll.length-1){
index=0;
imgList.style.left=0;
}
//遍历所有的a使之变为红色
for (var i=0; i<allA.length;i++) {
allA[i].style.backgroundColor="";
};
allA[index].style.backgroundColor="blue";
}
function autoChange() {
//开启定时器
timer=setInterval(function () {
index++;
index%=imgAll.length;
move(imgList,"left",-520*index,20,function () {
setA();
})
},1000)
}
}
</script>
</head>
<body>
<!--//创建外部div,来做大容器-->
<div id="outer">
<ul id="imgList">
<li><img src="img01.jpeg"/></li>
<li><img src="img03.jpeg"/></li>
<li><img src="img02.jpeg"/></li>
<li><img src="img01.jpeg"/></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</body>
</html>
自动轮播事件
猜你喜欢
转载自blog.csdn.net/weixin_44552543/article/details/90030086
今日推荐
周排行