HTML部分:
<div class="slider">
<ul>
<li>
<a href="#">
<img src="img/大图1.jpg" />
</a>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</li>
<li>
<a href="#">
<img src="img/大图2.jpg" />
</a>
<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>
</li>
<li>
<a href="#">
<img src="img/大图1.jpg" />
</a>
<p>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
</li>
<li>
<a href="#">
<img src="img/大图2.jpg" />
</a>
<p>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</li>
</ul>
<!--按钮布局-->
<div class="btn">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
CSS部分:( 这里CSS我是用less写的,里面的rem的换算方式是:1rem=16px )
.slider {
width: 710/16rem;
height: 400/16rem;
border: solid 1/16rem #eee;
position: relative;
overflow: hidden;
ul {
width: 3500/16rem; // 这里说明一下,此处的宽度 一定大于 图片数量*每张图片的宽度
list-style: none;
position: relative;
li {
width: 710/16rem;
float: left;
a {
display: inline-block;
width: 710/16rem;
height: 400/16rem;
margin: 0;
padding: 0;
}
p {
display: block;
width: 710/16rem;
height: 30/16rem;
font-size: 18/16rem;
text-align: center;
font-family: "微软雅黑";
background-color: black;
color: white;
margin-top: -30/16rem;
}
}
}
.btn {
position: absolute;
right: 10px;
bottom: 5px;
text-align: center;
font-size: 15/16rem;
line-height: 26/16rem;
span {
cursor: pointer;
display: block;
float: left;
width: 28px;
height: 28px;
background: #0C79B1;
margin-left: 3/16rem;
color: #fff;
}
.active {
background: #b63e1a;
}
}
}
jQuery部分:
//--------轮播--------
$(document).ready(function(){
var slider=$(".slider"),
ul=slider.find("ul"),
showNumber=slider.find(".btn span"),
oneWidth=slider.find("ul li").eq(0).width();
var timer=null;
var iNow=0;//正在展示的图片索引值
showNumber.on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
var index=$(this).index();
iNow=index;
ul.animate({
"left":-oneWidth*iNow,
})
});
timer=setInterval(function(){
iNow++;
if(iNow>showNumber.length-1){
iNow=0;
}
showNumber.eq(iNow).trigger("click");
},2000);
})
//--------轮播----------
没截图,如果哪里有不懂得 可以私我~~~