jquery 实现无缝循环广告

 

html

<div class="danymic-ads flow-radius"><!-- danymic ads-->
<div class="scroll">
<div class="items">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
<div class="clear"></div>
</div>
</div><!-- danymic ads-->

css 

/* danymic ads css*/

.danymic-ads {
padding: 15px;
height: 400px;
margin-bottom: 15px;
}

.scroll {
width: 630px;
overflow: hidden;
height: 100%;
position: relative;
}

.items {
clear: both;
width: 20000em;
position: absolute;
}

.item {
float: left;
width: 630px;
height: 350px;
overflow: hidden;
border-radius: 10px;
background-repeat: no-repeat;
margin: 0;
}

.scroll .preNext {
width: 32px;
height: 32px;
position: absolute;
top: 175px;
cursor: pointer;
}

.scroll .pre{
left: 0;
border-radius: 0 5px 5px 0;
background: url(../images/scroll_left.png) no-repeat center center #EEF1F3;
}

.scroll .next {
right: 0;
border-radius: 5px 0 0 5px;
background: url(../images/scroll_right.png) no-repeat center center #EEF1F3;
}

.item1 {
background-image: url(../images/ads/1.jpg);
}

.item2 {
background-image: url(../images/ads/2.jpg);
}

.item3 {
background-image: url(../images/ads/3.jpg);
}

.item4 {
background-image: url(../images/ads/4.jpg);
}

.item5 {
background-image: url(../images/ads/5.jpg);
}

js

function scrollAdsPhotos() {
var sWidth = $(".scroll").width();//get show image width
var len = $(".scroll .items div").length;//get image num
var index = 0;
var picTimer;

//add num btn, and pre page next page
var btn = "";
btn += "<div class='preNext pre'></div><div class='preNext next'></div>";
$(".scroll").append(btn);
$(".scroll .btnBg").css("opacity", 0.5);

//add envent to pre and next btn stop animate queue
$(".scroll .preNext").css("opacity", 0.2).hover(function() {
$(".preNext").stop(true, false).animate({"opacity": "1"}, 200);
}, function() {
$(".preNext").stop(true, false).animate({"opacity": "0.25"}, 200);
});

// add click to pre
$(".scroll .pre").click(function() {
index -= 1;
if (index <= -1) {
index = 0;
var last = $(".items").find("div").last();
$(".items").prepend(last);
$(".items").css("left", "-" + sWidth.toString() + "px");
}
showPics(index);
});

// add click to next
$(".scroll .next").click(function() {
index += 1;
if(index == len) {
index = len-1;
var first = $(".items").find("div").first();
$(".items").append(first);
pos = (len-2) * sWidth;
$(".items").css("left", "-" + pos.toString() + "px");
}
showPics(index);
});

//set pic width
$(".scroll .items").css("width", sWidth * (len));

//set auto show
$(".items").hover(function() {
clearInterval(picTimer);
}, function() {
picTimer = setInterval(function() {
//showPics(index);
// index++;
//if(index == len) { index = 0;}
$(".next").trigger("click");
}, 3000);
}).trigger("mouseleave");

//show pic
function showPics(index) {
var nowLeft = -index*sWidth;
$(".scroll .items").stop(true, false).animate({"left": nowLeft}, 300);
}

}

转载于:https://www.cnblogs.com/xuedong09/archive/2013/06/04/3116925.html