支持左右按钮和圆圈的切换
样式
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
}
#box{
width: 720px;
height: 225px;
margin: 100px auto;
border: 1px solid black;
position: relative;
}
#box-img{
height: 100%;
}
#box-img li{
height: 100%;
border: 1px solid sienna;
display: none;
}
#box-list{
overflow: hidden;
display: inline-block;
position: absolute;
bottom: 10px;
left:290px;
}
#box-list li{
width: 20px;
height: 20px;
float: left;
margin-left: 10px;
border-radius: 50%;
border: 1px solid green;
cursor: pointer;
}
#box-right,#box-left{
width: 50px;
height: 60px;
font-size: 30px;
background-color: #dedede;
text-align: center;
line-height: 60px;position: absolute;
opacity: 0.5;
}
#box-right{
right: 10px;
top:70px;
cursor: pointer;
}
#box-left{
left: 10px;
top:70px;
cursor: pointer;
}
标签
<body> |
<div id="box"> |
<ul id="box-img">
<li><img src="[./img/0.jpg](./img/0.jpg)" alt=""></li>
<li><img src="[./img/1.jpg](./img/1.jpg)" alt=""></li>
<li><img src="[./img/2.jpg](./img/2.jpg)" alt=""></li>
<li><img src="[./img/3.jpg](./img/3.jpg)" alt=""></li>
</ul>
<ul id="box-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="box-right">
<span> > </span>
</div>
<div id="box-left">
<span> < </span>
</div>
</div>
</body>
js
<script>
var box_right = document.getElementById("box-right");
var box_left = document.getElementById("box-left");
var box_img = document.getElementById("box-img").children;
var box_list = document.getElementById('box-list').children;
var x =0;
box_img[0].style.display = "block";
box_list[0].style.backgroundColor="red";
box_right.onclick = function(){
box_img[x].style.display = "none";
box_list[x].style.backgroundColor = "";
x++;
if(x>box_img.length-1){
x=0;
}
box_img[x].style.display="block";
box_list[x].style.backgroundColor="red";
console.log(x)
};
box_left.onclick = function () {
box_img[x].style.display = "none";
box_list[x].style.backgroundColor = "";
x--;
if(x<0){
x=box_img.length-1;
}
box_img[x].style.display="block";
box_list[x].style.backgroundColor="red";
console.log(x)
};
for(var j=0;j<box_list.length;j++){
box_list[j].index =j;
box_list[j].onclick = function () {
box_list[x].style.backgroundColor='';
this.style.backgroundColor="red";
box_img[x].style.display = "none";
box_img[this.index].style.display = "block";
x=this.index;
}
}
</script>
