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

老师实验指导书中给了这样一段代码
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);

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

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

是否正确 ？你没有试吗？

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

参考：

https://www.cnblogs.com/-walker/p/5269068.html

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

可以参考这个，兼容IE8：
http://sc.chinaz.com/jiaobendemo.aspx?downloadid=25201685117243

简单 彻底 swiper
插件