仅使用jQuery创建图像滑块 [英] Creating Image slider using only jQuery

问题描述

我试图用 Jquery 创建图片滑块。我有一个主要的与3个子div与图像的div。

看看这个小提琴。 FIDDLE

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

这看起来有点令人困惑。看看这个演示。 这就是我想要的。

DEMO

这就是我想要的。正确 div会被 middle image src， middle div获取 left div src。 左 div从我定义的图像的数组中获取 new src。目前我一次只能更改一个图像div。

但是我不想再使用插件了。只有 Jquery 插件。一个 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）; 
  

编辑：我设法获得了这项工作的一部分。检查这个。需要添加淡入淡出效果现在问题是在阵列中的图像结束后，第一张图像不会循环回来。 ..之前没有想过这个。有人知道我怎么能克服这个问题吗？

解决方案

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; 
 $ b $（'img'，'.maindiv'）。mouseover（function（）{
 //获取主div内的div并反转它们，所以右边是第一个
 var divs = $（$（'div'，'。maindiv'）。get（）。reverse（））; 
 //设置循环
 loop = setInterval（function（）{
 divs.each（function（key，div）{
 if（divs [key + 1]）$ ​​b $ b {
 //所有div从前一个div获取图像src> img 
 $（'img'，div）.attr（'src'，$（'img'，$（divs [key + 1]））。attr（'src'））; 
} 
 else 
 {
 //这是左div div $ b $ if if（images&& images [i]）
 {
 //如果图片url不在数组中，然后添加它是
 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）; 
}）; 
}）; 
  

小提琴

I'm trying to create an image slider using Jquery.

What I have is a main div with 3 sub divs with images.

Take a look at this fiddle. FIDDLE

Ok now i got the design just the way I want it. What is missing is the functionality. When i hover over the div or the images, I want it to act like a clockwise slider.

This may look a bit confusing. Take a look at this demo. This is what i want.

DEMO

This is what i want.The right div gets filled with the middle image src , the middle div gets the left div src. The left div get an new src from an array of images i have defined. Currently i can only change one image div at a time.

However I don't want to use any more plugins. Only Jquery plugin. A CSS only solution would be the best but I do not think it will be possible.

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: I managed to get one part of this working. CHECK THIS.Just need to add fade effect Now the problem is after the images in the array end the first images dont loop back... Had not thought of this before.Does Anybody know how i can get over this issue?

解决方案

Mabye something like this:

 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

这篇关于仅使用jQuery创建图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！