点击轮换

script:

$(function () {
var sWidth = $("#smfocus").width();
var len = $("#smfocus ul li").length;
var index = 0;
var picTimer;
var btn = "<div class='btnBg'></div><div class='btn'>";
for (var i = 0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#smfocus").append(btn);
$("#smfocus .btnBg").css("opacity", 0);
$("#smfocus .btn span").css("opacity", 0.4).mouseenter(function () {
index = $("#smfocus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#smfocus .preNext").css("opacity", 0.0).hover(function () {
$(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
}, function () {
$(this).stop(true, false).animate({ "opacity": "0" }, 300);
});
$("#smfocus .pre").click(function () {
index -= 1;
if (index == -1) { index = len - 1; }
showPics(index);
});
$("#smfocus .next").click(function () {
index += 1;
if (index == len) { index = 0; }
showPics(index);
});
$("#smfocus ul").css("width", sWidth * (len));
$("#smfocus").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index++;
if (index == len) { index = 0; }
}, 2800);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index * sWidth;
$("#smfocus ul").stop(true, false).animate({ "left": nowLeft }, 300);
$("#smfocus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);
}
});

css:

#smfocus {overflow: hidden; position: relative;}
#smfocus ul {width: 200px; height: 250px; float: left; position: absolute; clear: both; padding: 0px; margin: 0px; }
#smfocus ul li { float: left;}
#smfocus .preNext {width: 200px; height: 250px; position: absolute; top: 0px; cursor: pointer; }
#smfocus .pre {width: 22px; left: 0;background: url(../images/ljiantou.jpg) no-repeat left center; display: block;}
#smfocus .next {width: 38px; right: 0; background: url(../images/rjiantou.jpg) no-repeat right center; display: block;}

html:

<div class="examplef" id="smfocus">
<ul>
<li>
<a href="#" target="_blank">
<img src="images/zs.jpg" alt="" /></a>
</li>
<li>
<a href="#" target="_blank">
<img src="images/zs.jpg" alt="" /></a>
</li>
<li>
<a href="#" target="_blank">
<img src="images/zs.jpg" alt="" /></a>
</li>
<li>
<a href="#" target="_blank">
<img src="images/zs.jpg" alt="" /></a>
</li>
</ul>
</div>