您的位置：首页 > Web前端 > JavaScript

用javascript点击小圆点循环播放轮播图片

2019-05-11 16:43 141 查看

点击小圆点循环播放图片

<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
;
p[0].innerHTML = n+1;
p[1].innerHTML = "美女"+(n+1);
spanarr
.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
;
p[0].innerHTML = n+1;
p[1].innerHTML = "美女"+(n+1);
spanarr
.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>

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航