投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 幻灯片轮番图 / jquery+css3带预览图幻灯片轮播切换效果代码
jquery+css3带预览图幻灯片轮播切换效果代码
标签:

插件介绍

    这是一款jquery+css3实现带预览图幻灯片轮播切换,制作图片和文字滑入切换效果代码。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-24
    阅读:

jquery+css3带预览图幻灯片轮播切换效果代码

简要教程

这是一款jquery+css3实现带预览图幻灯片轮播切换,制作图片和文字滑入切换效果代码。

使用方法

在页面引入以下jquery.min.js文件

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var index=0,timer;
      
    $(".ctrl-i").click(function () {
        clearInterval(timer);
        index=$(this).index();
        slide (index);
        timerF();
    })
      
    $(document).ready(function () {
        timerF();
    })
      
    function timerF () {
        timer=setInterval(function(){
            index++;
            if (index>=5) {
                index=0;
            }
            slide(index);
        },3000)
    }
      
    function slide (index) {
        $(".ctrl .ctrl-i").eq(index).addClass("ctrl-i-active").siblings().removeClass("ctrl-i-active");
        $(".main .main-i").eq(index).addClass("main-i-active");
        setTimeout(function(){
            $(".main .main-i").eq(index).siblings().removeClass("main-i-active");
        },500)
    }
      
    //鼠标移到图片上禁止滚动,鼠标移开开始滚动
    $(".main-i").hover(function () {
        clearInterval(timer);
    },function () {
        timerF();
    })
</script>