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

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link href="fk.css" rel="stylesheet" type="text/css" />
    	</head>
    	<body>
    		<div id="fk">
    			<!--img[src=img/$.jpg]*6-->
    			<img src="img/1.jpg" alt="" style="display: block;"/>
    			<img src="img/2.jpg" alt="" />
    			<img src="img/3.jpg" alt="" />
    			<img src="img/4.jpg" alt="" />
    			<img src="img/5.jpg" alt="" />
    			<img src="img/6.jpg" alt="" />
    			<ul>
    				<li style="background: #A52A2A;"></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ul>
    		</div>
    	</body>
    	<script>
    //		如果多途径都要控制同一块效果,那么都通过大总管变量去控制
    		var fk=document.getElementById('fk');
    		var lis=fk.getElementsByTagName('li');
    		var is=fk.getElementsByTagName('img');
    		var c=0;//大总管变量
    		
    //		定时器调用的函数
    		function autorun(){
    			c++;
    			if(c==6){
    				c=0;
    			}
    //			让所有图片隐藏,让所有li变灰
    			for(var i=0;i<6;i++){
    				is[i].style.display='none';
    				lis[i].style.background='#ddd'
    			}
    //			让c号元素显示
    			is[c].style.display='block';
    			lis[c].style.background='#A52A2A';
    		}
    		
    		var timer=setInterval(autorun,1000);
    		
    		
    //		给所有li加事件
    			for(var i=0;i<lis.length;i++){
    //				将序号存到每个li上
    				lis[i].xuhao=i;
    //				给li加鼠标移入事件
    				lis[i].onmouseover=function(){
    					clearInterval(timer);
    //					获得序号
    				var c=this.xuhao;
    //				让所有图片隐藏,让所有li变灰
    				for(var i=0;i<6;i++){
    					is[i].style.display='none';
    					lis[i].style.background='#ddd'
    				}
    	//			让c好元素显示
    				is[c].style.display='block';
    				lis[c].style.background='#A52A2A';
    			
    					}
    					
    	//				给li加鼠标移出事件
    				lis[i].onmouseout=function(){
    	//				重新设置定时器
    					timer=setInterval(autorun,1000);
    					}
    				}
    	</script>
    </html>
    

     css代码

    *{
    	margin: 0;
    	padding: 0;
    }
    #fk{
    	 1200px;
    	height: 535px;
    	position: relative;
    	border: 4px solid palevioletred;
    	margin: 0 auto;
    }
    #fk img{
    	position: absolute;
    	left: 0;
    	top: 0;
    	display: none;
    }
    #fk ul{
    	position: absolute;
    	left: 528px;
    	bottom: 23px;
    }
    #fk ul li{
    	 12px;
    	height: 12px;
    	background: #ddd;
    	list-style: none;
    	float: left;
    	margin-right: 8px;
    	border-radius: 50%;
    }
    
  • 相关阅读:
    用导数解决逗逼初三数学二次函数图像题
    NOIP 2014 pj & tg
    BZOJ 1004
    双参数Bellman-ford带队列优化类似于背包问题的递推
    emu1
    無題
    15 day 1代碼
    javascript quine
    线段树的总结
    Watering the Fields(irrigation)
  • 原文地址:https://www.cnblogs.com/gxywb/p/9401169.html
Copyright © 2011-2022 走看看