jQuery圖片輪播

標籤：style   io   ar   color   os   sp   on   div   art   

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>lb</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
body{width: 992px;margin:0 auto;background-color:lavender;}
.lb{width: 500px;height: 200px;overflow: hidden;z-index: 1;}
ol{position:relative;width: 120px;height: 20px;top:-30px;left:400px;margin: 0;padding: 0;z-index:3;}
ol li{float:left;margin:10px;list-style-image: url("imgs/a.jpg");}
ol li.seleted{list-style-image: url("imgs/b.jpg");}
.tm{width: 500px;height: 30px;background-color:#000; position:absolute;top:170px;z-index:2;filter: alpha(opacity=50);-moz-opacity: 0.50;opacity: 0.50;}
.tm .txt{font-family: 微軟雅黑;font-size: 14px;color: antiquewhite;margin-top: 7px;float: left;}
</style>
</head>
<body>
<div class="lb">
<img src="imgs/icon_swhj1.jpg" width="500px" height="200px">
<img src="imgs/icon_swhj3.jpg" width="500px" height="200px">
<img src="imgs/icon_swhj4.jpg" width="500px" height="200px">
<img src="imgs/icon_swhj5.jpg" width="500px" height="200px">
</div>
<ol class="bn">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="tm">
<span class="txt">你好嗎1</span>
<span class="txt">你好嗎2</span>
<span class="txt">你好嗎3</span>
<span class="txt">你好嗎4</span>
</div>
</body>
<script>
$(function(){
var index=0;
var imgs=$(".lb img");//擷取圖片
var txt=$(".tm span");//文字
var sel=$(".bn li");//小圓點
var len=imgs.length;
var timer = null;
//延時切換圖片
function startTime(){
timer = setInterval(function(){
tplb(index);
index++;
if(index==len)
{
index=0;
}
},3000);
}
//停止延時切換
function stopTime(){
if(timer){
clearInterval(timer);
}
}
function tplb(n){
txt.eq(n).fadeIn(10).siblings("span").fadeOut(10);
imgs.eq(n).fadeIn(20).siblings("img").fadeOut(20);
sel.eq(n).css("list-style-image","url(‘imgs/b.jpg‘)").siblings("li").css("list-style-image","url(‘imgs/a.jpg‘)");
}
txt.eq(0).fadeIn(10).siblings("span").fadeOut(10);//初始化
imgs.eq(0).fadeIn(10).siblings("img").fadeOut(10);
sel.eq(0).css("list-style-image","url(‘imgs/b.jpg‘)").siblings("li").css("list-style-image","url(‘imgs/a.jpg‘)");
//滑鼠一上小圓點切換
sel.mouseover(function(){
index=$(this).index("li");
tplb(index);
});
startTime();//初始化
//當滑鼠移動到圖片上是，停止切換
imgs.mouseover(function(){
stopTime();
});
//當滑鼠離開時，開啟切換
imgs.mouseleave(function(){
startTime();
});
});
</script>
</html>

jQuery圖片輪播