html之动态添加控件实现轮播

最近做一个轮播功能

上图用红框标的就是要实现的轮播功能，
先是写静态页面
<div id="slide" class="slide" class="index-slide">

<div class="img">
<p class="prizeN">20元生日福袋优惠券</p>
</div>
<div class="img">
<p class="prizeN">20元端午福袋优惠券-</p>
</div>
<div class="img">
<p class="prizeN">10元鲜花水果福袋优惠券</p>
</div>
<div class="img">
<p class="prizeN">20元尚优家居福袋优惠券</p>
</div>
<div class="img">

<p class="prizeN">10元女神福袋优惠券</p>
</div>

<div class="img">
<p class="prizeN">5元出行福袋优惠券</p>
</div>
<div class="img">
<p class="prizeN">50元尚优家居福袋优惠券</p>
</div>
<div class="img">
<p class="prizeN">天士力宁夏枸杞50g-抵用券</p>
</div>
</div>

---

css中样式：
.slide{
width: 100%;
min-height: 370px;
overflow: hidden;
position: relative;
}
.slide .img{
overflow: hidden;
position: absolute;
transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s,z-index 0.4s;
-webkit-transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s,z-index 0.4s;
}
.slide .img img{
width: calc(100% - 14px);
height: calc(100% - 54px);
margin: 7px;
transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s,z-index 0.4s;
-webkit-transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s,z-index 0.4s;

}
.slide .img p{
width: 100%;
margin: 0px;
text-align: center;
color: white;
font-weight: lighter;
}
.slide .img1{
width: 184.7px;
height: 150px;
top: 80px;
left: -85px;
z-index: 1;
}
.img1 p , .img5 p{
font-size: 14px;

}
.img2 p , .img4 p{
font-size: 17px;
}
.slide .img2{
width: 233.9px;
height: 190px;
top: 60px;
left: 95px;
z-index: 2;
}
.slide .img3{
width: 431px;
height: 350px;
top: -20px;
left: 315px;
z-index: 3;
}
.slide .img3 img{
width: 431px;
height: 350px;
}
.slide .img4{
width: 233.9px;
height:190px;
top: 60px;
left: 745px;
z-index: 2;
}
.slide .img5{
width: 184.7px;
height: 150px;
top: 80px;
left: 995px;
z-index: 2;
}
.slide .img6{
width: 184.7px;
height: 150px;
top: 80px;
left: 1265px;
z-index: 1;
}
js中的代码来控制轮播

var autoLbtime = 1; //autoLbtime为轮播间隔时间（单位秒）
var slideNub; //轮播图片数量
var slideBt = true; //slideBt=true为开启滚动按钮
// //窗口大小改变时改变轮播图宽高
// $(window).resize(function(){
// $(".slide").height($(".slide").width()*0.56);
// });

$(function(){
$(".slide").height($(".slide").width()0.56);
slideNub = $(".slide .img").size(); //获取轮播图片数量
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
};
//根据轮播图片数量设定图片位置对应的class
if(slideNub==1){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img3");
}
};
if(slideNub==2){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+3));
}
};
if(slideNub==3){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+2));
}
};
if(slideNub>3&&slideNub<7){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+1));
}
};
if(slideNub>=7){
for(i=0;i<slideNub;i++){
if(i<6){
$(".slide .img:eq("+i+")").addClass("img"+(i+1));
}else{
$(".slide .img:eq("+i+")").addClass("img6");
}
}
};
//根据轮播图片数量设定轮播图按钮数量
if(slideBt){
for(i=1;i<=slideNub;i++){
$(".slide-bt").append("<span data-slide-bt='"+i+"' onclick='tz("+i+")'></span>");
}
$(".slide-bt").width(slideNub34);
$(".slide-bt").css("margin-left","-"+slideNub*17+"px");
}
})

//右滑动
function right(){
var fy = new Array();
for(i=0;i<slideNub;i++){
fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
if(i==0){
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
}else{
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]);

}
console.log(fy[slideNub - 1]);
}
slideLi();
};

//根据当前最中间图片对应的产品名赋值
function slideLi(){
showprizeT(prizeTitle[parseInt($(".slide .img3").attr("data-slide-imgId"))]);
}

//左滑动
function left(){
var fy = new Array();
for(i=0;i<slideNub;i++){
fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
if(i==(slideNub-1)){
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
}else{
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]);
}
}

}
这样就完成了轮播的功能。
随后，产品说这些图片啥的要由后台提供。好吧，那就动态来添加控件吧。
无非是在js中获取后台的数据，再通过数据来添加控件，完成功能。
**js **动态添加控件
假数据：
var prizeTitle = ["20元生日福袋优惠券","20元端午福袋优惠券",
"10元鲜花水果福袋优惠券","20元尚优家居福袋优惠券",
"10元女神福袋优惠券","5元出行福袋优惠券",
"50元尚优家居福袋优惠券","天士力宁夏枸杞50g-抵用券"];
var prizeImgA = ["images/prize/b_fudaibirthdy.png","images/prize/b_fudaiduanwu.png",
"images/prize/b_fudaiff.png","images/prize/b_fudaishangyou.png",
"images/prize/b_fudaigod.png","images/prize/b_fudaiout.png",
"images/prize/b_fudaishangyouf.png","images/prize/b_gouqi.png"];
dynamicAddScrolElements(prizeTitle,prizeImgA);
//动态添加轮播图片
function dynamicAddScrolElements(prizeTitle,prizeImgA){
showprizeT(prizeTitle[2]);
var elements = '';
for (var i = 0; i <prizeImgA.length; i++) {
var src = prizeImgA[i];
elements += '<div class="img">' +
'<p class="prizeN">' + prizeTitle[i] + '</p>' +
'</div>';
}
$('#slide').html(elements);
其中dynamicAddScrolElements是动态添加控件的函数方法。for循环里面就是将原来的class为img的图片动态添加到slide容器中，只是将原静态代码复制过来加以修改即可。
除此，在for循环里也可以：
var div = document.createElement('div');
div.classList.add('img');//添加一个类名
// div.setAttribute('class', 'img');
// div.style.cssText = "background = red;overflow: hidden;position: absolute;transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s,z-index 0.4s;-webkit-transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s,z-index 0.4s;";
slide.appendChild(div);
//img
var img = new Image();
// img.src = src;
img.setAttribute('src', src);
// img.style.cssText="width: calc(100% - 14px);height: calc(100% - 54px);margin: 7px;transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s,z-index 0.4s;-webkit-transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s,z-index 0.4s;";
div.appendChild(img);
//des
var p = document.createElement('p');
// p.style.cssText = "width: 100%;margin: 0px;text-align: center;color: white;font-weight: lighter;";
div.appendChild(p);
var t = document.createTextNode(prizeTitle[i]);
p.appendChild(t);