zoukankan      html  css  js  c++  java
  • 封装 自动播放选项卡

    <!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="UTF-8">
    <title>自动播放选项卡</title>
    <style>
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	
    	#box,#box2,#box3,#box4 {
    		 500px;
    		height: 400px;
    		border: 1px solid #000;
    		border-radius: 8px;
    		text-align: center;
    		padding-top: 10px;
    		margin: 30px;
    		float: left;
    	}
    
    	a {
    		text-decoration: none;
    		font-size: 40px;
    	}
    	
    	.inp input {
    		 100px;
    		height: 40px;
    		font-size: 18px;
    		font-weight: bold;
    		outline: none;
    		background: #ccc;
    	}
    	
    	.inp .active {
    		 100px;
    		height: 40px;
    		font-size: 18px;
    		font-weight: bold;
    		outline: none;
    		background: #f50;
    	}
    	
    	.body div {
    		 450px;
    		height: 300px;
    		text-align: center;
    		line-height: 300px;
    		font-size: 100px;
    		font-weight: bold;
    		margin: 0 auto;
    		background: #f90;
    		border-radius: 8px;
    		margin-top: 30px;
    		display: none;
    	}
    	
    	.body div.show {
    		display: block;
    	}
    </style>
    	<script src="jquery-3.2.1.min.js"></script>
    <script>
    	$(function () {
    		function likTabAuto(oBoxId){
    			var oBox = $('#'+oBoxId);
    			var aBtn = oBox.find('.inp input');
    			var aDiv = oBox.find('.body div');
    			var iNow = 0;
    			var timer = null;
    			for(var i = 0; i < aBtn.length; i++) {
    				aBtn[i].index = i;
    				aBtn[i].onclick = function() {
    					for(var i = 0; i < aBtn.length; i++) {
    						aBtn[i].className = '';
    						aDiv[i].className = '';
    					}
    					iNow = this.index;
    					this.className = 'active';
    					aDiv[this.index].className = 'show';
    				}
    			}
    
    			function tab() {
    				for(var i = 0; i < aBtn.length; i++) {
    					aBtn[i].className = '';
    					aDiv[i].className = '';
    				}
    				aBtn[iNow].className = 'active';
    				aDiv[iNow].className = 'show';
    			}
    
    			function next() {
    				iNow++;
    				if(iNow == aBtn.length) {
    					iNow = 0;
    				}
    				tab();
    			}
    
    			timer = setInterval(next, 1000);
    			oBox.hover(function () {
    				clearInterval(timer);
    			}, function () {
    				timer = setInterval(next, 1000);
    			});
    		}
    
    		likTabAuto('box');
    		likTabAuto('box2');
    		likTabAuto('box3');
    		likTabAuto('box4');
    	});
    </script>
    </head>
    
    <body>
    	<div id="box">
    		<div class="inp">
    			<input type="button" value="你好" class="active" />
    			<input type="button" value="再见" />
    			<input type="button" value="不送" />
    		</div>
    		<div class="body">
    			<div class="show">你好</div>
    			<div>再见</div>
    			<div>不送</div>
    		</div>
    	</div>
    
    	<div id="box2">
    		<div class="inp">
    			<input type="button" value="你好" class="active" />
    			<input type="button" value="再见" />
    			<input type="button" value="不送" />
    		</div>
    		<div class="body">
    			<div class="show">你好</div>
    			<div>再见</div>
    			<div>不送</div>
    		</div>
    	</div>
    	<div id="box3">
    		<div class="inp">
    			<input type="button" value="你好" class="active" />
    			<input type="button" value="再见" />
    			<input type="button" value="不送" />
    		</div>
    		<div class="body">
    			<div class="show">你好</div>
    			<div>再见</div>
    			<div>不送</div>
    		</div>
    	</div>
    
    	<div id="box4">
    		<div class="inp">
    			<input type="button" value="你好" class="active" />
    			<input type="button" value="再见" />
    			<input type="button" value="不送" />
    		</div>
    		<div class="body">
    			<div class="show">你好</div>
    			<div>再见</div>
    			<div>不送</div>
    		</div>
    	</div>
    </body>
    
    </html>
    

      

    author:Lik
    Endeavoring to powerless, struggling to move yourself.
  • 相关阅读:
    selenium 资料
    SpringMVC上传文件总结
    java 获取当天(今日)零点零分零秒
    存储过程实例基于postgersql
    为webService添加Interceptor(拦截器)
    spring+redis实例(二)
    hibernate字段映射枚举类型
    WordPress 在Ubuntu下安装插件、主题输入FTP后无法创建目录
    spring + redis 实例(一)
    mybatis字段映射枚举类型
  • 原文地址:https://www.cnblogs.com/likwin/p/7267886.html
Copyright © 2011-2022 走看看