先展示效果
可点击小点点轮播和箭头轮播。小点点自动生成。
直接贴上代码：
html:
<div class="boung_des">
<div class="bought-carousel">
<div class="bough-pics">
<ul class="clearfix">
<li>
<a href=""><img src="./images/clo.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./images/clo2.jpg" alt=""></a>
</li>
</ul>
</div>
<div class="bough-little">
<a href="javascript:void(0)" class="prev">
<img src="./images/z2.jpg" alt="">
</a>
<span>
<!-- <em class="dyui-bk dyui-br"></em>
<em></em>
<em></em> -->
</span>
<a href="javascript:void(0)" class="next">
<img src="./images/z1.jpg" alt="">
</a>
</div>
</div>
</div>
css：
/* 轮播样式 */
.boung_des{
width: 800px;
border: 1px solid #eeeeee;
padding: 30px 50px 60px;
}
.bough-pics{
width: 700px;
height: 100px;
position: relative;
white-space:nowrap;
overflow: hidden;
}
.bough-pics>ul{
font-size: 0;
position: absolute;
top: 0;
left: 0;
width: 10000px;
}
.bough-pics>ul>li{
float: left;
width: 100px;
height: 100px;
border: 1px solid #eeeeee;
overflow: hidden;
margin-right: 50px;
display: inline-block;
}
.bough-pics>ul>li>img{
max-width: 100%;
max-height: 100%;
}
.bough-little{
text-align: center;
margin-top: 20px;
}
.bough-little span{
margin: 0 18px;
display: inline-block;
vertical-align: middle;
}
.bough-little span em{
float: left;
margin-right: 8px;
width: 11px;
height: 11px;
border: 1px solid #b4b4b4;
border-radius: 50%;
cursor: pointer;
text-indent: 9999px;
}
.bough-little span em>:last-child{
margin-right: 0;
}
.bough-pics>ul>li:nth-child(5n){
margin-right: 0;
}
js:
$(function () {
var picLength = $(".bough-pics>ul>li").length;
var index = 0;
// 右边
$(".bought-list>ul>li .next").click(function () {
index++;
if (index > picLength / 5) {
index = 0;
$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({
"left": '0px'
}, 500)
}
$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({
'left': -700 * index
}, 500);
circleChange();
});
// 左边
$(".bought-list>ul>li .prev").click(function () {
index--;
if (index < 0) {
index = picLength / 5;
$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({
"left": -700 * Math.floor(index)
}, 500)
}
$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({
'left': -700 * Math.floor(index)
}, 500);
circleChange();
});
// 动态生成小点点
var picData = $(".bough-pics>ul>li");
var html = '';
for (var i = 0; i < picData.length; i++) {}
var data_suo = Math.ceil(i / 5);
for (var i = 0; i < data_suo; i++) {
html += '<em>' + i + '</em>'
$('.bough-little span').html(html);
}
// 小圆点点击
$(".bough-little span em").each(function (i) {
$(this).click(function () {
index = i;
$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({
"left": -700 * index
}, 500);
circleChange();
});
});
// 监听小点点的变化
function circleChange() {
var id_b = index;
if (id_b > picLength / 5) {
id_b = 0;
}
$(".bough-little span em").eq(parseInt(id_b)).addClass("dyui-bk dyui-br").siblings("em").removeClass("dyui-bk dyui-br");
}
circleChange();
})
网友评论