一个实用的图片切换支持点击切换和自动轮播

前端之家收集整理的这篇文章主要介绍了一个实用的图片切换支持点击切换和自动轮播前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

不经意间看到了以前写的这个小东西,就贴上来了,支持点击切换和自动轮播,供前端新手看看吧!

代码如下:

    • 项目一
    • 项目二
    • 项目三
    • 项目四
    • 项目五

    html

    此处只需将图片路径改成你本地的即可。

    li {list-style:none;}

    css

    图片轮播*/ $(".btn li:last").css({"margin":"0px 0px 0px 0px"}); $(".btn li:first").addClass("on"); $(".pic li:first").show();

    $(".btn li").each(function(index,element){
    $(element).click(function(){
    i = index;
    $(this).addClass("on").siblings().removeClass("on");
    $(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
    })
    $(element).hover(function(){
    clearInterval(setInter);
    },function(){
    outPlay();
    });
    })

    out_fun = function(){
    if(i < listLen){i++;}else{i=0;};
    $(".btn li").eq(i).addClass("on").siblings().removeClass("on");
    $(".pic li").eq(i).animate({opacity:"show"},300);
    }

    outPlay = function(){
    setInter = setInterval("out_fun()",speen);
    }
    outPlay();
    })

    猜你在找的JavaScript相关文章