我正在使用jquery Tiny Carousel來滑動圖像，但我們的客戶要求在同一方向上連續滾動我搜索了一天，並且找不到確切的東西......在這裏有人遇到它？使用jquery在同一方向連續滾動滑塊
我現在用的這個插件tinycarousel
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#slider").tinycarousel({ axis: 'x', display: 1, interval: true })
});
</script>
，我發現與此循環是不可能有人知道如何循環呢？或點我一個又一個滑塊的jQuery控制....
試試這個
$(function(){
var current = 1;
var totalImages = $("#slider-code li").size();
var oSlider = $('#slider-code').tinycarousel({
animation:false,
controls: false
});
$('#nextButton').click(function(){
current += 1;
if(current > totalImages){
current = 1;
}
oSlider.tinycarousel_move(current);
});
}）;
，這裏是在jsfiddler
演示這是我的編碼在像你這樣的情況下。這個向上滾動，但你可以很容易地修改它以向任何方向滾動。 1
marginLeft下降，從右到左：從marginTop修改改變算法滾動
(function($)
{
var ScrollMe = function(element)
{
var elem = $(element);
var obj = this;
elem.wrapInner("<div class='mbui_scrollable'></div>");
var scr=elem.children("div.mbui_scrollable");
setInterval($(this).scrollUp,130); //CHANGE HERE FOR SPEED
};
$.fn.scrollme = function()
{
return this.each(function()
{
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('scrollme')) return;
// pass options to plugin constructor
var myplugin = new ScrollMe(this);
// Store plugin object in this element's data
element.data('scrollme', myplugin);
});
};
$.fn.scrollUp = function(elem)
{
var allObj=$(".mbui_scrollable");
for(i=0;i<allObj.length;i++)
var s=$(allObj[i]).css('marginTop');
var n=parseInt(s)-1; //CHANGE HERE TO CHANGE DIRECTION AND SPEED
var h=$(allObj[i]).css('height');
if((n*-1)>=parseInt(h))
n=$(allObj[i]).parent().css('height');
$(allObj[i]).css('marginTop',n);
};})(jQuery);
適用於類似的元件：
$(".scroll").scrollme();
對於我的iPhone應用程序的網站（niwuzzles.com）我使用了Alen Grakalic的jQuery插件EasySlider來完成此操作。
項目簡介：
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
連續幻燈片演示：
http://cssglobe.com/lab/easyslider1.7/01.html
代碼示例：
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li><img src="img1.png" /></li>
<li><img src="img2.png" /></li>
<li><img src="img3.png" /></li>
<li><img src="img4.png" /></li>
</ul>
</div>
</body>
我對Tiny Carousel進行了一些更改以添加循環。我剛剛從定時滑動功能中找到了一些東西。
我認爲它必須努力
$('#slider1').tinycarousel({start: 2,
interval: true
});
我jquery.tinycarousel做到這一點
。JS搜索功能初始化（）和替換
iSteps = Math.max(1, Math.ceil(oPages.length/options.display) - iLeftover);
與
iSteps = 9999999999999999999999999;
OR 在jquery.tinycarousel.min.js搜索
u=Math.max(1,Math.ceil(k.length/e.display)-x);
與u = 9999999999999999999999999;
然後
將此代碼放在文檔準備
$('#slider1').tinycarousel({'display':3});
var SliderLength = $('#slider1 .viewport li').length;//set li or img or what ever
var append = $('#slider1 .viewport > ul').html();//grab the curent items
$('.buttons.next').mouseup(function()
{//next button click event
$('#slider1 ul').append(append);//append those item
var sliderWidth = parseInt($('#slider1 .overview').width());
var curLength = parseInt($('#slider1 li').length);
$('#slider1 .overview').width((sliderWidth * (curLength/SliderLength)));//update content width
});
這裏是一個demo using the jQuery.carouFredSel-plugin
HTML
<div id="wrapper">
<div id="carousel">
<div>
<img src="img/fruit1.png" alt="fruit1" width="200" height="200" />
<span>Apple</span>
</div>
<div>
<img src="img/fruit2.png" alt="fruit2" width="200" height="200" />
<span>Mandarin</span>
</div>
<div>
<img src="img/fruit3.png" alt="fruit3" width="200" height="200" />
<span>Banannas</span>
</div>
<div>
<img src="img/fruit4.png" alt="fruit4" width="200" height="200" />
<span>Cherries</span>
</div>
<div>
<img src="img/fruit5.png" alt="fruit5" width="200" height="200" />
<span>Orange</span>
</div>
<div>
<img src="img/fruit6.png" alt="fruit6" width="200" height="200" />
<span>Melon</span>
</div>
<div>
<img src="img/fruit7.png" alt="fruit7" width="200" height="200" />
<span>Lemon</span>
</div>
<div>
<img src="img/fruit8.png" alt="fruit8" width="200" height="200" />
<span>Grapes</span>
</div>
<div>
<img src="img/fruit9.png" alt="fruit9" width="200" height="200" />
<span>Peach</span>
</div>
<div>
<img src="img/fruit10.png" alt="fruit10" width="200" height="200" />
<span>Pear</span>
</div>
<div>
<img src="img/fruit11.png" alt="fruit11" width="200" height="200" />
<span>Strawberry</span>
</div>
<div>
<img src="img/fruit12.png" alt="fruit12" width="200" height="200" />
<span>Melon</span>
</div>
</div>
</div>
的JavaScript
$(function() {
var $c = $('#carousel'),
$w = $(window);
$c.carouFredSel({
align: false,
items: 10,
scroll: {
items: 1,
duration: 2000,
timeoutDuration: 0,
easing: 'linear',
pauseOnHover: 'immediate'
}
});
$w.bind('resize.example', function() {
var nw = $w.width();
if (nw < 990) {
nw = 990;
}
$c.width(nw * 3);
$c.parent().width(nw);
}).trigger('resize.example');
});
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
position: relative;
min-height: 300px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border-top: 1px solid #ccc;
width: 100%;
height: 50%;
margin-top: -1px;
position: absolute;
left: 0;
top: 50%;
}
#carousel {
margin-top: -100px;
}
#carousel div {
text-align: center;
width: 200px;
height: 250px;
float: left;
position: relative;
}
#carousel div img {
border: none;
}
#carousel div span {
display: none;
}
#carousel div:hover span {
background-color: #333;
color: #fff;
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
line-height: 22px;
display: inline-block;
width: 100px;
padding: 2px 0;
margin: 0 0 0 -50px;
position: absolute;
bottom: 30px;
left: 50%;
border-radius: 3px;
}
同一方向意味着，要禁用其他方向的滾動？ – 2012-03-23 05:54:38
是從左到右以恆定速度滾動 – krish 2012-03-23 05:56:12
你的意思是在無限循環中 – 2012-03-23 06:41:41