Question

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

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

看看这个小提琴。 FIDDLE

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

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

DEMO

这就是我想要的。正确 div填充了中间图片src，中间 div得到左 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);

编辑：我设法让这项工作的一部分。 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

//在悬停

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

仅使用jQuery创建图像滑块

2 个答案: