经常用的Jquery图片轮转

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>