JS实现的简单的图片轮换

-----------------------------此种做法是根据网上的做法改版---------------

-----------------------效果展示页：http://hangzhou.mainaer.com/shangchengqu/4.htm-------------------

<div
 class
="decbL"
>

              <style
 type
="text/css"
>

                .imgsBox {overflow:hidden;width:330px;position:relative;height:200px;}

                .clickButton  {background-color:#888888;position:absolute;bottom:0;right:0;}

                .clickButton a {background-color:#666;border-left:#ccc 1px solid;line-height:15px;height:15px;font-size:12px;float:left;padding:0 7px;text-decoration:none;color:#fff;}

                .clickButton a.active,.clickButton a:hover{background-color:#d34600;}

            </style
>

<div
 id
="imageSwithContainer" 
class
="imgsBox"
>

  <div
 class
="imgs"
><a
 href
="
#
"
><img
 id
="pic" 
width
="330" 
height
="205"
></a
></div
>

  <div
 class
="clickButton"
>

    <div
 id
="navBarClickBar4DHZ"
></div
>

  </div
>

</div
><script
 language
="JavaScript" 
type
="text/javascript"
>

    $("#imageSwithContainer").ready(function() {

        $.ajax(

                {

                    url:"http://"+location.host+"/Ajax/getProductHotImages.ashx",

                    type: "GET",

                    data: { ProID: 4 },

                    dataType: "json",

                    success: function(retData) {

                            if (retData.result == 0){

                                       $("#imageSwithContainer img[@id='pic']").attr("src","http://www.mainaer.com/uploadfiles/mainaer/nopic.gif");



                                return;

                            }

                            

                            var arryImgs = [];

                            for (var i = 0; i < retData.data.length; i++) {

                                arryImgs.push(retData.data[i].ImageUrl);

                                if (i == 0) {

                                    $("<a></a>").attr({ "href": "", "class": "active" }).html(i + 1).appendTo("#navBarClickBar4DHZ");

                                } else {

                                    $("<a></a>").attr({ "href": "", "class": "" }).html(i + 1).appendTo("#navBarClickBar4DHZ");

                                }

                            }

                            $(".clickButton a").attr("href", "javascript:void();");

                            var CNT = arryImgs.length+1;

                            var times = 1;

                            function changeImage() {

                                if (times == CNT) {

                                    times = 1;

                                }

                                $(".clickButton a").removeClass("active");

                                $(".clickButton a:nth-child(" + times + ")").addClass("active");

                                $(".imgs img").attr("src", arryImgs[times - 1]);

                                times++;

                            }

                            var interval = window.setInterval(function() {

                                changeImage();

                            }, 1500);

                            $(".clickButton a").each(function(index) {

                                $(this).hover(

                                                function() {

                                                    $(".clickButton a").removeClass("active");

                                                    $(this).addClass("active");

                                                    clearInterval(interval);

                                                    $(".imgs img").attr("src", arryImgs[index]);

                                                    times = index + 1;

                                                },

                                                function() {

                                                    interval = window.setInterval(function() {

                                                        changeImage();

                                                    }, 1500);

                                                }

                                             );

                            });

                    

                    

                    }

                });

    });

                        

                    

            </script
>

            </div
>