一段关于轮播的jquery代码有些问题 10C

老师实验指导书中给了这样一段代码
html:



实验2

.slider { list-style: hidden; } .slider ul { list-style: none; margin: 0; padding: 0; } .slider ul li { margin: 0; padding: 0; display: block; list-style: none; } .slideitem { position: relative; } .tag { position: relative; }

$(".slider").slider();
js:
$.fn.slider = function () {
$(this).addClass('slider');

var id = $(this).attr('id');

var lis = $('.slider ul li');
var len = lis.length;
var w = $('.slider').width();
var h = $('.slider').height();
$(lis).addClass('slideitem').each( function (i) {
    $(this).css({left: !i ? 0 : w, top: -i * h, 'z-index':i});
    $(this).append("<div class='tag'>" + $(this).data('title') + "</div>");
});

var q = [];
var i;
for (i = 2; i <= len; ++i) 
    q.push(i);
q.push(1);

$('#li1').addClass('cur');
setInterval(function(){
    var cur = q.shift();
    var zz = len;
    for (x in q)
    {
        var liid = '#li' + q[x];
        $(liid).css({'z-index': zz--});
    }
    q.push(cur);

    var liid = '#li' + cur;
    $('.cur').animate({left: -w}, 500);
    $(liid).animate({left: 0}, 500, function () {
        $('.cur').removeClass('cur').css({left: w, 'z-index': 0});
        $(this).addClass('cur');
    })
}, 2000);

}
运行之后只能看见一张图片在轮播,求教

7个回答

运行之后只能看见一张图片在轮播是否正确

是否正确 ?你没有试吗?

我建议你先把HTML 输出到控制台 看看你的图片链接是不是确定有多个
先确定是否有多张图片 再确定动画的问题

直接用unslider
http://www.bootcss.com/p/unslider/
这里有例子,只要把你的1.jpg 2.jpg 3.jpg放进去就可以。

简单 彻底 swiper
插件

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!