轮播图片效果
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><link type="text/css" href="css/play.css" rel="Stylesheet" /></head>
<body>
<div id="play">
<div id="play_bg"></div>
<div id="play_info"></div>
<div id="play_text">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="play_list">
<a href="#" target="_blank"><img src="image/B00000040.jpg" title="第一幅图" alt="第一幅图" /></a>
<a href="#" target="_blank"><img src="image/B00000041.jpg" title="第二幅图" alt="第二幅图" /></a>
<a href="#" target="_blank"><img src="image/B00000042.jpg" title="第三幅图" alt="第三幅图" /></a>
<a href="#" target="_blank"><img src="image/B00000045.jpg" title="第四幅图" alt="第四幅图" /></a>
</div>
</div><script type="text/javascript" src="js/play.js"></script>
</body>
</html>
play.css
代码
body{ font-size:12px; font-family:Verdana; margin:0; padding:0}
#play{ width:300px; height:200px; overflow:hidden; position:relative; margin:50px 0 0 50px;}
#play img{ margin:0; border:0; width:300px; height:200px;}
#play_info{ position:absolute; margin-top:172px; padding:8px 0 0 20px; height:20px; width:200px;color:#fff; z-index:1001; cursor:pointer ;}
#play_info b{ font-size:14px; display:block;}
#play_bg{ position:absolute; background-color:#000; margin-top:170px; width:300px; height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}
#play_text {position:absolute;margin:180px 0 0 220px;height:20px;width:80px; z-index:1002}
#play_text ul {list-style-type:none;width:80px;height:20px; margin:0; display:block;padding-left:0; padding-top:1px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;}
#play_text ul li {width:14px;height:14px;float:left;background-color:#000;display:block;color:#FFF; text-align:center; margin:1px;cursor:pointer;font-family:"Courier New";}
#play_list a{display:block;width:300px;height:200px;position:absolute;overflow:hidden}
play.js
代码
var t = 0;
var n = 0;
var count = $("#play_list a").size();
$(function() {
$("#play_list a:not(:first-child)").hide();
$("#play_info").html($("#play_list a:first-child").find("img").attr("alt"));
$("#play_text li:first-child").css({ "background": "#fff", "color": "#000" });
$("#play_info").click(function() { window.open($("#play_list a:first-child").attr("href"), "_blank") });
$("#play_text li").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
$("#play_info").html($("#play_list a").eq(i).find("img").attr("alt"));
$("#play_info").unbind();
$("#play_info").click(function() { window.open($("#play_list a").eq(i).attr("href"), "_blank") });
$("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
$(this).css({ "background": "#fff", 'color': '#000' }).siblings().css({ "background": "#000", 'color': '#fff' });
})
t = setInterval("showAuto()", 2000);
$("#play").hover(function() { clearInterval(t) }, function() { t = setInterval("showAuto()", 2000); });
})
function showAuto() {
n = n >= (count - 1) ? 0 : ++n;
$("#play_text li").eq(n).trigger("click");
}
