-----------------------------此种做法是根据网上的做法改版---------------
-----------------------效果展示页: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
>