zoukankan      html  css  js  c++  java
  • 轮播图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            /* 
                设置outer的样式
             */
             #outer{
                 /* 设置宽和高 */
                  740px;
                 height: 960px;
                 /* 居中 */
                 margin: 50px auto;
                 /* margin:50 auto 50 auto;表示上下为50,左右为auto */
                 background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
                 /* 设置padding内边距  上下为10px 左右为0*/
                 padding: 10px 0;
                 /* 开启相对定位 */
                 position: relative;
                 /* 裁剪溢出的内容 */
                 overflow: hidden;
             }
             img{
                  720px;
                 height: 960px;
             }
             /* 设置imgList */
             #imgList{
                 /* 去除项目符号 */
                 list-style: none;
                 /* 设置ul的宽度 */
                 /*  3700px; */
                 /* 开启绝对定位 */
                 position: absolute;
                 /* 设置偏移量 */
                 /* 每向左移动740px,就会显示到下一张图片 */
                 /* left: -740px; */
             }
    
             /* 设置图片中的li */
             #imgList li{
                 /*设置浮动 */
                 float: left;
                 /* 设置左右外边距 */
                 margin: 0 10px;
    
             }
             /* 设置导航按钮 */
             #navDiv{
                 /* 开启绝对定位 */
                 position: absolute;
                 /* 设置位置 */
                 bottom: 15px;
                 /* 设置left值
                    outer宽度 740
                    navDiv宽度 35*5=175
                        740- 175=565/2=281
                 */
                 /* left: 281px; */
             }
             #navDiv a{
                 /* 设置超链接浮动*/
                 float: left;
                 /* 设置超链接的宽和高 */
                  25px;
                 height: 25px;
                 /* 设置背景颜色 */
                 background-color:red;
                 /* 设置左右外边距 */
                 margin: 0 10px;
                 /* 设置透明 */
                 opacity: 0.5;
                 /* 兼容IE8透明 */
                 filter: alpha(opacity=50);
             }
    
             /* 设置鼠标移入的效果 */
             #navDiv a:hover{
                 background-color: black;
             }
        </style>
        <!-- 引用工具 -->
        <script type="text/javascript" src="./js/tools.js">
            
        </script>
    
        <script>
            window.onload=function(){
    
    
                // 获取imgList
                var imgList=document.getElementById("imgList");
                // 获取页面中所有的img标签
                var imgArr=document.getElementsByTagName("img");
                // 设置imgList的宽度
                imgList.style.width=740*imgArr.length+"px";
    
                //设置导航按钮居中
                // 获取navDiv
                var navDiv=document.getElementById("navDiv");
                // 获取outer
                var outer=document.getElementById("outer");
                // 设置navDiv的left值
                navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
    
                // 默认显示图片的索引
                var index=0;
    
                // 获取所有的a
                var allA=document.getElementsByTagName("a");
                // 设置默认选中的效果
                allA[index].style.backgroundColor="black";
                
                /* 
                    点击超链接切换到指定的图片
                        点击第一个超链接,显示第一个图片
                        点击第二个超链接,显示第二个图片
                */
    
                // 为所有的超链接都绑定单击响应函数
                for(var i=0;i<allA.length;i++){
    
                    // 为每一个超链接都添加一个num属性
                    allA[i].num=i;
                    // 为超链接绑定单击响应函数
                    allA[i].onclick=function(){
    
                        // 关闭自动切换的定时器
                        clearInterval(timer);
                        // 获取点击超链接的索引,并将其设置为index
                        index=this.num;
    
                        // 切换图片
                        /* 
                            第一张 0 0
                            第二张 1 -740
                            第三张 2 -1480
    
                        */
                        // imgList.style.left=-740*index+"px";
                    //    设置选中的a
                        setA();
    
                        // 使用move函数来切换图片
                        move(imgList,"left",-740*index,60,function(){
                            // 动画执行完毕,开启自动切换
                            autoChange();
                        });
                    };
                }
    
                // 开启自动切换图片
                autoChange();
    
                //创建一个方法用来设置选中的a
                function setA(){
                    // 判断当前索引是否是最后一张图片
                    if(index >= imgArr.length-1){
                        // 则将index设置为0
                        index =0;
                        // 此时显示的最后一张图片,而最后一张图片和第一张是一模一样
                        // 通过css将最后一张切换成第一张
                        imgList.style.left=0;
                    }
    
                    // 遍历所有a,并将它们的背景颜色设置为红色
                    for(var i=0;i<allA.length;i++){
                        allA[i].style.backgroundColor="red";
                    }
                    // 将选中的a设置为黑色
                    allA[index].style.backgroundColor="black";
                };
    
                // 定义一个自动切换的定时器的标识
                var timer;
                // 创建一个函数,用来开启自动切换图片
                function autoChange(){
    
                    // 开启一个定时器,用来定时去切换图片
                    timer=setInterval(function(){
                        // 使索引自增
                        index++;
                        // 判断index的值
                        index%=imgArr.length;
                        // 执行动画,切换图片
                        move(imgList,"left",-740*index,20,function(){
                            // 修改导航按钮
                            setA();
                        });
                    }, 3000);
                }
            };
        </script>
    </head>
    <body>
        <!-- 创建一个外部的div,来作为大的容器 -->
        <div id="outer">
            <!-- 创建一个ul,用于放置图片 -->
            <ul id="imgList">
                <li><img src="./img/6.jpg"/></li>
                <li><img src="./img/7.jpg"/></li>
                <li><img src="./img/3.jpg"/></li>
                <li><img src="./img/4.jpg"/></li>
                <li><img src="./img/5.jpg"/></li>
                <li><img src="./img/6.jpg"/></li>
            </ul>
            <!-- 创建导航按钮 -->
            <div id="navDiv">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
    </body>
    </html>

  • 相关阅读:
    Effective Java 第三版——72. 赞成使用标准异常
    Effective Java 第三版——71. 避免不必要地使用检查异常
    Effective Java 第三版——70. 对可恢复条件使用检查异常,对编程错误使用运行时异常
    Effective Java 第三版——69. 仅在发生异常的条件下使用异常
    Effective Java 第三版——68. 遵守普遍接受的命名约定
    Effective Java 第三版——67. 明智谨慎地进行优化
    Effective Java 第三版——66. 明智谨慎地使用本地方法
    Effective Java 第三版——65. 接口优于反射
    Effective Java 第三版——64. 通过对象的接口引用对象
    Effective Java 第三版——63. 注意字符串连接的性能
  • 原文地址:https://www.cnblogs.com/hr-7/p/14237772.html
Copyright © 2011-2022 走看看