<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播</title>
<style type="text/css">
ul { padding: 0; margin: 0;}
li { list-style: none;}
img { border: 0;}
.play {
width: 400px;
height: 395px;
}
.big_pic ,.big_pic li ,.big_pic li img {
width: 400px;
height: 320px;
}
.play {
margin: 50px auto 0;
position: relative;
}
.big_pic {
overflow: hidden;
position: relative;
left: 0;top: 0;
}
.big_pic li {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: url(images/loading.gif) no-repeat center center;
}
.mark_left ,.mark_right {
width: 200px;
height: 320px;
filter: alpha(opacity:0);
opacity: 0;
z-index:3000;
position: absolute;
}
.mark_left {
left: 0;
top: 0;
background: red;
}
.mark_right {
left: 200px;
top: 0;
background: green;
}
.big_pic .prev ,.big_pic .next {
width: 60px;
height: 60px;
background: url(images/btn.gif) no-repeat;
position: absolute;
z-index: 3001;
filter:alpha(opacity:0);
opacity:0;
cursor: pointer;
}
.big_pic .prev {
top: 130px;
left: 10px;
}
.big_pic .next {
top: 130px;
right: 10px;
background: url(images/btn.gif) no-repeat 0 -60px;
}
.small_pic {
position: absolute;
bottom:10px;
width: 400px;
height: 50px;
text-align: center;
}
.small_pic a {
display: inline-block;
width: 50px;
height: 3px;
background-color: gray;
}
.small_pic .active {
background-color: red;
}
</style>
</head>
<body>
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div>
<a class="mark_left" href="javascript:;"></a>
<a class="mark_right" href="javascript:;"></a>
<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
<div class="small_pic">
<a href="#" class="active"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</body>
<script>
window.οnlοad=function ()
{
var oDiv=document.getElementById('playimages');
var oBtnPrev=getByClass(oDiv, 'prev')[0];
var oBtnNext=getByClass(oDiv, 'next')[0];
var oMarkLeft=getByClass(oDiv, 'mark_left')[0];
var oMarkRight=getByClass(oDiv, 'mark_right')[0];
var oUlBig=getByClass(oDiv, 'big_pic')[0];
var aLiBig=oUlBig.getElementsByTagName('li');
var oUlSmall = getByClass(oDiv, 'small_pic')[0];
var aLiSmall =oUlSmall.getElementsByTagName('a');
var nowZIndex=2; //記錄大圖的每一個li的顯現層級
var now=0; //記錄是第幾張圖片
//左右按鈕
oBtnPrev.οnmοuseοver=oMarkLeft.οnmοuseοver=function ()
{
oBtnPrev.style.opacity = '100';
};
oBtnPrev.οnmοuseοut=oMarkLeft.οnmοuseοut=function ()
{
oBtnPrev.style.opacity = '0';
};
oBtnNext.οnmοuseοver=oMarkRight.οnmοuseοver=function ()
{
oBtnNext.style.opacity = '100';
};
oBtnNext.οnmοuseοut=oMarkRight.οnmοuseοut=function ()
{
oBtnNext.style.opacity = '0';
};
//小邊欄切換
for(var i = 0;i<aLiSmall.length;i++){
aLiSmall[i].index = i;
aLiSmall[i].onmouseover = function(){
this.className = 'active';
now = this.index;
tab();
}
}
// 按鈕切換
oBtnPrev.οnclick=function ()
{
now--;
if(now==-1)
{
now=aLiBig.length-1;
}
tab();
};
oBtnNext.οnclick=function ()
{
now++;
if(now==aLiBig.length)
{
now=0;
}
tab();
};
// 切換顯示
function tab()
{
//大圖顯示
aLiBig[now].style.zIndex=nowZIndex++;
//小圖顯示
for(var j = 0;j<aLiSmall.length;j++){
aLiSmall[j].className = '';
}
aLiSmall[now].className = 'active';
}
// 自動播放
var timer=setInterval(oBtnNext.onclick, 2000);
oDiv.οnmοuseοver=function ()
{
clearInterval(timer);
};
oDiv.οnmοuseοut=function ()
{
timer=setInterval(oBtnNext.onclick, 2000);
};
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b', 'i');
for(var i=0;i<aEle.length;i++)
{
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
return aResult;
}
};
</script>
</html>
js焦點圖輪播(1)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章