JavaScript-轮播

<div id="wrap">
<!-- 图片展示区 -->
<div id="inner" class="clear">
<!-- 所有图片并排的块 -->
<img src="img/timg10.jpg" alt="">
<img src="img/timg14.jpg" alt="">
<img src="img/timg15.jpg" alt="">
<img src="img/timg8.jpg" alt="">
<img src="img/timg9.jpg" alt="">
</div>
<div class="paganation" id="paganation">
<!-- 页面按钮区域 -->
<span class ="selected">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div id="left" class="arrow"><</div>
<!-- 向左切换按钮 -->
<div id="right" class="arrow">></div>
<!-- 向右切换按钮 -->
</div>

<style>
*{ margin:0; padding:0; border:0; }
.clear{ *zoom:1; }
.clear:after{ visibility: none; content:""; display:block; clear:both; height:0; }
#wrap{ width: 510px; height:286px; margin:0 auto; position:relative; overflow: hidden; }
#inner{ width: 1000%; height:100%; position:absolute; left:0; top:0; }
#inner img{ width:10%; height:100%; float: left; }
.paganation{ width: 100%; position: absolute; bottom:10px; text-align:center; }
.paganation span{ padding:5px 8px; background: #F2F2F2; color:red; border-radius:50%; cursor: pointer }
.paganation .selected{ background: red; color:white; }
.arrow{ position:absolute; top:0; width: 30px; height: 286px; line-height: 286px; text-align: center; color: red; cursor: pointer; }
#right{ right: 0; }
.arrow:hover{ background: rgba(0,0,0,0.5); }
</style>

window.οnlοad=function()
{
　　var wrap=document.getElementById("wrap");
　　var inner=document.getElementById("inner");
　　var spanList=document.getElementById("paganation").getElementsByTagName("span");
　　var left=document.getElementById("left");
　　var right=document.getElementById("right");
　　var clickFlag=true;
　　var time
　　var index=0;
　　var Distance=wrap.offsetWidth;

　　//定义图片滑动的函数
　　function AutoGo()
　　{
　　var start=inner.offsetLeft;
　　var end=index*Distance*(-1);
　　var change=end-start;
　　var timer;
　　var t=0;
　　var maxT=30;
　　clear();
　　if(index==spanList.length){
　　　　spanList[0].className="selected";
　　}else{
　　　　spanList[index].className="selected";
　　}
　　clearInterval(timer);
　　timer=setInterval(function(){
　　　　t++;
　　　　if(t>=maxT)
　　　　{
　　　　　　clearInterval(timer);
　　　　　　clickFlag=true;
　　　　}
　　　　inner.style.left=change/maxT*t+start+"px"; //每个17毫秒让块移动
　　　　if(index==spanList.length&&t>=maxT)
　　　　{
　　　　　　inner.style.left=0;
　　　　　　index=0;
　　　　}
　　},17);
}

//编写图片向右滑动的函数
function forward()
{
　　index++;
　　/* 长度比下标大1 */
　　if(index>spanList.length - 1)
　　{
　　　　index=0;
　　}
　　AutoGo();
}

//编写图片向左滑动函数
function backward()
{
　　index--;
　　if(index<0)
　　{
　　　　index=spanList.length-1;
　　　　inner.style.left=(index+1)*Distance*(-1)+"px";
　　}
　　AutoGo();
}

//开启图片自动向右滑动的计时器
time=setInterval(forward,3000);

//设置鼠标悬停动画停止
wrap.οnmοuseοver=function()
{
　　clearInterval(time);
}
wrap.οnmοuseοut=function()
{
　　time=setInterval(forward,3000);
}

//遍历每个按钮让其切换到对应图片
for(var i=0;i<spanList.length;i++)
{
　　spanList[i].οnclick=function(){
　　　　index=this.innerText-1;
　　　　AutoGo();
　　}
}

//左切换事件
left.οnclick=function()
{
　　if(clickFlag){
　　　　backward();
　　}
　　clickFlag=false;
}

//右切换事件
right.οnclick=function(){

　　if(clickFlag){
　　　　forward();
　　}
　　clickFlag=false;
}

//清除页面所有按钮状态颜色
function clear()
{
　　for(var i=0;i<spanList.length;i++)
　　{
　　　　spanList[i].className="";
　　}
}

}

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

• 点赞
• 收藏
• 分享
• 文章举报