JQuery Вращающийся баннер Вопрос

Question

Я ищу решение JQuery для чего-то вроде вращающегося баннера, расположенного по адресу http://www.bazaarvoice.com.

Один, где он имеет прокрутку по времени, но также позволяет пользователю переключаться путем перекатывания вкладок. Кто-нибудь знает о хорошем, легком в стиле?

Answer 1

Используйте плагин Cycle Lite для jQuery. Он получил верт небольшой след, и все функции, необходимые:

• АВТОПРОКРУТКА
• Пауза при наведении курсора мыши
• Бесконечный цикл или определенное число петель
• Use thumbshots as pager elements
• You'll have to use divs instead of images.

See more advanced demos right here.

Edit: вот пример кода для вас:
Вам нужен Cycle plugin, не Cycle Lite плагин.
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:

$("#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 
}); 

Наслаждайтесь, это проверялось, но должно работать.

Edit2:
Заменить вариант pagerAnchorBuilder с return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" /></a></li>';

Я предполагаю, что вы хотите изменить ширину и/или высоту. Juste удаляет высоту HTML и использует свойство CSS: .thumb img { height: 10px; width: 10px; } Вы также можете добавить некоторые пользовательские свойства CSS.