1。HTML结构
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="images/_temp/local/local_js_1.jpg" alt="" width="740" height="350"/></a>
<a href="#"><img src="images/_temp/local/local_js_1.jpg" alt="" width="740" height="350"/></a>
<a href="#"><img src="images/_temp/local/local_js_1.jpg" alt="" width="740" height="350"/></a>
<a href="#"><img src="images/_temp/local/local_js_1.jpg" alt="" width="740" height="350"/></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
2。CSS样式
.main_view {position: relative;}
.window {height: 350px; 740px;overflow: hidden;position: relative;margin-bottom:5px;}
.image_reel {position: absolute;top: 0;left: 0;}
.image_reel img {float: left;}
.paging {position: absolute;top: 310px;left: 0; 740px;height: 40px;z-index: 100;text-align:right;line-height: 40px;background: url(../images/local/slider_pic_nav_bg.png) repeat-x 0 0;display: none;}
.paging a {padding: 5px;text-decoration: none;color: #ffffff;margin-right:10px;}
.paging a.active {font-weight: bold;background: #920000;border: 1px solid #610000;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;}
.paging a:hover {font-weight: bold;}
3。Js代码
<script type="text/javascript">
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({
'width' : imageReelWidth
});
var rotate = function() {
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".image_reel").animate({
left : -image_reelPosition
}, 500);
};
var rotateSwitch = function() {
play = setInterval(function() {
$active = $('.paging a.active').next();
if($active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 3000);
};
rotateSwitch();
$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
return false;
});
});
</script>