使用jQuery的旋转木马 [英] carousel using jQuery
本文介绍了使用jQuery的旋转木马的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道有插件可用，但我想做一个自己，但在此之前，我想了解的概念，使其作为一个无限/循环的旋转木马。这是我的 jsfiddle到目前为止.. http://jsfiddle.net/hbk35/KPKyz/3/
HTML： / p>
< 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>左< / button>
< button id =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：
code> 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;
}
我不想使用clone和detach方法。有没有其他方法来做到这一点？
任何人都想指导我在哪里我犯错误。我是新手来堆栈溢出和javascript / jquery也...要学习我自己。原谅我我试着把我的代码放在这个问题上，不能像其他人一样整洁和分离。
谢谢！
解决方案
这里你无限。可以用更少的代码来确保。
http://jsfiddle.net/artuc/rGLsG/3/ p>
HTML：
< a href =javascript：void（0）; class =btnPrevious>上一页< / a>
< a href =javascript：void（0）; class =btnNext>下一页< / 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： b
$（function（）{
var carousel = $（'carousel ul'）;
var carouselChild = carousel.find 'li'）;
var clickCount = 0;
var canClick = true;
itemWidth = carousel.find（'li：first'）。 // Including margin
//设置轮播宽度，使其不会换行
carousel.width（itemWidth * carouselChild.length）;
//将
refreshChildPosition（）;
//为按钮设置事件处理程序
$（'。btnNext'）。click（function
if（canClick）{
canClick = false;
clickCount ++;
//将滑块左移为项宽度
carousel.stop ，true）.animate（{
left：' - ='+ itemWidth
}，300，function（）{
//查找第一个项目并将其追加为最后一个项目。
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--;
//找到第一个项目并将其追加为最后一个项目
lastItem = carousel.find（'li：last'）;
lastItem.remove（）。prependTo（carousel）;
lastItem.css（'left'，itemWidth * clickCount）;
//将滑块右移为项宽度
carousel.finish（true）.animate（{
left：'+ ='+ itemWidth
}，300，function（）{
canClick = true;
}）;
}
}
function refreshChildPosition（）{
carouselChild.each（function（）{
$（this）.css（'left'，itemWidth * carouselChild.index ））;
}）;
}
}）;
I know there are plugins available out there, but I'm trying to make one of myself but before that I'm trying to understand the concept of making it as an infinite/circular carousel. Here is my 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;
}
I do not want to use clone and detach method. Is there any other way to do that? Please anyone would like to guide me where I'm making mistake. I'm newbie to stack overflow and javascript/jquery also..trying to learn on my own. Forgive me I'm trying since to put my code onto the question, couldn't get neat and separate like others.
Thanks!!
解决方案
Here you go an infinite. Could be done with less code for sure. 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)));
});
}
});
这篇关于使用jQuery的旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
