仅使用jQuery创建图像滑块

-2

我试图创建一个图像滑块使用jquery。仅使用jQuery创建图像滑块

我所拥有的是一个带有3个子div与图像的主div。

看看这个小提琴。 FIDDLE

好吧，现在我按照我想要的方式得到了设计。缺少的是功能。当我将鼠标悬停在div或图像上时，我希望它像顺时针滑块一样。

这看起来有点混乱。看看这个演示。 这就是我想要的。

这就是我想要 .The 权格被充满中间图片src中，中间 DIV得到左 DIV SRC。 left 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);

编辑：我设法得到这个工作的一个组成部分。 CHECK THIS.Just需要添加淡入淡出效果现在的问题是在数组中的图像结束第一个图像不循环回...以前没有想过这样做任何人都知道我能如何克服这个问题？

来源

2013-07-30 AnaMaria

如果有已经为你（HTTP工作的脚本：// tympanus。net/Tutorials/RotatingImageSlider /），你为什么试图重新发明轮子？为什么不只是看看那里的JavaScript呢？我并不是说“偷”，而是看看他们是如何做到的，或者接近他们的 - 也许他们想让你的剧本或者剧本的权利落空。 – WTK

@WTK让我们说，我需要一套新的车轮。 – AnaMaria

长时间重建但可能。需要玩每张幻灯片的图像的角度.. – designtocode

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

来源

2013-07-30 12:53:17 Aivar

只能工作一次。它必须在鼠标悬停时保持滑动。 – AnaMaria

检查我的编辑。我设法让滑块工作。但是我的前三张图片正在被破坏。我需要保存它们并返回到循环 – AnaMaria

@AnaMaria，Hei我对代码做了一些修改，所以现在它在循环中，并且还检查最后一个图像src是否在图像数组中，如果不是，那么它将被添加到数组结束。实际上，您可以将它们添加到文档就绪函数的数组中，这样您就不需要在每个循环中检查数组。 Allso增加了mouseout功能来停止循环。其实它并不是最初的完整代码。 – Aivar

可能，这将帮助你

/显示分页和激活其第一链接

$(".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

//悬停

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

来源

2013-07-30 13:13:34 krishna

仅使用jQuery创建图像滑块

回答

相关问题