html轮播图

思路：将显示的n张图片一行放在 轮播块里（该块宽度设置为显示一个图片的宽度）；然后改变n张图片的显示位置：

           我用的是jquery进行dom操作（实现改变位置，特效等效果）；

 

实现：

css部分

* {
				margin: 0px;
				padding: 0px;
			}

			.lunbo {
				position: relative;
				margin: 0 auto;
				margin-top: 150px;
				width: 70%;
				height: 100px;
				border: 2px solid aquamarine;
				overflow: hidden;
			}

			.lunbo-photo {
				position: absolute;
				width: 500%;
				height: 300px;
				border: 1px solid darkred;
			}

			.lunbo-photo div {
				position: relative;
				width: 20%;
				height: 100%;
				float: left;
			}

			.lunbo-photo div a {
				width: 100%;
				height: 100%;
			}

			.lunbo-photo div a img {
				width: 100%;
				height: 100%;
			}

			.lunbo-photo-daohang {
				position: absolute;
				bottom: 0px;
				width: 100%;
				height: 30px;
				border: 1px solid brown;

			}

			.lunbo-photo-daohang ul {
				width: 100%;
				text-align: center;
				float: left;
			}

			.lunbo-photo-daohang ul li {
				list-style: none;
				display: inline-block;
				margin-left: 4px;
				margin-right: 4px;
			}

			.lunbo-photo-daohang ul li div {
				width: 20px;
				height: 20px;
				background-color: cornflowerblue;
				border-radius: 50%;
				border: 1px solid #7FFFD4;
			}

			.lunbo-photo-daohang ul li .on {
				color: #A52A2A;
				transform: scale(1.4, 1.4);
			}

html部分：

<div class="lunbo">
			<div class="lunbo-photo">
				<div><a href="https://www.baidu.com"><img src="img/9.png"></a></div>
				<div><a href="https://www.baidu.com"><img src="img/2.png"></a></div>
				<div><a href="https://www.baidu.com"><img src="img/9.png"></a></div>
				<div><a href="https://www.baidu.com"><img src="img/2.png"></a></div>
				<div><a href="https://www.baidu.com"><img src="img/9.png"></a></div>
			</div>
			<div class="lunbo-photo-daohang">
				<ul>
					<li>
						<div class="on">1</div>
					</li>
					<li>
						<div>2</div>
					</li>
					<li>
						<div>3</div>
					</li>
					<li>
						<div>4</div>
					</li>
					<li>
						<div>5</div>
					</li>
				</ul>
			</div>
		</div>

js部分：

       

/* 自动轮播 */
		var i = 1;
		setInterval(function autopaly() {
			if (i == 5) {
				i = 0;
			}
			$('.lunbo-photo').css("left", -$(document.body).width() * i * 0.7 + "px");
			for (var j = 0; j < 5; j++) {
				$('.lunbo-photo-daohang div')[j].className = "";
			}
			$('.lunbo-photo-daohang div')[i].className = "on";
			i++;
		}, 3000);

效果：

 

 

只要建个html页面，再把上面的代码放进去就行了，别忘了引入jquery的js文件