Построить скользящие изображения с помощью jQuery

Question

Я хочу создать небольшой слайдер с иконками социальных сетей, div будет содержать 4 значка социальных сетей и на обоих концах стрелка, которая позволяет перемещать значки. Предположим, у нас есть семь значков, как на следующем примере, 4 видны стрелками, а 3 из них скрыты.

<div class="slider" style="width: 228px;">  
    <img src="http://goo.gl/UvyXCP" /> 
    <ul> 
     <li><img src="http://goo.gl/cfUTR2" /></li> 
     <li><img src="http://goo.gl/oRd14R" /></li> 
     <li><img src="http://goo.gl/8vusDB" /></li> 
     <li><img src="http://goo.gl/3Tgn6o" /></li> 
     <li><img src="http://goo.gl/C81toB" /></li> 
     <li><img src="http://goo.gl/BPSKS8" /></li> 
    </ul> 
    <img src="http://goo.gl/fV0g9d" /> 
    </div> 

Мне нужны изображения, скользящие автоматически, и при необходимости использовать стрелки для переключения из одного в другое. Я пробовал пример, вот JSFIDDLE, но, похоже, не работает. Я думаю, что есть более простой способ сделать это.

Буду рад, если кто-то может помочь мне здесь! Большое спасибо!

Answer 1

Я написал скользящую плагин для JQuery, вы могли бы это :)

http://www.rosefalk.dk/library/base/index.html

В отношении к скольжению автомагически вы можете просто добавить событие таймера. Приятная часть моего плагина заключается в том, что вы можете полностью скопировать свой собственный фрейм. Это не волшебно создавать избыточные коробки (Urgh!) :)

Fiddle:. FiddleURL

$("#test").rSlide({}) 

var go = "right"; 
setInterval(function(){ 
    if($("#test").data("slideData").counter == $("#test").data("slideData").childrenLength-1) 
    { 
     go = "left"; 
    } 
    if($("#test").data("slideData").counter == 0) 
    { 
     go = "right"; 
    } 
    $("#test").rSlide({direction:go}); 
},1000); 

Если вы хотите, вы можете заменить $ ("# тест") rSlide ({}) с $ («#test»). rSlide ({trim: true}), он обрезает поле до нужного размера, хотя он может или не может дать результат, который вы ищете.

Также, если вы используете плагин, я советую вам использовать плагин анимации www.greensock.com, он дает гораздо более плавную анимацию, чем если бы вы использовали встроенные возможности анимации jQuery (мой сценарий автоматически определяет, добавлен ли greensock, это не предпосылка).

Добавление $ ("# test"). RSlide ({direction: "right"}); любой элемент, как кнопка, заставит слайдер сдвинуться вправо. Не забывайте, чтобы остановить автоматические раздвижные первый :)

редактирование: удаленный обзор Теперь