思路:将显示的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文件