我知道那里有可用的插件,但我正在尝试自己制作一个,但在此之前,我试图理解将其制作成无限/圆形轮播的概念。这是我的 jsfiddle so far.. http://jsfiddle.net/hbk35/KPKyz/3/
HTML:
<div id="carousel_wrapper">
<ul>
<li>
<div>0</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>2</div>
</li>
<li>
<div>3</div>
</li>
<li>
<div>4</div>
</li>
<li>
<div>5</div>
</li>
<li>
<div>6</div>
</li>
<li>
<div>7</div>
</li>
</ul>
</div>
<br>
<div id="buttons">
<button id="left">left</button>
<button id="right">right</button>
</div>
JS:
var container = $("#carousel_wrapper");
var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;
runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);
$('#right').on('click',function(){
runner.animate({scrollLeft: -liWidth},1000);
});
$('#left').on('click',function(){
runner.animate({scrollLeft: liWidth},1000);
});
CSS:
div#carousel_wrapper{
overflow:hidden;
position:relative;
}
ul {
padding:0px;
margin:0px;
}
ul li {
list-style:none;
float:left;
}
ul li div {
border:1px solid white;
width:50px;
height:50px;
background-color:gray;
}
我不想使用克隆和分离方法。还有其他方法吗? 请任何人愿意指导我在哪里犯错。我也是 stack overflow 和 javascript/jquery 的新手..试图自己学习。请原谅我,因为我一直在尝试将我的代码放在问题上,所以无法像其他人一样整洁和分开。
谢谢!!
最佳答案
给你一个无限。肯定可以用更少的代码来完成。 http://jsfiddle.net/artuc/rGLsG/3/
HTML:
<a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>
<div class="carousel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</div>
CSS:
.carousel{
padding-top: 20px;
width: 357px;
overflow: hidden;
height: 50px;
position: relative;
}.carousel ul{
position: relative;
list-style: none;
list-style-type: none;
margin: 0;
height: 50px;
padding: 0;
}.carousel ul li{
position: absolute;
height: 25px;
width: 50px;
float: left;
margin-right: 1px;
background: #f2f2f2;
text-align: center;
padding-top: 25px;
}
JS:
$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;
itemWidth = carousel.find('li:first').width()+1; //Including margin
//Set Carousel width so it won't wrap
carousel.width(itemWidth*carouselChild.length);
//Place the child elements to their original locations.
refreshChildPosition();
//Set the event handlers for buttons.
$('.btnNext').click(function(){
if(canClick){
canClick = false;
clickCount++;
//Animate the slider to left as item width
carousel.stop(false, true).animate({
left : '-='+itemWidth
},300, function(){
//Find the first item and append it as the last item.
lastItem = carousel.find('li:first');
lastItem.remove().appendTo(carousel);
lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
canClick = true;
});
}
});
$('.btnPrevious').click(function(){
if(canClick){
canClick = false;
clickCount--;
//Find the first item and append it as the last item.
lastItem = carousel.find('li:last');
lastItem.remove().prependTo(carousel);
lastItem.css('left', itemWidth*clickCount);
//Animate the slider to right as item width
carousel.finish(true).animate({
left: '+='+itemWidth
},300, function(){
canClick = true;
});
}
});
function refreshChildPosition(){
carouselChild.each(function(){
$(this).css('left', itemWidth*carouselChild.index($(this)));
});
}
});
关于javascript - 使用 jQuery 的轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22078356/