java延时轮播图_[Java教程]焦点轮播图效果_星空网

焦点轮播图效果

2017-06-03

0

焦点轮播图效果

*{

margin: 0;

padding: 0;

list-style-type: none;

}

.wrap{

width:490px;

height: 170px;

margin: 100px auto;

overflow: hidden;

position: relative;

}

.wrap ul{

position: absolute;

}

.wrap li{

height: 170px;

}

.list{

position: absolute;

right: 10px;

bottom: 10px;

}

.list li{

float: left;

width: 20px;

height: 20px;

background-color: #ccc;

border: 1px solid #666;

margin-left: 5px;

color: #000;

text-align: center;

line-height: 20px;

cursor: pointer;

}

.list li.on{

background-color: #E57000;

color: #fff;

}

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

window.οnlοad=function () {

//获取元素,申明变量

var wrap=document.getElementById('wrap'),

pic=document.getElementById('pic'),

list=document.getElementById('list').getElementsByTagName('li');

var index=0,

that=this,

timer=null;

//绑定

function autoPlay(){

index++;

if (index>=list.length) {

index=0;

}

qiehuan(index);

}

timer=setInterval(autoPlay,2000);

//鼠标滑过整个容器时停止切换(定时器)

wrap.οnmοuseοver=function(){

clearInterval(timer)

}

//鼠标离开时，继续切换

wrap.οnmοuseοut=function(){

timer=setInterval(autoPlay,2000);

}

//遍历所有数字导航，实现滑过切换至对应得图片

for (var j = 0; j < list.length; j++) {

list[j].id=j;

list[j].οnmοuseοver=function(){

qiehuan(this.id);

clearInterval(timer);

}

}

function qiehuan(num){

for (var i = 0; i < list.length; i++) {

list[i].className="";

}

list[num].className="on";

pic.style.top="-"+num*170+"px";

num=index;

}

}

0

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。