点击小圆点循环播放图片
<style>
*{
padding: 0;
margin: 0;
}
.place{
position: relative;
width: 800px;
height: 600px;
}
p{
top: 0;
left: 0;
height: 30px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 30px;
}
#mein1{
margin-top: 570px;
}
img{
width: 800px;
height: 600px;
}
p,.box{
position: absolute;
width: 100%;
}
.box{
bottom: 10px;
text-align: center;
}
.box span{
display: inline-block;
background-color: blue;
width: 20px;
height: 20px;
border-radius: 50%;
cursor:pointer;
margin-bottom: 30px;
}
.place .box .content{
background-color: red;
}
.box button{
position: absolute;
width: 35px;
height: 50px;
font-size: 30px;
top: -400%;
background:rgba(0,0,0,.3);
color: #fff;
}
.box .leftBut{
left: 0;
}
.box .rightBut{
right: 0;
}
</style>
</head>
<body>
<div class="place">
<p>1</p>
<p id="mein1">美女1</p>
<img src="./img/1.jpg" alt="">
<div class="box">
<span class="content"></span>
<span></span>
<span></span>
<span></span>
<button class="leftBut"><</button>
<button class="rightBut">></button>
</div>
</div>
</body>
<script type="text/javascript">
var spanarr = document.getElementsByClassName('box')[0].getElementsByTagName('span');
var img = document.getElementsByTagName('img')[0];
var p = document.getElementsByTagName('p');
var btn = document.getElementsByTagName('button');
var imgarr = ['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg'];
var n = 0;
var tag = true;
btn[0].onclick = function(){
tag = true;
}
btn[1].onclick = function(){
tag = false;
}
//点击右边的按钮,切换图片
btn[1].onclick = function(){
n++;
if(n == imgarr.length){
if(tag == false){
n = imgarr.length - 1;
}else{
n=0;
}
}
for(var i=0;i<spanarr.length;i++){
spanarr[i].className = '';
}
img.src = imgarr[n];
p[0].innerHTML = n+1;
p[1].innerHTML = "美女"+(n+1);
spanarr[n].className = 'content';
}
// 点击左边的按钮,切换图片
btn[0].onclick = function(){
n--;
if(n < 0){
if(tag == false){
n=0;
}else{
n=imgarr.length - 1;
}
}
for(var i=0;i<spanarr.length;i++){
spanarr[i].className = '';
}
//spanarr.className = 'content';
img.src = imgarr[n];
p[0].innerHTML = n+1;
p[1].innerHTML = "美女"+(n+1);
spanarr[n].className = 'content';
}
// 小圆点
for(var i = 0;i<spanarr.length;i++){
spanarr[i].index = i;
spanarr[i].onclick = function(){
img.src = imgarr[this.index];
for(var j = 0;j<spanarr.length;j++){
spanarr[j].className = '';
}
n=[this.index];
this.className = 'content';
p[0].innerHTML = 1+(this.index);
p[1].innerHTML = '美女'+(this.index+1);
}
}
</script>
效果图