jquery轮播

来源：互联网发布：守望先锋辅助网站源码编辑：程序博客网时间：2024/06/05 19:29
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>轮播</title>    <link rel="stylesheet" href="css/index.css">    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>    <script>        var i = 0;        $(function(){            $(".pic").eq(0).show.siblings().stop().hide();            lunbo();            $(".icon-name").hover(function(){                clearInterval(timer);                i = $(this).index();               show();            },function() {                lunbo();            });            //上一个            $(".btn1").click(function(){                clearInterval(timer);                if (i == 0){                    i = 3;                }                i--;                show();                lunbo();            });            $(".btn2").click(function(){                clearInterval(timer);                if (i == 2){                    i = -1;                }                i++;                show();                lunbo();            });            //展示            function show(){                $(".pic").eq(i).stop().show().siblings().stop().hide();                $(".icon-name").eq(i).addClass('active').siblings().removeClass('active');            }            //轮播            function lunbo(){                timer = setInterval(function(){                    i++;                    if (i == 3){                        i = 0;                    }                    $(".pic").eq(i).stop().show().siblings().stop().hide();                    $(".icon-name").eq(i).addClass('active').siblings().removeClass('active');                },3000);             }        });    </script></head><body>    <div id="picLunbo">        <div class="pic"><img src="images/1.jpg" alt=""></div>        <div class="pic"><img src="images/2.jpg" alt=""></div>        <div class="pic"><img src="images/3.jpg" alt=""></div>    </div>    <div id="icon">        <div class="icon-name active"></div>        <div class="icon-name"></div>        <div class="icon-name"></div>    </div>    <div id="btn">        <div class="btn1">&lt;</div>        <div class="btn2">&gt;</div>    </div></body></html>
阅读全文
0 0