3：轮播图

「爱情、让人受尽委屈。」 2022-03-25 01:38 196阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="banner.css" rel="stylesheet" type="text/css" />
    <script src="banner.js" type="text/javascript">
    </script>
    </head>
    
    <body>
    
    <div class="wrap" id="wrap">
        <ul id="pic">
            
    
            <li><img src="images/ad-01.jpg" alt=""></li>
            <li><img src="images/ad-02.jpg" alt=""></li>
            <li><img src="images/ad-03.jpg" alt=""></li>
            <li><img src="images/ad-04.jpg" alt=""></li>
           
        </ul>
        <ol id="list">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            
        </ol>
    </div>
    
    
    
    
    </body>
    </html>

--------------------

// JavaScript Document
     window.onload = function() {
         var wrap = document.getElementById('wrap'),
             pic = document.getElementById('pic'),
             list = document.getElementById('list').getElementsByTagName('li'),
             index = 0,
             timer = null;
    
         // 若果有在等待的定时器，则清掉
         if (timer) {
             clearInterval(timer);
             timer = null;
         }
    
         // 自动切换
         timer = setInterval(autoPlay, 2000);
    
    
         // 定义并调用自动播放函数
         function autoPlay() {
             index++;
             if (index >= list.length) {
                 index = 0;
             }
             changeImg(index);
         }
    
         // 定义图片切换函数
         function changeImg(curIndex) {
             for (var j = 0; j < list.length; j++) {
                 list[j].className = "";
             }
             // 改变当前显示索引
             list[curIndex].className = "on";
             pic.style.marginTop = -220 * curIndex + "px";
             index = curIndex;
         }
    
         // 鼠标划过整个容器时停止自动播放
         wrap.onmouseover = function() {
             clearInterval(timer);
         }
    
         // 鼠标离开整个容器时继续播放至下一张
         wrap.onmouseout = function() {
             timer = setInterval(autoPlay, 1000);
         }
    
         // 遍历所有数字导航实现划过切换至对应的图片
         for (var i = 0; i < list.length; i++) {
             list[i].id = i;
             list[i].onmouseover = function() {
                 clearInterval(timer);
                 changeImg(this.id);
             }
         }
     }

--------------------

@charset "utf-8";
    /* CSS Document */
    
    * {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    .wrap {
    	height:220px;
    	width:330px;
    	margin:60px auto;
    	position:relative;
    	overflow:hidden;    //隐藏
    	/*border:1px solid #000;*/
    }
    .wrap ul {
    	position:absolute;
    }
    .wrap ul li {
    	height:220px;
    	}
    .wrap ol {
    	position:absolute;
    	right:100px;
    	bottom:30px;
    }
    .wrap ol li {
    	height:20px;
    	width:20px;
    	background:#ddd;
    	border:1px solid #969591;
    	border-radius:50%;
    	margin-left:5px;
    	color:#959490;
    	float:left;
    	text-align:center;
    	cursor:pointer;
    }
    .wrap ol .on {
    	background:#8F9E9E;
    	color:#fff;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70]: /images/20220325/24413ca4a1964acabd95ae88c88929d9.png