Question

只需使用Jquery Cycle插件，我就有一个允许用户在框中滚动列表类别的框。但我似乎找不到允许Jquery Cycle一次显示多个框的方法，允许用户向上或向下滚动以显示更多框。

这是html：

<div id="themeSearch">
    <h1 class="mainSectionHeader">By Theme</h1>
    <div class="scrollUp eventSearchScroll"><a href="#" id="prev6"><img src="<?php bloginfo('template_directory'); ?>/images/scrollUp.png" alt="Scroll Up" /></a></div>
    <div id="themeSelector">
        <div class="themeItem"><p><span>On foot<span></p><a href="#"><span>Go</span></a></div>
        <div class="themeItem"><p><span>Vintage Coach<span></p><a href="#"><span>Go</span></a></div>
        <div class="themeItem"><p><span>Helicopter<span></p><a href="#"><span>Go</span></a></div>
        <div class="themeItem"><p><span>Boat<span></p><a href="#"><span>Go</span></a></div>
    </div>
    <div class="scrollDown eventSearchScroll"><a href="#" id="next6"><img src="<?php bloginfo('template_directory'); ?>/images/scrollDown.png" alt="Scroll Down" /></a></div>
</div>

...... css：

    #themeSearch {
    background: url(../images/bgRed.png) top left repeat;
    width: 275px;
    height:346px;
    padding: 15px;
    float: left;
    margin: 0 20px;
}
#themeSelector {
    height:216px;
}
.themeItem {
    width: 100%;
    height: 35px;
    border: 1px solid #6e060a;
    clear: both;
    margin: 19.5px 0;
}

...和js：

    jQuery(document).ready(function() {
    jQuery('#themeSelector').cycle({ 
    fx:     'scrollUp', 
    timeout: 6000, 
    delay:  -2000 ,
    next:   '#next6', 
    prev:   '#prev6'
});
});

在这种特殊情况下，我希望一次显示4个'themeItems'，允许用户向上和向下滚动以显示更多内容。

由于

Answer 1

jQuery循环一次只能显示一个“幻灯片”，您可以通过将多个内容项（例如三个或四个图像）放入单个幻灯片中来模拟您尝试执行的操作。这样你就可以同时显示3或4个图像，当容器循环时，你将获得3-4张图像的下一张幻灯片。

Answer 2

听起来更像是你需要使用像jCarousel

这样的东西

http://sorgalla.com/projects/jcarousel/

Answer 3

您可能想尝试：

http://www.gmarwaha.com/jquery/jcarousellite/

您可以在其中指定可见性：

visible: 2

显示2张图片

Answer 4

可以做到。 http://jquery.malsup.com/cycle/div.html

循环脚本以导航元素开头，例如：

<div style="margin:auto;text-align:center"><div id="nav"></div></div>

继续使用幻灯片div：

`<div class="slideshow">
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="images/beach4.jpg" width="200" height="200" />
        <img src="images/beach5.jpg" width="200" height="200" />
        <img src="images/beach6.jpg" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach7.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach8.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach9.jpg" width="200" height="200" />
    </div>
</div>`

class ='slide'divs slpit可滚动的内容...

唯一缺少的是适当的css来定义滑动区域和导航链接

`#nav { margin: 20px auto }
#nav a { padding: 4px 6px; margin: 3px; border: 1px solid #ccc; text-align: center; text-decoration: none; background-color: #ddd }
#nav a.activeSlide { color: #c00 }
#nav a:focus { outline: none; }

.slideshow { margin: 20px auto; padding: 0; clear: left; }
.slide { margin: 0; padding: 0 }
.slideshow, .slide { height: 232px; width: 710px; }`

它对我来说就像一个魅力。

Jquery Cycle - 显示多个div

4 个答案: