怎样用jquery做图片轮播？我没基础请高人指点要详细最好有代码演示，就做下面的效果，并且可链接网址

如题所述

这种简单的幻灯片是使用索引匹配的。一个思路如下：

写一个函数，这个函数可以实现图片的切换；

function flipSlide(int){
    //横向滑动
    $('#slideContent .sc_wrap:first').animate({'left' : '-'+ int*960 +'px'});
    
    //纵向滑动
    $('#slideContent .sc_wrap:first').animate({'top' : '-'+ int*200 +'px'});

 }

然后，大致有3种切换方法，分别是：左右控制（上一个下一个），指示控制（1，2，3，4）和自动播放；

左右控制比较简单，点击按钮+1-1即可。

var startInt = 0;//默认显示第一个

//上翻
$('#prev').click(function(){
    //上一个，就是当前元素的上一个元素,要做判断的不会有-1的索引。
    startInt = startInt-1;
    
    //调用切换函数
    flipSlide(startInt );
})

指示控制更简单，直接适应其index索引即可。

$('#slideNav ul li').click(function(){

    //获取当前的索引
    var thisId = $(this).index();
    
    //执行播放函数
    flipSlide(thisId );
})

自动播放需要写一个自动播放函数，然后调用，比如：

function autoPlay(){
    if(startInt >= 幻灯片个数){
        startInt = 0;
    }else{
        startInt = startInt + 1;
    }
    
    //执行播放函数
    flipSlide(thisId );
}

//定时播放,3秒切换
setInterval(autoPlay,3000);

这样，一个简单的幻灯片就写好了。

如果你希望它更智能，那么你就需要多下点功夫了。其实，道理都是一样的，只不过做成什么样的效果更好看而已。这个效果和滑动门tab是一样的原理。

追问

很感谢！再问一下，图片轮播上的12345的位置怎么确定，就是在右下角，或左上角？

追答

位置自然是css来控制。

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/27f7qfvss.html