jquery图片轮播代码

Posted 2020-07-30 进击的前端狗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery图片轮播代码相关的知识，希望对你有一定的参考价值。

自己写的轮播代码

来张样式效果图

先贴html样式

<body>
    <div id = "wrap">
        <div id="lunbo-img">
            <img src="images/lunbo01.jpg" alt="" width="500" height="750">
            <img src="images/lunbo02.jpg" alt="" width="500" height="750">
            <img src="images/lunbo03.jpg" alt="" width="500" height="750">
            <img src="images/lunbo04.jpg" alt="" width="500" height="750">
            <img src="images/lunbo05.jpg" alt="" width="500" height="750">
            <img src="images/lunbo06.jpg" alt="" width="500" height="750"> 
            <img src="images/lunbo07.jpg" alt="" width="500" height="750">
        </div>
    
    <ul id = "lunboNum">
        <li class="currentNum">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    </div>
    
</body>

css样式

*{
            margin:0px; padding:0px;
        }
        body{
            background: #999;
        }
        li{

            line-height: 50px;
            margin:5px auto;
            list-style: none;
            width:80px;
            height: 50px;
            color:#C0FF3E;
            font-size: 30px;
            background: #9370DB;
            cursor: pointer;
        }
        img{
            cursor: pointer;

        }
        div#wrap{/*包裹层*/
            width:600px;
            height:750px;
            background:#312347;
            margin:0px auto;
            
        }

        div#lunbo-img img:not(:first-of-type){/*除了第一张图片其他全部隐藏*/
            display:none;
        }
        div#lunbo-img img{
            float:left;
        }
        div#wrap ul{
            text-align:center;
            width:100px;
            float:right;
        
        }
        .currentNum{
            background:#90EE90;
            color:#8A2BE2;
        }
    </style>

jquery 代码

<script >
    $(function() { 
        

         var currentIndex;//当前索引值
         var picTotal = $("img").length;//当前照片数量
         var ToDisplayPicNumber = 0;//当前自动轮播索引值
         
         $("li").each(function() {//获取li并且绑定点击事件
             $(this).click(function(){
                 displayPic(this);
                 ToDisplayPicNumber = $(this).index();
             })

         })

         function displayPic(obj){
             currentIndex = $(obj).index();
             //ToDisplayPicNumber = currentIndex;
             $(obj).siblings().removeClass("currentNum").end().addClass("currentNum");
            $("#lunbo-img").children().hide();
             $("#lunbo-img img").eq(currentIndex).fadeIn();
             
        }

        var l = setInterval(function(){//定时器
            autoDisplayPic();
        },2000);

        function autoDisplayPic(){//轮播代码
            ToDisplayPicNumber = (ToDisplayPicNumber + 1) % picTotal;
            $("li").eq(ToDisplayPicNumber).trigger("click");
            
        }


        $("img").mouseover(function() {//鼠标移入图片清除定时器
            clearInterval(l);
        }).mouseout(function() {
            l = setInterval(function(){//鼠标移出图片恢复定时器
                autoDisplayPic();
            },2000);
        })

    })
    </script>

以上是关于jquery图片轮播代码的主要内容，如果未能解决你的问题，请参考以下文章

jQuery轻量级京东图片轮播代码等

jquery自动轮播图代码只能出现一张图片第二三张就空白了轮播正常播放

jquery图片轮播代码

淘宝首页宽屏图片轮播代码

基于jQuery实现左右图片轮播（原理通用）

用jquery实现图片轮播怎么写呢求指教