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

js图片轮播

2015-07-16 14:54 627 查看
<style>
*{ margin:0px; padding:0px;}
li { list-style: none; }
.play{ position:relative; width:700px; height:300px;overflow:hidden;margin: 50px auto;}
ul{ position:absolute; z-index:1; top:0px; left:0px;}
ul li{ float:left;width:700px; height:300px;}
ul li img{width:700px; height:300px;}

ol{ position:absolute; bottom:10px; z-index:999999;}
ol li{ float:left; margin-right: 10px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px;}
.active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }
</style>
<script>
window.onload=function(){
var oUl=document.getElementsByTagName('ul')[0];//【0】页面中第一个UL
var Ol=document.getElementsByTagName('ol')[0];
var oLi=Ol.getElementsByTagName('li');
var num=0;
setInterval(next,2000); //setInterval 自动运行函数
function tab(){
if(num>2){num=0}
for(var j=0;j<oLi.length;j++){
oLi[j].className=""; //所有li清除样式
};
oLi[num].className="active"; //目标图片添加样式
oUl.style.top=-300*num+'px'; //第一张图片是0 px 第二章是 -300 第3张是 -600
}
function next(){
num++;
tab();
}
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onclick=function(){ //通过点击按钮修改num的值
num=this.index;
tab();
}
};
next() //页面加载完毕，马上执行一次轮播。seInterval 会延时2s才执行。
}
</script>
</head>
<body>
<div class="play">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li><img src="../Pictures/500701.jpg" /></li>
<li><img src="../Pictures/545619.jpg" /></li>
<li><img src="../Pictures/877360.jpg" /></li>
</ul>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航