Создание слайдера изображения с использованием только jQuery

Question

Я пытаюсь создать слайдер изображения, используя JQuery.

Что у меня есть главный div с 3 sub divs с изображениями.

Посмотрите на эту скрипку. FIDDLE

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

Это может показаться немного запутанным. Взгляните на эту демонстрацию. Это то, что я хочу.

DEMO

Это то, что я хочу .Отель право ДИВ заполняется с изображением ЦСИ среднего, то среднего ДИВ получает оставил Див SRC. осталось div получить новый src от массив изображений, которые я определил. В настоящее время я могу изменить только один образ div за раз.

Однако я не хочу больше использовать плагины. Только JQuery плагин. A CSS только решение было бы лучшим, но я не думаю, что это будет возможно.

Jquery

$('.maindiv img').mouseover(function() { 
     var image = this; 
     loop = setInterval(function() { 
      if (i < images.length - 1) { 
       i++; 
       $(image).attr('src', images[i]); 
      } else { 
       i = 0; 
       $(image).attr('src', images[i]); 
      } 

     }, 1500); 

EDIT: мне удалось получить одну часть этой работы. CHECK THIS. Просто нужно добавить эффект затухания. Теперь проблема заключается в том, что после того, как изображения в конце массива заканчиваются, первые изображения не контактируют назад ... Не думал об этом раньше. Кто-нибудь знает, как я могу преодолеть эту проблему?

Answer 1

Mabye что-то вроде этого:

jQuery(document).ready(function() { 
    var images = []; 
    var loop; 
    var i = 0; 

    images[0] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1GfA01TRDgrh-c5xWzrwSuiapiZ6b-yzDoS5JpmeVoB0ZCA87"; 
    images[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQSyUWiS4UUhdP1Xz81I_sFG6QNAyxN7KLGLI0-RjroNcZ5-HLiw"; 
    images[2] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_E_OgC6RiyFxKtw03NeWyelfRgJ3Ax3SnZZrufNkUe0nX3pjQ"; 

    $('img', '.maindiv').mouseover(function() { 
     //Get divs inside main div and reverse them, so right is first 
     var divs = $($('div','.maindiv').get().reverse()); 
     //Set up loop 
     loop = setInterval(function(){ 
      divs.each(function(key, div){ 
       if (divs[key+1]) 
       { 
        //All divs gets image src from previous div > img 
        $('img', div).attr('src', $('img', $(divs[key+1])).attr('src')); 
       } 
       else 
       { 
        //This is left div 
        if (images && images[i]) 
        { 
         //If picture url not in array then add it 
         if ($.inArray($('img', div).attr('src'), images) == -1) 
         { 
          images.push($('img', div).attr('src')); 
         } 
         $('img', div).attr('src', images[i]); 
         i++; 
         if (i>= images.length) i = 0; 
        } 
       } 
      }); 
     }, 1500); 
    }).mouseout(function(){ 
     clearInterval(loop); 
    }); 
}); 

Fiddle

Answer 2

может это поможет вам

/Показать пейджинг и активировать свою первую ссылку

$(".paging").show(); 
    $(".paging a:first").addClass("active"); 

    //Get size of the image, how many images there are, then determin the size of the image reel. 
    var imageWidth = $(".window").width(); 
    var imageSum = $(".image_reel img").size(); 
    var imageReelWidth = imageWidth * imageSum; 

    //Adjust the image reel to its new size 
    $(".image_reel").css({'width' : imageReelWidth}); 

/Paging and Slider Function 
rotate = function(){ 
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide 

    $(".paging a").removeClass('active'); //Remove all active class 
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

//Slider Animation 
$(".image_reel").animate({ 
    left: -image_reelPosition 
}, 500); 

};

// Вращение и синхронизация событий

rotateSwitch = function(){ 
     play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds 
      $active = $('.paging a.active').next(); //Move to the next paging 
      if ($active.length === 0) { //If paging reaches the end... 
       $active = $('.paging a:first'); //go back to first 
      } 
      rotate(); //Trigger the paging and slider function 
     }, 7000); //Timer speed in milliseconds (7 seconds) 
    }; 

    rotateSwitch(); //Run function on launch 

// На Hover

$(".image_reel a").hover(function() { 
    clearInterval(play); //Stop the rotation 
}, function() { 
    rotateSwitch(); //Resume rotation timer 
}); 

//On Click 

    $(".paging a").click(function() { 
     $active = $(this); //Activate the clicked paging 
     //Reset Timer 
     clearInterval(play); //Stop the rotation 
     rotate(); //Trigger rotation immediately 
     rotateSwitch(); // Resume rotation timer 
     return false; //Prevent browser jump to link anchor 
    });