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

来源：互联网发布：java web信息管理系统编辑：程序博客网时间：2024/05/14 05:37

最近做一个轮播功能

上图用红框标的就是要实现的轮播功能，

先是写静态页面

<p class="prizeN">20元生日福袋优惠券</p>

</div>

<p class="prizeN">20元端午福袋优惠券-</p>

</div>

<p class="prizeN">10元鲜花水果福袋优惠券</p>

</div>

<p class="prizeN">20元尚优家居福袋优惠券</p>

</div>

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

</div>

<p class="prizeN">5元出行福袋优惠券</p>

</div>

<p class="prizeN">50元尚优家居福袋优惠券</p>

</div>

<p class="prizeN">天士力宁夏枸杞50g-抵用券</p>

</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(slideNub*34);

$(".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"><img src="' + src + '"/>' +

'<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);

阅读全文

1 0