利用jquery实现轮播图（适合新手）

心已赠人 2022-05-23 02:54 178阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
    <style>
    *{
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    #flash{
    width: 400px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    border:1px solid black;
    overflow: hidden;
    }
    #falsh img{
    width: 400px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    }
    #flash ul{
    position: absolute;
    left: 25%;
    bottom: 5%;
    width: 200px;
    height: 30px;
    border-radius: 20px;
    background-color: rgba(0,0,0,0.5);
    }
    #flash ul li{
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    margin-left: 20px;
    margin-top: 7px;
    }
    #flash ul .li_first{
    background-color: #f40;
    }
    #flash .button{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.3);
    cursor: pointer;
    }
    #flash .right{
    position: absolute;
    right: 10px;
    top: 80px;
    }
    #flash .left{
    position: absolute;
    left: 10px;
    top: 80px;
    }
    #flash .button span{
    font-size: xx-large;
    font-weight: 700;
    line-height: 50px;
    margin-left: 15px;
    color: rgba(255,255,255,0.5);
    }
    </style>
    </head>
    <body>
    <div id="flash">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
    <img src="img3.jpg" alt="">
    <img src="img4.jpg" alt="">
    <img src="img5.jpg" alt="">
    <ul>
    <li class="li_first"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <div class="button right"><span>></span></div>
    <div class="button left"><span><</span></div>
    </div>
    <script>
    var count = 0 ; //定义全局变量count来表示当前图片
    function run(){
    count++;
    count = count ==5?0:count;
    $('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300); //利用eq来遍历img，并将count位图片显示，其他兄弟元素隐藏，fadeIN位淡入显示，fadeOut为淡出
    $('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff'); //同样利用遍历改变圆点的背景色
    }
    function reverserun(){
    count--;
    count = count == -1?4:count;
    $('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300);
    $('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff');
    }
    var timer = setInterval(run,1000); //设置定时器
    $('#flash').hover(function(){ //设置鼠标移入移出事件
    clearInterval(timer);
    },function(){
    timer = setInterval(run,1000);
    })
    $('#flash ul li').mouseenter(function(){ //设置移入圆点事件
    count = $(this).index();
    count = count ==5?0:count;
    $('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300);
    $('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff');
    })
    $('#flash .right').click(function(){ //设置右键按钮点击事件
    run();
    })
    $('#flash .left').click(function(){ //设置左键按钮点击事件
    reverserun();
    })
    </script>
    </body>
    </html>