JQuery旋转横幅问题 [英] JQuery Rotating Banner Question

问题描述

我在寻找一个JQuery解决方案，例如旋转横幅，位于 http://www.bazaarvoice.com 。

I am looking for a JQuery solution to something like the rotating banner located at http://www.bazaarvoice.com.

其中有一个定时滚动，但也允许用户通过翻转选项卡切换。

One where it has a timed scroll but also allows the user to toggle by rolling over tabs. Anyone know of a good, easy to style one?

推荐答案

使用 Cycle Lite 插件jQuery。
它有一个垂直的小足迹和所有你需要的功能：

Use the Cycle Lite plugin for jQuery. It's got a vert small footprint and all the features you need:

• 自动滚动


• 暂停悬停


• 无限循环或定义的循环次数


• 使用thumbshots作为传呼机元素


• 您必须使用div而不是图片。

• Auto scroll
• Pause on hover
• Infinite loop or defined number of loops
• Use thumbshots as pager elements
• You'll have to use divs instead of images.

在此查看更多高级演示。

编辑：以下是您的示例代码：

您需要循环插件，而不是Cycle Lite插件。

HTML：

here's a sample code for you:
You'll need the Cycle plugin, not the Cycle Lite plugin.
HTML:

<div id="slideshow">
    <ul class="pager">
        <!-- will be populated with thumbs by JS -->
    </ul>
    <!-- each div is considered as a slide show -->
    <div><img src="/images/banner1.png" />You can place text here too !</div>
    <div><img src="/images/banner2.png" /></div>
    <div><img src="/images/banner3.png" /></div>
</div>

CSS：

.thumb.selected {
    border: 2px gray solid;
}

ul.pager li {
    list-style: none;
    float: left;
    width: 200px;
    height: 80px;
    background-color: #eee;
}

#slideshow > div {
    background-color: #eee;
    border: 1px solid #ddd;
}

Javascript：

Javascript:

$("#slideshow").cycle({ 
    fx:           'fade',  // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle) 
    timeout:       1000,   // milliseconds between slide transitions (0 to disable auto advance) 
    speed:         400,    // speed of the transition (any valid fx speed value) 
    pager:         "#tabs",// selector for element to use as pager container 
    pagerClick:    null,  // callback fn for pager clicks:  function(zeroBasedSlideIndex, slideElement) 
    pagerEvent:   'hover',// name of event which drives the pager navigation 
    pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links:  function(index, DOMelement) 
        return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
    },
    before: function(){ // deselect all slides
        $(".thumb").removeClass('selected');
    },
    after: function(foo, bar, opts){ // select current slide
        $("#thumb-"+opts.currSlide).addClass('selected');
    }, 
    fit:           1,     // force slides to fit container 
    pause:         1,     // true to enable "pause on hover" 
    pauseOnPagerHover: 1, // stop slideshow when pagers are being hovered
    autostop:      0,     // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 0,     // number of transitions (optionally used with autostop to define X)  
    slideExpr:     "div", // all content of div#slider is a slide. but not the pager
    fastOnEvent:   100,   // force fast transitions when triggered manually (via pager or prev/next); value == time in ms 
});

享受未经测试，但应该有效。

Enjoy, it's untested, but should work.

Edit2：

将 return'< li class =thumbid =thumb-1>< ; img src ='+ slide.src +'/>< / a>< / li>';

我想你想改变宽度和/或高度。 Juste删除HTML高度，并使用CSS属性： .thumb img {height：10px; width：10px; }
您还可以添加一些自定义CSS属性。

I guess you want to change the width and/or the height. Juste remove the HTML height, and use a CSS property : .thumb img { height: 10px; width: 10px; } You can also add some custom CSS properties.

这篇关于JQuery旋转横幅问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！