• 手写简易轮播


    简易轮播

    <!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>
  • 相关阅读:
    读《阿里云是如何失控的》有感
    LeetCode Search in Rotated Sorted Array 在旋转了的数组中查找
    界面编程模仿篇(QQ登录界面逼真篇)
    最牛B的编码套路
    QinQ封装及终结详解
    seaJs学习笔记之javascript的依赖问题
    Deploy maven on Linux OS
    c++——inline内联函数
    c++——引用
    c++——const关键字
  • 原文地址:https://www.cnblogs.com/mjtabu/p/11983502.html
Copyright © 2020-2023  润新知