首页 > js横向轮播图问题求助

js横向轮播图问题求助

这不是我想要的 我想要的是 前面的都跑到最后一张图片的后面来 我不知道怎么去判断是不是最后一个图片 我只给右边的 下一个按钮加了一个事件 但是没有思路 求给个思路。

$(function() {
        var next = $('#next'),
            back = $('#back'),
            ul = $('.wrap ul'),
            imgW = $('img:first').width(),
            imgs = $('img');
            // imgs.each(function(i) {
            //     this.index = i;
            // })
            next.bind('click',function() {
                var ulLeft = parseInt(ul.css('left'));
                ul.css({
                    'left' : -(imgW + -ulLeft) + 'px'
                })
            })

    })

加一个if判断 如果滚到最后一张了 就跳到第一张


循环遍历所有图片,如果循环到最后一个图片,重新开始循环~~~


对象完全在框外面后,remove该dom对象,再重新append回去,


给你的每个图片加一个 data-index 属性表示它是第几张图片[0,1,2,3...]表示,maxCount表示共有多少图片
然后Js获取当前为第几张图片,假如是第五张current=4:

var current = parseInt($Pic.attr('data-index'));
if((current + 1) >= maxCount) {
            nextIndex = 0;
        } else {
            nextIndex = current + 1;
        }

比如你有 [1,2,3,4] 四张图

然后在你切换显示的时候,比如第一张图已经看不见了,然后这时候你就可以把页面改成这样 [2,3,4,1]

这样在你翻到4的时候,就能看到他后面跟着的是1

反正大概的思路就是,你向后翻,就把前面的元素移动到后面去。向前翻,就把后面的元素放到前面。

【热门文章】
【热门文章】