我只想在无限轮播中一次滚动一个 Logo 。下面是我的代码。任何帮助，将不胜感激。我尝试将 singleWidth 定义为 190px，这是 Logo 的大小。尽管我仍然想念如何在末尾划分负空间以创建循环效果。
<html>
<head>
<style type="text/css" media="screen">
.infiniteCarousel {
position: relative;
width: 1354px;
}
.infiniteCarousel .carousel_wrapper {
width: 1354px;
overflow: auto;
height: 162px;
margin: 0 auto;
top: 0;
}
.infiniteCarousel ._carousel_wrapper ul {
width: 1252px; /* single item * n */
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
top: 0;
}
.infiniteCarousel ul li {
display:block;
float:left;
padding: 10px;
height: 162px;
width: 190px;
}
.infiniteCarousel .arrow {
display: block;
height: 18px;
width: 19px;
background: url(hospitality_img/right_arrow.png) no-repeat 0 0;
text-indent: -999px;
position: absolute;
top: 100px;
cursor: pointer;
outline: 0;
right: 0;
}
.infiniteCarousel .forward {
background-position: 0 0;
right: 0;
}
.infiniteCarousel .back {
display: block;
height: 18px;
width: 19px;
background: url(hospitality_img/left_arrow.png) no-repeat 0 0;
text-indent: -999px;
position: absolute;
top: 100px;
cursor: pointer;
outline: 0;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
(function () {
$.fn.infiniteCarousel = function () {
function repeat(str, n) {
return new Array( n + 1 ).join(str);
}
return this.each(function () {
// magic!
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul').width(9999),
$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);
/* TASKS */
// 1. pad the pages with empty element if required
if ($items.length % visible != 0) {
// pad
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
// 2. create the carousel padding on left and right (cloned)
$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');
// 3. reset scroll
$wrapper.scrollLeft(singleWidth * visible);
// 4. paging function
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({//'margin-left':'-=190px'
scrollLeft : '+=' + left
}, 500, function () {
// if page == last page - then reset position
if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
page = 1;
} else if (page == 0) {
page = pages;
$wrapper.scrollLeft(singleWidth * visible * pages);
}
currentPage = page;
});
}
// 5. insert the back and forward link
$wrapper.after('<a href="infinite-carousel-loop.html#" class="arrow back"></a><a href="infinite-carousel-loop.html#" class="arrow forward"></a>');
// 6. bind the back and forward links
$('a.back', this).click(function () {
gotoPage(currentPage - 1);
return false;
});
$('a.forward', this).click(function () {
gotoPage(currentPage + 1);
return false;
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
$(this).bind('next', function () {
gotoPage(currentPage + 1);
});
});
};
})(jQuery);
$(document).ready(function () {
// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
var autoscrolling = true;
$('.infiniteCarousel').infiniteCarousel().mouseover(function () {
autoscrolling = false;
}).mouseout(function () {
autoscrolling = true;
});
setInterval(function () {
if (autoscrolling) {
$('.infiniteCarousel').trigger('next');
}
}, 2000);
});
</head>
<body>
<div class="infiniteCarousel">
<div class="carousel_wrapper">
<ul>
<li><img src="hospitality_img/hyatt_union.png" alt="Hyatt Union Square New York" /></li>
<li><img src="hospitality_img/the_ritz.png" alt="The Ritz-Carlton Dubai" /></li>
<li><img src="hospitality_img/aman.png" alt="Aman Resorts" /></li>
<li><img src="hospitality_img/caesars.png" alt="Caesars Entertainment" /></li>
<li><img src="hospitality_img/lvmh.png" alt="LVMH Moet Hennessy Louis Vuitton" /></li>
<li><img src="hospitality_img/palms.png" alt="Palms Las Vegas" /></li>
</ul>
</div>
</div>
</body>
</html>
最佳答案
好吧，我花了几个小时研究代码，它似乎是为了同时获取所有图标并在屏幕上运行它们而编写的。我试图修改代码以只抓取一个图标，但这是一个非常丑陋的拼凑。所以我重新编写了代码，您可以在 div 中放置任意数量的图标，更改它在屏幕上花费的时间并随时停止。
这是 FIDDLE .
它可能不适合你，但它很有趣而且我学到了很多东西。
JS
var divwidth = $('.sliderdiv').width();
var firstmove = (divwidth * 0.5);
var firsttime = 600;
var lagtime = 1200;
var secondmove = (divwidth * 0.5)-50;
var secondtime = 600;
var numberimg = $('.holder img').length;
var n = 0;
animate( n );
$('#stopme').click(function(){
$( '.sliderdiv img' ).stop(true);
});
function animate( n )
{
var $moveimage = $('.holder img');
$( $moveimage[n] ).clone().appendTo('.sliderdiv');
var $slideimage = $('.sliderdiv img');
$( $slideimage ).animate(
{ left: '+=' + firstmove }, firsttime,
function() {
$( $slideimage ).animate(
{ left: '+=1' },
lagtime,
function() {
$( $slideimage ).animate(
{ left: '+=' + secondmove },
secondtime,
function() {
$('.sliderdiv').html('');
n = n + 1;
if(n > numberimg - 1){ n = 0; }
animate( n );
}
);}
);}
);
}
关于jquery - 我只想在无限轮播中一次滚动一个 Logo ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23256947/