仿淘宝轮播图片
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> //引用jquery类库
<style type="text/css"> //自定义页面样式
img{ border:0px;}
*{ margin:0px; padding:0px}
ul,li{ list-style-type:none}
#container{ width:520px; height:280px; margin:0px auto;}
#focus{ width:520px; height:280px; position:relative; overflow:hidden}
#focus ul{ height:280px; position:absolute}
#focus ul li{ float:left}
#focus .icon{ width:520px; height:20px; position:absolute; left:0px; top:260px; text-align:center;
padding:2px 0px}
#focus span{ display:inline-block; width:25px; height:12px; cursor:pointer; background:orange; margin-left:5px}
#focus .prenext{ width:180px; height:280px; position:absolute; cursor:pointer; top:0px}
#focus .pre{ left:0px; background:url("images/pre.png") no-repeat left:center}
#focus .next{ right:0px; background:url("images/next.png") no-repeat right:center}
#focus span.on{ background:blue}
</style>
<script type="text/javascript">
$(function() {
var adv_count = $("#focus ul li").length;
var fwidth = $("#focus").width();
var index = 0;
var picTimer;
var btn = "<div class='icon'>";
for (var i = 0; i < adv_count; i++) {
btn += "<span></span>";
}
btn += "</div><div class='prenext pre'></div><div class='prenext next'></div>";
$("#focus").append(btn);
//$("#focus .icon span").css("width",fwidth*adv_count)
$("#focus .icon span").css("opacity", 0.6).mouseover(function() {
index = $("#focus .icon span").index(this);
showPics(index);
//alert(index);
}).eq(0).trigger("mouseover");
function showPics(index) {
var nowleft = -index * fwidth;
$("#focus ul").stop(true, false).animate({ "left": nowleft }, 300)
$("#focus .icon span").removeClass("on").eq(index).addClass("on");
$("#focus .icon span").animate({ "opacity": "0.6" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);
}
$("#focus .prenext").css("opacity", "0").hover(function() {
$(this).stop(true, false).animate({ "opacity": 0.6 }, 300);
}, function() {
$(this).stop(true, false).animate({ "opacity": 0 }, 300);
});
$("#focus .pre").click(function() {
index--;
if (index == -1) {
index = adv_count - 1;
}
showPics(index);
})
$("#focus .next").click(function() {
index++;
if (index == adv_count) {
index = 0; }
showPics(index);
})
$("#focus").hover(function() {
clearInterval(picTimer);
}, function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if (index == adv_count) {
index = 0;
} }, 3000) }).trigger("mouseleave"); });
</script>
<div id="container">
<div id="focus">
<ul>
<li><a href="#">
<img src="../images/TB16KDvGVXXXXXqapXXvKyzTVXX-520-280.jpg" /></a></li>
<li><a href="#">
<img src="../images/TB1FWgiGVXXXXagXFXXSutbFXXX.jpg" /></a></li>
<li><a href="#">
<img src="../images/TB1imYSGFXXXXcYapXXvKyzTVXX-520-280.jpg" /></a></li>
<li><a href="#">
<img src="../images/TB1j9dAHXXXXXcDXXXXSutbFXXX.jpg" /></a></li>
<li><a href="#">
<img src="../images/TB1LZEPGVXXXXXzXpXXSutbFXXX.jpg" /></a></li>
</ul>
</div>
</div>
