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

JavaScript-轮播3

2020-03-28 20:11 92 查看

window.οnlοad=function()
{
var wrap=document.getElementsByClassName('wrap')[0];
var span=document.getElementsByClassName('buttons')[0].getElementsByTagName('span');
var arrow_left=document.getElementsByClassName('arrow_left')[0];
var arrow_right=document.getElementsByClassName('arrow_right')[0];

var speed=-600;
var timer=null;
var i=0;
var index=0;

//左右切换按钮
function prev()
{
index++;
if(index>4){
index=0;
}

showCurrentDot();

if(wrap.offsetLeft<-2000)
{
wrap.style.left=0;
}
else
{
wrap.style.left=wrap.offsetLeft+speed+"px";
}
}
function next()
{
index--;
if(index<0){
index=4;
}

showCurrentDot();

if(wrap.offsetLeft==0)
{
wrap.style.left=-2400+"px"
}
else
{
wrap.style.left=wrap.offsetLeft-speed+"px";
}
}
arrow_left.οnclick=function()
{
prev();
}
arrow_right.οnclick=function()
{
next();
}


//自动播放

clearInterval(timer);

function autoPlay()
{
timer=setInterval(function(){
prev();
},1000);
}

autoPlay();


//鼠标进入轮播图的时候,定时器关闭
wrap.οnmοuseοver=function()
{
clearInterval(timer);
}
wrap.οnmοuseοut=function()
{
autoPlay();
}


//选择图片的小按钮
function showCurrentDot()
{
for(i=0;i<span.length;i++)
{
span[i].className='';
}
span[index].className="on";
}


//选择按钮。会跳转到图片的位置
for(i=0;i<span.length;i++)
{
(function(i){
span[i].οnclick=function()
{
index=i;
wrap.style.left=-(index*600)+"px";
showCurrentDot();
}
})(i);
}
}

 

 

<div class="container">
<div class="wrap">
<img src="./img/timg10.jpg" alt="1">
<img src="./img/timg14.jpg" alt="2">
<img src="./img/timg15.jpg" alt="3">
<img src="./img/timg17.jpg" alt="4">
<img src="./img/timg19.jpg" alt="5">
</div>
<div class="buttons">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a>
</div>

 

 

 

* {margin:0;padding:0;}
a{text-decoration: none;}
.container {position: relative;width: 600px;height: 400px;margin:100px auto 0 auto;box-shadow: 0 0 5px green;overflow: hidden;}
.container .wrap {position: absolute;width: 3000px;height: 400px;z-index: 1;}
.container .wrap img {float: left;width: 600px;height: 400px;}
.container .buttons {
position: absolute;
right: 5px;
bottom:40px;
width: 150px;
height: 10px;
z-index: 2;
}
.container .buttons span {margin-left: 5px;display: inline-block;width: 20px;height: 20px;
border-radius: 50%;
background-color: green;
text-align: center;
color:white;
cursor: pointer;
}
.container .buttons span.on{background-color: red;}
.container .arrow {position: absolute;top: 35%;color: green;padding:0px 14px;border-radius: 50%;font-size: 50px;z-index: 2;display: none;}
.container .arrow_left {left: 10px;}
.container .arrow_right {right: 10px;}
.container:hover .arrow {display: block;}
.container .arrow:hover {background-color: rgba(0,0,0,0.2);}

转载于:https://www.cnblogs.com/xiaoyangtian/p/7979991.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
anhu8321 发布了0 篇原创文章 · 获赞 0 · 访问量 149 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: