手写简易轮播 | 易学教程

简易轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简易轮播</title>
    </head>
<style>
    #banner{width: 560px; height: 290px; border: 1px solid #000; overflow: hidden; margin: 0 auto; position: relative;}
    img{widows: 560px; height: 290px; display: none;} 
    ol{position: absolute; float:right; bottom: 10px;}
    li{list-style: none; float: left;padding: 0 10px; margin-right:20px ; cursor: pointer;background: #999;}
    ol .active{background: red;color:white;} 
</style>
<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
<body>
    <div id="banner">
        <img src="http://p4.qhimg.com/bdm/960_593_0/t01e71082414f50bd52.jpg">
        <img src="http://p0.qhimg.com/bdm/480_296_0/t01f3894323e88ea123.jpg">
        <img src="http://p15.qhimg.com/bdm/960_593_0/t01acc12e86173a0606.jpg">
        <img src="http://p6.qhimg.com/bdm/960_593_0/t0127bd4f8758c42304.jpg">
        <img src="http://p6.qhimg.com/bdm/480_296_0/t01e501e8d6a74a1a1d.jpg">
        <ol class="active">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
<script>
    //标记是否是第一次进入页面
    var fistTime=true;
    //图片下标
    var index;
    //图片下标中间变量
    var index1;
    //声明定时器
    var timeId;
    //li的总个数
    var liSize;
    $(document).ready(function(){
        var temp = document.getElementById('banner');
        var lis = temp.getElementsByTagName('li');
        liSize = lis.length;
        if(fistTime){
            fistTime = false;
            Carousel(0);
            //延时1秒加载自动播放
            setTimeout(autoplayCarousel(),1000); 
        } else {
            //自动轮播
            autoplayCarousel();
        }
    });
    //手动轮播:鼠标悬停
    $("li").mouseover(function(){
        Carousel($(this).index());
        //鼠标悬停移除定时器事件
        clearInterval(timeId);
    });
    //鼠标移开重新加载自动轮播
    $('li').mouseout(function(){
        autoplayCarousel();
    });
    //轮播事件
    function Carousel(index){
        index1 = index;
        $("img").eq(index).show().siblings("img").hide();
        $("li").eq(index).addClass("active").siblings("li").removeClass("active");
    }
    //自动轮播定时器
    function autoplayCarousel(){
        timeId = setInterval(function(){
            index = index1+1;
            if(liSize==index){
                index=0;
            }
            console.log(index);
            Carousel(index);
        }, 1000)
    }
</script>
</html>
来源：https://www.cnblogs.com/mjtabu/p/11983502.html
标签
轮播