$wrapper.scrollLeft(singleWidth * visible); function gotoPage(page,type) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () {
{
width: 100%;
position: relative;
}
.infiniteCarousel1 .wrapper
{
width: 452px; /* .infiniteCarousel1 width - (.wrapper margin-left + .wrapper margin-right) */
overflow: auto;
height: 348px;
margin-left:10px;
position: absolute;
top: 0;
}
.infiniteCarousel1 ul a img
{
border: 5px solid #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.infiniteCarousel1 .wrapper ul
{
width: 452px; /* single item * n */
list-style-image: none;
list-style-position: outside;
position: absolute;
list-style-type: none;
margin-left: -10px;;
padding: 0;
top: 0;
}
.infiniteCarousel1 ul li
{
display:inline;
float: left;
padding: 14px;
height: 370px;
width: 85px;
}
.infiniteCarousel1 ul li img
{
-webkit-transition: border-color 400ms;
}
.infiniteCarousel1 ul:hover li img
{
border-color: #000;
}
.infiniteCarousel1 ul:hover li:hover img
{
border-color: #333;
}
.infiniteCarousel1 ul li a img
{
display: inline;
}
.infiniteCarousel1 .arrow
{
display: inline;
height: 85px;
width: 37px;
background: url(../images/arrow.png) no-repeat 0 0;
text-indent: -999px;
position: absolute;
top: 115px;
cursor: pointer;
outline: none;
}
.infiniteCarousel1 .forward
{
background-position: 0 0;
right: -18px;
}
.infiniteCarousel1 .back
{
background-position: 0 -170px;
left: -15.5px;
}
.infiniteCarousel1 .forward:hover
{
background-position: 0 -85px;
}
.infiniteCarousel1 .back:hover
{
background-position: 0 -255px;
}
</style><script type="text/javascript" language="javascript" defer="defer" >
(function ($) {
$.fn.infiniteCarousel1 = function () {
return this.each(function () {
var $wrapper = $('> div', this), $slider = $wrapper.find("ul").width(5000),
$items = $slider.find("li"),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible); $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find("li");
$wrapper.scrollLeft(singleWidth * visible);
function gotoPage(page,type) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
page = 1;
} else if (page == 0) {
page = pages;
$wrapper.scrollLeft(singleWidth * visible * pages);
}
currentPage = page;
});
}
$('a.back', this).click(function () {
gotoPage(currentPage - 1,1);
return false;
});
$('a.forward', this).click(function () {
gotoPage(currentPage + 1,2);
return false;
});
});
};
}(jQuery));
$(document).ready(function () {
$('.infiniteCarousel1').infiniteCarousel1();
});
<div class="infiniteCarousel1" >
<a href="javascript:void(0)" class="arrow back" hidefoucs="true"><</a><a href="javascript:void(0)" hidefoucs="true" class="arrow forward">></a>
<div class="wrapper" style="overflow:hidden;">
<ul><li>一图片</li><li>2图片</li><li>3图片</li><li>4图片</li></ul> </div>
</div>
一个数组装图片url var imgs=[]; var index=0;
一个setTimeout 每次 index++;
if(index==imgs.length)index=0;这样就可以一直轮换 了