zoukankan      html  css  js  c++  java
  • day59

    轮播图作业

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<title>轮播图</title>
    	<style>
    		.wrap{
    			 300px;
    			height: 200px;
    			overflow: hidden;
    			position: relative;
    		}
    		ul{
    	         1200px;
    	        height: 200px;
    	        list-style: none;
    	        margin: 0;
    	        padding: 0;
    	        position: absolute;
    	        left: 0;
    		}
    		ul>li{
    			/*display: inline-block;*/
    			float: left;
    			 300px;
    			height: 200px;
    		}
    		.l1{
    			background-color: red;
    		}
    		.l2{
    			background-color: green;
    		}
    		.l3{
    			background-color: blue;
    		}
    		.l4{
    			background-color: cyan;
    		}
    		.d1{
    			margin-left: 100px;
    		}
    		.d1,.d2,.d3,.d4{
    			text-align: center;
    			margin-top: 20px;
    			margin-right: 10px;
    			line-height: 30px;
    			float: left;
    			border: 3px solid black;
    			border-radius: 5px;
    			 5px;
    			height: 5px;
    			background-color: white;
    			/*position: absolute;*/
    		}
    		div:hover{
    			background-color: #d3d3d3;
    			cursor: pointer;
    			user-select: none;
    		}
    	</style>
    </head>
    <body>
    	<div class="wrap">
    		<ul>
    			<li class="l1"></li>
    			<li class="l2"></li>
    			<li class="l3"></li>
    			<li class="l4"></li>
    		</ul>
    	</div>
    	<div class="d1 d"></div>
    	<div class="d2 d"></div>
    	<div class="d3 d"></div>
    	<div class="d4 d"></div>
    </body>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
    $('.d').click(function () {
    	console.log('123');
    	$('ul').animate({
    		left : - ($(this).index()-1) * $('li').width()
    	},300)
    })
    
    </script>
    </html>
    
  • 相关阅读:
    Lesson 43-44 Vacation Season is Approaching?
    Lesson 41-42 How would you respond?
    Lesson 37-38 Do you want to be a millionaire?
    Lesson 35-36 What did you forget?
    Lesson 33-34 Dieting
    保送
    陈老师搬书
    水题(原 USACO Mother's Milk)
    最大公约数和最小公倍数问题(luogu 1029)
    最大子矩阵(OJ 1768)
  • 原文地址:https://www.cnblogs.com/yaoxiaofeng/p/9838519.html
Copyright © 2011-2022 走看看