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
>