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>
    
  • 相关阅读:
    7年Java后端被淘汰,一路北漂辛酸史。。。
    vue jqury如何获取元素中的属性
    02-Elenment 引入使用
    01
    vuex 全局store,前后端交互
    五分钟搞懂Vuex
    VueX 的使用
    vue解决前后端跨域问题
    rest_framework/api.html
    Vue中使用markdown
  • 原文地址:https://www.cnblogs.com/yaoxiaofeng/p/9838519.html
Copyright © 2011-2022 走看看