-2

我正在尝试使用Jquery创建图像滑块。

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

看看这个小提琴。小提琴

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

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

演示

这就是我想要的。右边的div 被中间的图像 src填充，中间的div 得到左边的div src。左边的div从我定义的图像数组中获取一个新的src 。目前我一次只能更改一个图像 div。

但是我不想再使用插件了。只有Jquery插件。仅CSS的解决方案将是最好的，但我认为这不可能。

查询

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

编辑：我设法让这项工作的一部分。检查这个。只需要添加淡入淡出效果现在的问题是在数组中的图像结束后第一个图像不循环回来......之前没有想到这个。有人知道我该如何解决这个问题吗？

4

1 回答 1

2

可能是这样的：

 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);
    });
});

小提琴

于 2013-07-30T12:53:17.417 回答