hi,这里是X，已经好久好久没有出过博客了因为最近实在忙碌，后续会不断加更博客的🐳🐳🐳
轮播图的做法多种多样，这里也是总结了几种做法，推出了第二篇噢，body部分极简化实现轮番图！喜欢的朋友也可以试试：HTML实现轮番图的方法，body极简化，给爱写脚本的朋友–＞利用js实现带按钮（鼠标点击时停止自动轮播/自动轮播）(第二篇)
css实现的话，对于轮播图下方的那个小小的滑动条是比较难做的，这里直接就介绍图片的滑动，这里先补充一些要用到的css属性：
1、Transform属性
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。这里使用到的是translateX()：定义转换，只是用 X 轴的值。
有了这个属性，接下来就是设置动画的时间和动画的表现形式啦
2、animation动画属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{
margin:0 auto;
padding:0;
}
#box {
width: 1226px;
/*单张图片的宽度*/
height: 250px;
/* margin: 50px auto 0; */
overflow: hidden;
}
#box ul {
width: 4904px; /*4张图片的总宽度*/
}
#box ul li {
float: left;
list-style: none;
}
#box ul{
animation-name: imgMove;
animation-duration: 6s;
animation-timing-function: cubic-bezier(0, 1.04, 0, 0.99);
animation-delay: 2s;
animation-iteration-count: infinite;
}
@keyframes imgMove {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(-1226px);
}
50% {
transform: translateX(-2452px);
}
75% {
transform: translateX(-3678px);
}
100% {
transform: translateX(-4904px);
}
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/lbp1.jpg" /></li>
<li><img src="images/lbp2.jpg" /></li>
<li><img src="images/lbp3.jpg" /></li>
<li><img src="images/lbp1.jpg" /></li> <!-- 为了实现无缝轮播 -->
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{
margin:0 auto;
padding:0;
}
#box {
width: 1226px;
/*单张图片的宽度*/
height: 250px;
/* margin: 50px auto 0; */
overflow: hidden;
}
#box ul {
width: 4904px; /*4张图片的总宽度*/
}
#box ul li {
float: left;
list-style: none;
}
/* #box ul{
animation-name: imgMove;
animation-duration: 6s;
animation-timing-function: cubic-bezier(0, 1.04, 0, 0.99);
animation-delay: 2s;
animation-iteration-count: infinite;
}
@keyframes imgMove {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(-1226px);
}
50% {
transform: translateX(-2452px);
}
75% {
transform: translateX(-3678px);
}
100% {
transform: translateX(-4904px);
}
} */
#box .banner_pic .pic{
display: none;
/* 让有这个属性的li图片不显示 */
}
#box .banner_pic .current{
display: block;
/* 让有这个属性的li图片显示 */
}
#box ol {
position: absolute;
left: 45%;
top: 30%;
margin: 0 auto;
}
#box ol .but{
float: left;
width: 10px;
height: 10px;
border: 1px solid white;
border-radius: 50%;
margin-right: 10px;
}
#box ol li{
cursor: pointer;
list-style: none;
}
#box ol .current{
background: #6479d5;
float: left;
width: 10px;
height: 10px;
border: 1px solid #6479d5;
border-radius: 50%;
margin-right: 10px;
}
.one{
position: absolute;
left: 50%;
top: 0;
margin-left: -650px;
}
</style>
</head>
<body>
<div id="box">
<ul class="banner_pic" id="banner_pic">
<li class="current"><img class="one" src="./images/lbp1.jpg" alt=""></li>
<li class="pic"><img class="one" src="./images/lbp2.jpg" alt=""></li>
<li class="pic"><img class="one" src="./images/lbp3.jpg" alt=""></li>
</ul>
<ol id="button">
<li class="current"></li>
<li class="but"></li>
<li class="but"></li>
</ol>
</div>
<script type="text/javascript">
window.onload=function(){
//顶部的焦点图切换
function hotChange(){
var current_index=0;
var timer=window.setInterval(autoChange, 3000); //设置计时器
//获取所有的li对象
var button_li=document.getElementById("button").getElementsByTagName("li");
var pic_li=document.getElementById("banner_pic").getElementsByTagName("li");
for(var i=0;i<button_li.length;i++){
button_li[i].onmouseover=function(){
//当鼠标指针移至图片之上时运行脚本:
if(timer){
clearInterval(timer);//清楚原有的timer
}
//for循环找到这个下标、图片
for(var j=0;j<pic_li.length;j++){
if(button_li[j]==this){//如果此时的button_li[j]下标刚好对应此时的图片
current_index=j;//更新下标
button_li[j].className="current";
pic_li[j].className="current";
}else{
pic_li[j].className="pic";
button_li[j].className="but";
}
}
}
//当鼠标不在上面的时候，设置自动话轮播图效果
button_li[i].onmouseout=function(){
timer=setInterval(autoChange,3000);
}
}
function autoChange(){
++current_index;
if (current_index==button_li.length) {
current_index=0;
}
for(var i=0;i<button_li.length;i++){
if(i==current_index){
button_li[i].className="current";
pic_li[i].className="current";
}else{
button_li[i].className="but";
pic_li[i].className="pic";
}
}
}
}
hotChange();
}
</script>
</body>
</html>
如果想用jQuery实现的话，可以点击这篇博客噢，非常详细并且很方便：jQuery实现轮番图超强理解！ ！！
