点击圆点切换图片
来源：3-6 点击圆点切换图片（1）
他人即地狱_
2017-11-22 21:14:50
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
font-family:"微软雅黑";
}
.main{
height:460px;
width:1200px;
margin:30px auto;
position:relative;
}
.banner{
height:460px;
width:1200px;
position:relative;
}
.banner-slide{
height:460px;
width:1200px;
background-repeat:no-repeat;
position:absolute;
display:none;
}
.slide1{
background-image:url(../img/bg1.jpg);
}
.slide2{
background-image:url(../img/bg2.jpg);
}
.slide3{
background-image:url(../img/bg3.jpg);
}
.slide-active{
display:block;
}
/*导航箭头设置*/
.button{
width:40px;
height:80px;
position:absolute;
left:244px;
top:50%;
margin-top:-40px;
z-index:1;
background:url(../img/arrow.png) no-repeat center;
}
.button:hover{
background-color:#333;
}
.next{
left:auto;
right:0;
}
.prev{
transform:rotate(180deg);
}
/*圆点导航设置*/
.dots{
position:absolute;
right:30px;
bottom:40px;
z-index:1;
}
.dots span{
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
background-color:rgba(7,17,27,0.8);
z-index:1;
margin:0 10px;
box-shadow:0 0 0 2px rgba(255,252,255,0.8) inset;
}
.dots span.active{
background-color:rgba(255,252,255,0.8);
box-shadow:0 0 0 2px rgba(7,17,27,0.8) inset;
}
.dots span:hover{
background-color:rgba(255,252,255,0.8);
box-shadow:0 0 0 2px rgba(7,17,27,0.8) inset;
}
</style>
<script type="text/javascript">
window.onload=function(){
//封装一个取DOM元素的方法
function getId(ID){
return typeof (ID)==="string"?document.getElementById(ID):ID;
}
var index=0,
time=null,
imgs=getId("banner").getElementsByTagName("div"),
len=imgs.length,
dots=getId("dots").getElementsByTagName("span"),
main=getId('main');
//鼠标划过main停止轮播
main.onmouseover=function(){
if(time)clearInterval(time);
}
//鼠标离开时图片轮播
main.onmouseout=function(){
time=setInterval(function(){
index++;
if(index>=len){
index=0;
}
//调用切换图片函数
changeImg();
},3000)
};
//直接调用轮播方法
main.onmouseout();
//给小圆点绑定事件
for(var m=0;m<len;m++){
//遍历dots，將m的数值作为span的索引
dots[m].id=m;
dots[m].onclick=function(){
/*index=this.id与this.id=index这两种方式获取到的index为啥不一样啊。写代码的时候还要注意这些顺序吗？*/
//index=this.id;
this.id=index;
console.log(index);
//调用切换图片函数
//console.log(this.id);
//changeImg();
}
}
//切换图片函数
function changeImg(){
for(var i=0;i<len;i++){
imgs[i].style.display="none";
};
imgs[index].style.display="block";
}
}
</script>
</head>
<body>
<!--主盒子-->
<div class="main" id="main">
<!--导航箭头-->
<a href="javascript:void(0)" class="button prev"></a>
<a href="javascript:void(0)" class="button next"></a>
<!--圆点导航-->
<div class="dots" id="dots">
<span class="active"></span>
<span ></span>
<span ></span>
</div>
<!--轮播图片-->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"> </div>
</a>
<a href="">
<div class="banner-slide slide2"> </div>
</a>
<a href="">
<div class="banner-slide slid
e3"> </div>
</a>
</div>
</div>
</body>
</html>
2回答
-
小于飞飞
2017-11-23
问题1：index=this.id与this.id=index这两种方式获取到的index为啥不一样，之前给每项添加一个id（ts[m].id=m），记录顺序值，所以index=this.id 将点击项上的id值赋给index ，而this.id=index ， 运行后index值是0，所以每次点击 this.id 记录的都是0。问题2：传上来的html代码中slide3位置标签错误。整体好好思考下，并动手实践下。
0 -
正在想名字呢
2017-11-23
this.id = index; 这个不是获取索引值，这个是把index赋值给当前的这个id，所以才会不一样的
0
相似问题