zoukankan      html  css  js  c++  java
  • JS案例:Jq中的fadeOut和fadeIn实现简单轮播(没完善,简单实现)

    代码:

    <!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>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
    
                #nav {
                     120px;
                    height: 80px;
                    position: absolute;
                    right: 310px;
                    top: 60px;
                    z-index: 2;
                }
    
                #nav img {
                     100%;
                    height: 100%;
                    margin: 10px 0;
                    transition: 0.5s;
                }
    
                #nav img:hover {
                    border: 5px solid lightcoral;
                    box-sizing: border-box;
                }
    
                #pic {
                     1000px;
                    height: 600px;
                    position: relative;
                    margin: 50px auto;
                }
    
                #pic img {
                     100%;
                    height: 100%;
                    position: absolute;
                    display: none;
                }
            </style>
            <script src="js/jquery.min.js"></script>
        </head>
    
        <body>
            <div id="nav">
                <img src="img/1.jpg" alt="1" />
                <img src="img/2.jpg" alt="2" />
                <img src="img/3.jpg" alt="3" />
                <img src="img/4.jpg" alt="4" />
                <img src="img/5.jpg" alt="5" />
            </div>
            <div id="pic">
                <img src="img/1.jpg" alt="1" />
                <img src="img/2.jpg" alt="2" />
                <img src="img/3.jpg" alt="3" />
                <img src="img/4.jpg" alt="4" />
                <img src="img/5.jpg" alt="5" />
            </div>
            <script>
                var count = 0; //记录图片是第几张
                $("#pic img").eq(0).fadeIn(1); //初始图片显示状态,不写的话,第一张图片不会显示
                $("#nav img").on("click", changePic); //给导航框小图片添加点击事件
                var list = Array.from($("#nav img")); //将小图图片列表,放在数组中
                function changePic(e) { //小图点击事件
                    var index = list.indexOf(this); //在数组中查找被点击的那一项索引
                    count = index; //当点击时将自动切换的索引换成点击的那个
                    $("#pic img:visible").fadeOut(500); //初始化所有图片,将显示的隐藏
                    $("#pic img").eq(index).fadeIn(500); //将被单击的显示
                }
                setInterval(autoMove, 3000); //每三秒切换一次
                function autoMove() {
                    count++; //切换图片
                    if (count > 4) {
                        count = 0;
                    }
                    $("#pic img:visible").fadeOut(500); //初始化所有图片,将显示的隐藏
                    $("#pic img").eq(count).fadeIn(500); //将被单击的显示
                }
            </script>
        </body>
    
    </html>
  • 相关阅读:
    VIM中保存编辑的只读文件
    ElasticSearch 入门
    NET Core实现OAuth2.0的ResourceOwnerPassword和ClientCredentials模式
    visual studio for mac的安装初体验
    分库分表
    Oracle执行计划
    mybatis批量update(mysql)
    查看mysql字符集及修改表结构--表字符集,字段字符集
    13.1.17 CREATE TABLE Syntax
    10.1.5 Connection Character Sets and Collations
  • 原文地址:https://www.cnblogs.com/HelloWorld-Yu/p/10193688.html
Copyright © 2011-2022 走看看