最新消息:文章中包含代码时,请遵守代码高亮规范!

根据轮播图的图片个数动态生成小圆点【原创】

JavaScript Aimee 106浏览 0评论

在手机端和PC端都需要用到轮播图,然而轮播图的图片个数不是固定的,这就使得控制轮播图的小圆点按钮的个数无法确定,因此,无法自由变换小圆点在页面中的位置,这一点让人颇为头疼。我使用JS解决了这个问题,接下来分享一下我的思路:

1.利用js统计轮播图个数,运用for循环语句得出小圆点按钮的个数。

2.计算所有小圆点的总长度,包括margin值;加上小圆点透明背景的padding值,可得出小圆点透明背景的总长度;

3.自由调整校园的位置,在此例中,小圆点位于轮播图下方,并横向居中排列。

4.可根据页面需求更改轮播图大小,位置,小圆点按钮的大小,间距,位置。

具体代码如下:

HTML代码

1
2
3
4
5
6
7
<div id=”box”>
<ul>
<div class=”image”><img src=”img/1.jpg” alt=”” ></div>
<div class=”image”><img src=”img/2.jpg” alt=”” ></div>
<div class=”image”><img src=”img/3.jpg” alt=”” ></div>
<div class=”image”><img src=”img/4.jpg” alt=”” ></div>
</ul>
<div id=”button”></div>
</div>

CSS代码

1
2
3
4
5
6
7
*{margin:0;padding:0;list-style: none;}
#box{width:600px;height:auto;margin:0 auto;position:relative;}
#box ul{width:600px;height:300px;overflow:hidden;}
#button {height:13px;border-radius:6px;padding:0px 10px;position:absolute;top:270px;background-color: rgba(255,255,255,0.5);}
#button span { width: 7px; height: 7px;cursor: pointer;background:#fff; border-radius: 50%; display:block;margin-right:4px ; float:left;margin-top:3px;}
#button span:last-child{margin-right: 0px;}
#button .on{background: #cd1324;}

JS代码

$(function(){
// 焦点图js样式
window .onload=function(){
TouchSlide({
slideCell:”#box”,
mainCell:”#box ul”,
autoPlay:true,
titCell:”#button span”,
effect:”leftLoop”
});
$(‘.image’).show();
};
// 获取图片个数,确定小圆点个数和小圆点透明背景的长度
var len = $(“.image”).length;
var length = len*11+20-4;
var width = $(“#box>ul”).width();
var left = width*0.5 – (len*11+20-4)/2;
var html = ”;
for(var i=1;i<len+1;i++){
html+='<span index=”i” class=”on”></span>’;
}
$(“#button”).append(html);
$(“#button”).css(“left”,left);
})

 

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22292.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者aimee123的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!