javascirpt自动播放焦点图效果

javascirpt自动播放焦点图效果

javascirpt自动播放焦点图效果

javascript部分:

window.onload=function(){
var oBox=document.getElementById("focusMap");
var oLi=oBox.getElementsByTagName("li");
var oBtn=oBox.getElementsByTagName("a");
var prve=document.getElementById("prve");
var next=document.getElementById("next");
var timer=null;
var now=0;
for(var i=0;i<oLi.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
now=this.index;
play();
}
}
function play(){
for(var m=0;m<oLi.length;m++){
oBtn[m].className="";
oLi[m].style.opacity=0;
}
oBtn[now].className="cuurent";
oLi[now].style.opacity=1;
}
next.onclick=oNext;
timer=setInterval(oNext,2000);
function oNext(){
now++;
if(now==oLi.length){
now=0;
}
play();
}
prve.onclick=function(){
now--;
if(now==-1){
now=oLi.length-1;
}
play();
}
oBox.onmousemove=function(){
clearInterval(timer);
}
oBox.onmouseout=function(){
timer=setInterval(oNext,2000);
}
}

div+css部分:

<div class="focusMap" id="focusMap">
<ul>
<li style="opacity: 1;"><img src="images/pic1.jpg" alt="javascirpt自动播放焦点图效果"></li>
<li><img src="images/pic2.jpg" alt="javascirpt自动播放焦点图效果"></li>
<li><img src="images/pic3.jpg" alt="javascirpt自动播放焦点图效果"></li>
<li><img src="images/pic4.jpg" alt="javascirpt自动播放焦点图效果"></li>
</ul>
<div class="focusBtn"><a class="cuurent">1</a><a>2</a><a>3</a><a>4</a></div>
<div id="prve"><</div>
<div id="next">></div>
</div>

<style>
div,ul,li,a{margin: 0;padding:0;}
ul,li{ list-style: none;}
.focusMap{width:510px;height: 454px; display: block; overflow: hidden; position: relative}
.focusMap ul li{ opacity:0;width:510px;height: 454px;position: absolute;top:0;left:0; transition:opacity 2s ease;}
.focusBtn{ display: block;width:510px;height:20px; position: absolute;bottom:10px;left:0; text-align: center;}
.focusBtn a{ display: inline-block;width:20px;height: 20px; cursor:pointer;line-height: 20px;font-size:12px; font-family:"微软雅黑";background: #000;color:#fff;margin:0 5px;border-radius:50%;}
.focusBtn .cuurent{ background:#f00;}
.focusMap ul .cuurent{opacity:1;}
#prve{width:40px; display: block; text-align: center;font-family:"宋体";height: 50px; line-height:50px;color: #fff;cursor:pointer;font-size:30px; position: absolute;top:202px;left:10px; background:#000;}
#next{width:40px; display: block; text-align: center;font-family:"宋体";height: 50px; line-height:50px;color: #fff;cursor:pointer;font-size:30px; position: absolute;top:202px;right:10px; background:#000;}
#next:hover,#prve:hover{ background: #f00;}
</style>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: