jQuery純圖片切換帶縮略圖
編輯：JQuery常見問題
查看效果：http:///keleyi/phtml/jqtexiao/27.htm
效果圖：
完整的HTML代碼如下，保存到HTML文件打開也可以查看效果。
<!DOCTYPE html>
<html>
<head>
<title>jQuery純圖片切換帶縮略圖 - </title><base target="_blank" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<style>
.keleyiBanner{width:782px;height:326px;overflow:hidden;margin:0 auto;}
.keleyiBanner{position:relative;}
.keleyiBanner .mask{height:32px;line-height:32px;background-color:#000;width:100%;text-align:right;position:absolute;left:0;bottom:-32px;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;overflow:hidden;}
.keleyiBanner .mask img{vertical-align:middle;margin-right:10px;cursor:pointer;border:0px;}
.keleyiBanner .mask img.show{margin-bottom:3px;border:0px;}
</style>
<script type="text/javascript">
$(function () {
$(".kel"+"eyiBanner").each(function () {
var timer;
$(".kel" + "eyiBanner .mask img").click(function () {
var index = $(".ke" + "leyiBanner .mask img").index($(this));
changeImg(index);
}).eq(0).click();
$(this).find(".mask").animate({
"bottom": "0"
}, 700);
$(".keley" + "iBanner").hover(function () {
clearInterval(timer);
}, function () {
timer = setInterval(function () {
var show = $(".kel" + "eyiBanner .mask img.show").index();
if (show >= $(".keleyiBanner .mask img").length - 1)
show = 0;
else
show++;
changeImg(show);
}, 3000);
});
function changeImg(index) {
$(".keleyiBanner .mask img").removeClass("show").eq(index).addClass("show");
$(".kele" + "yiBanner .bigImg").parents("a").attr("href", $(".keleyiBanner .mask img").eq(index).attr("link"));
$(".keleyiBanner .bigImg").hide().attr("src", $(".kel" + "eyiBanner .mask img").eq(index).attr("uri")).fadeIn("slow");
}
timer = setInterval(function () {
var show = $(".keleyiBanner .mask img.show").index();
if (show >= $(".k" + "eleyiBanner .mask img").length - 1)
show = 0;
else
show++;
changeImg(show);
}, 3000);
});
});
</script>
</head>
<body>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
jQuery純圖片切換帶縮略圖</div>
<div class="keleyiBanner">
<a href="http:///a/bjad/2ndg6y54.htm"><img class="bigImg" width="782" height="326" style="border:0px" /></a>
<div class="mask">
<img src="http:///keleyi/phtml/jqtexiao/27/11.jpg" uri="http:///keleyi/phtml/jqtexiao/27/11.jpg" link="http:///a/bjad/von5fgtg.htm" width="60" height="22"/>
<img src="http:///keleyi/phtml/jqtexiao/27/22.jpg" uri="http:///keleyi/phtml/jqtexiao/27/22.jpg" link="http:///a/bjad/an41m07r.htm" width="60" height="22"/>
<img src="http:///keleyi/phtml/jqtexiao/27/33.jpg" uri="http:///keleyi/phtml/jqtexiao/27/33.jpg" link="http:///a/bjad/yoe3jmfm.htm" width="60" height="22"/>
<img src="http:///keleyi/phtml/jqtexiao/27/44.jpg" uri="http:///keleyi/phtml/jqtexiao/27/44.jpg" link="http:///a/bjac/s3sw6q5t.htm" width="60" height="22"/>
<img src="http:///keleyi/phtml/jqtexiao/27/55.jpg" uri="http:///keleyi/phtml/jqtexiao/27/55.jpg" link="http:///a/bjad/27095rgj.htm" width="60" height="22"/>
</div>
</div>
</div>
</body>
</html>
小編推薦
熱門推薦