简易轮播图，走马灯，幻灯片(html+css+jq)

淡淡的烟草味﹌ 2022-03-27 13:08 476阅读 0赞

### 今天做一个简易轮播图 ###

首先做轮播图没有好看的图片怎么行，准备三张大小一致的图片，图片1图片2图片3。

01.jpg

![01.jpg][]

02.jpg

![02.jpg][]

03.jpg

![03.jpg][]

文件结构： ![20190113200918883.png][]

在html文件夹下新建review.html文件：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="../css/review.css"/>
    	</head>
    	<body>
    		
    		<div>
    			
    			
    			<ul>
    				<li><img src="../images/01.jpg" alt="" /></li>
    				<li><img src="../images/02.jpg" alt="" /></li>
    				<li><img src="../images/03.jpg" alt="" /></li>
    			</ul>
    			
    			<ol>
    				<li class="current"></li>
    				<li></li>
    				<li></li>
    			</ol>
    			
    			<span class="left"><</span>
    			<span class="right">></span>
    			
    		</div>
    		
    		
    		
    		<script src="../js/jquery-3.3.1.js"></script>
    		<script src="../js/review.js"></script>
    	</body>
    </html>

在css文件夹下新建review.css：

*{
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    div{
    	width: 931px;
    	height: 455px;
    	margin: 100px auto;
    	/*overflow：hidden，父级是可以把子级超过自己的东西隐藏起来的，即超出div这个框框的图片隐藏起来即*/
    	overflow: hidden;
    	position:relative;
    }
    ul{
    	/*ul的宽度大于等于img的宽度*5（li的个数），子级的大小是可以超过父级的*/
    	width: 4655px; 
    	/*transform: translateX(-931px);
    	 * 控制图片水平位移:正值:右;负值:左;*/
    }
    li{
    	/*使图片水平排列，父级足够宽才足以水平排列*/
    	float: left;
    }
    
    ol{
    	/*自己绝对定位,父级相对定位
    	自己固定在父级的某个位置,top bottom left right*/
    	position: absolute;
    	bottom: 10px;
    	left: 50%;
    	/*背景透明 ,rgb红绿蓝 a为透明度*/
    	background: rgba(255,255,255,0.3);
    	/*再水平位置上向左移动自身的一半*/
    	transform: translateX(-50%);
    	/*设置圆角*/
    	border-radius: 20%;
    }
    /*空格代表后代选择器*/
    ol li{
    	width: 16px;
    	height: 16px;
    	margin: 2px 10px;
    	background: #FFFFFF;
    	border-radius: 50%;
    }
    .current{
    	background: pink;
    }
    span{
    	position: absolute;
    	/*定位:绝对定位，父级相对定位*/
    	width: 50px;
    	height: 50px;
    	background: rgba(0,0,0,0.1);
    	/*rgb为红蓝绿,a为透明度*/
    	top: 200px;
    	left: 10px;
    	text-align: center;
    	line-height: 50px;
    	color: #fff;
    	border-radius: 50%;
    	/*增加圆角*/
    	cursor: pointer;
    	/*鼠标移入增加小手*/
    }
    /*设置前进后退*/
    .left{
    left: 20px;
    }
    .right{
    	right: 20px;
    }

在js文件夹下新建review.js

运行效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70][]

一个简单的轮播图就完成了。

[01.jpg]: /images/20220327/eda6c05df1c5481b8b8695083201af5b.png
[02.jpg]: /images/20220327/8b3f659a713b4ca3b88862c371e671f9.png
[03.jpg]: /images/20220327/8a8ed2acb9e5400ba0c35cb9832a0743.png
[20190113200918883.png]: /images/20220327/225d811ea93749b99b9b0efefd61c5e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70]: /images/20220327/9ee3a18e81a74c10905840d00b0f351f.png