纯js轮播

来源：互联网发布：喜马拉雅知乎编辑：程序博客网时间：2024/05/20 23:02
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>轮播</title>    <style>        *{margin: 0;            padding:0;}        .wrap{            position: relative;            width: 500px;            height: 200px;            background: #ccc;            margin:20px auto;        }        .pics,.pics li,.pics li img{            width: 100%;            height: 100%;        }        .pics li{            position: absolute;        }        .btn{            position: absolute;            top:70px;            height: 60px;            width: 40px;            background: rgba(0,0,0,0.5);            color: #fff;            text-align: center;            line-height: 60px;            font-size: 30px;            font-weight: lighter;            cursor: pointer;            z-index: 2;        }        .btn:hover{            background:rgba(0,0,0,0.8);        }        .btnr{            right: 0;        }        ul{list-style:none;}        .pots{            position: absolute;            left:166px;            bottom: 10px;        }        .pots div{            width: 20px;            height: 20px;            background-color: #5388e8;            float: left;            text-align: center;            line-height: 20px;            color: #fff;            margin-right: 5px;            border-radius: 50%;            cursor: pointer;        }        .pots div.active{background-color: #ff0000;}    </style></head><body><div class="wrap">    <ul class="pics">        <li><img src="img/1.png" alt=""></li>        <li><img src="img/2.png" alt=""></li>        <li><img src="img/3.png" alt=""></li>        <li><img src="img/4.png" alt=""></li>        <li><img src="img/5.png" alt=""></li>        <li><img src="img/6.png" alt=""></li>        <li><img src="img/0.png" alt=""></li>    </ul>    <div class="pots">        <div class="active">1</div>        <div>2</div>        <div>3</div>        <div>4</div>        <div>5</div>        <div>6</div>        <div>7</div>    </div>    <div class="btn btnl"><</div>    <div class="btn btnr">></div></div><script src="jquery-1.4.2.min.js"></script><script>var $li=$(".pics li");var count=0;var timer;$(function(){    $li.eq(0).show().siblings().hide();    ShowTime();    $(".pots div").hover(function(){        clearInterval(timer);        count = $(this).index();        Show();    },function(){        ShowTime();    });    $(".btnl").click(function(){        clearInterval(timer);        count--;        if(count == -1){            count = $li.length;        }        Show();    });    $(".btnr").click(function(){        clearInterval(timer);        count++;        if(count == $li.length){            count = 0;        }        Show();    });});function Show(){    $li.eq(count).fadeIn(300).siblings().hide();    $(".pots div").eq(count).addClass("active").siblings().removeClass("active");}function ShowTime(){    timer = setInterval(function(){        count++;        Show();    },2000);}</script></body></html>
阅读全文
0 0