<!DOCTYPE html>
轮播学习
<br> /*清除默认样式*/<br> <em>{margin: 0px;padding: 0px;list-style: none;}<br> /</em>设置样式*/<br> .wrap{<br> height: 170px;<br> width: 500px;<br> overflow: hidden;<br> margin: 100px auto;<br> position: relative;<br> }<br> .wrap ul{<br> position: absolute;<br> }<br> .wrap ul li{<br> height: 170px;<br> }<br> .wrap ol{<br> position: absolute;<br> right: 10px;<br> bottom: 10px;<br> }<br> .wrap ol li{<br> float: left;<br> height: 20px;<br> width: 20px;<br> background: rgba(255,193,193,0.5);<br> border: 1px solid #FFC125;<br> border-radius: 2px;<br> margin-left: 10px;<br> line-height: 100%;<br> text-align: center;<br> }<br> .wrap ol li.active{<br> background-color: #330099;<br> color: #fff; <br> border: 2px solid green;<br> }<br>
- 1
- 2
- 3
- 4
- 5
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic'),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
if(timer){
clearInterval(timer);
timer=null;
}
timer=setInterval(autoplay,2000);
// 定义图片切换函数
function autoplay(){
index++;
if(index>=list.length) {
index=0;
}
changeoptions(index);
}
//鼠标移上时，整个容器停止图片自动切换
wrap.onmouseover=function(){
clearInterval(timer);
}
//鼠标离开时，整个容器开始继续图片自动切换
wrap.onmouseout=function(){
timer=setInterval(autoplay,2000);
}
//遍历数字导航，实现划过就切换至相应图片
for (var i=0;i<list.length;i++) {
list[i].id=i;
list[i].onmouseover=function(){
clearInterval(timer);
changeoptions(this.id);
}
}
function changeoptions(curindex){
for(var j=0;j<list.length;j++){
list[j].calssName='';
pic.style.top=0px;
}
list[curindex].calssName='active';
pic.style.top=-curindex*170+'px';
index=curindex;
}
}
</script>
