js圖片輪播

時間 2019-11-12

標籤圖片欄目 JavaScript 简体版

原文原文鏈接

<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>函數

相關文章

相關標籤/搜索

圖片輪播圖控件

輪播圖特效

自定義輪播圖

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<