您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
原生js实现自适应全屏轮播
发布时间：2017-03-19 14:26:18编辑：雪饮阅读（）
Js部分
function lunbo(){
var lunbo=document.getElementById("lunbo");
var box=document.getElementById("box");
//父级容器宽度
var parent_width=box.clientWidth;
//计算图片数量
var imgs=0;
for(var i=0;i<lunbo.childNodes.length;i++){
if(lunbo.childNodes[i].nodeName=="IMG"){imgs++;
console.log(lunbo.childNodes[i].clientWidth);
lunbo.childNodes[i].style.width=box.clientWidth+"px";
//图片的宽度等于其父级父级(爷爷)容器的宽度
}
}
//图片父级容器的宽度等于图片数量*图片父级父级（爷爷）容器的宽度
lunbo.style.width=box.clientWidth*imgs+"px";
var left=parseInt(lunbo.style.left);
if(left>0){
if(left<parent_width*(imgs-1)){lunbo.style.left=left+parent_width+"px";}
else{lunbo.style.left="0px";}
}
else{
if(left>-parent_width*(imgs-1)){lunbo.style.left=left-parent_width+"px";}
else{lunbo.style.left="0px";}
}
}
setInterval("lunbo()",1000);
function init(){
//初始化商品图片
var lunbo=document.getElementById("lunbo");
var box=document.getElementById("box");
var imgs=0;
for(var i=0;i<lunbo.childNodes.length;i++){
if(lunbo.childNodes[i].nodeName=="IMG"){imgs++;
console.log(lunbo.childNodes[i].clientWidth);
lunbo.childNodes[i].style.width=box.clientWidth+"px";
//图片的宽度等于其父级父级(爷爷)容器的宽度
}
}
lunbo.style.width=box.clientWidth*imgs+"px";
}
Html部分
<body onload="init()">
<div id="box">
<div id="lunbo" style="width:360px;position:relative;left:0px;height:10rem;">
{loop $goodimgs $k $v}
<img onClick="dan(this);" src="{$v}" style="width:320px;"/>
{/loop}
</div>
</div>
</body>
</html>
关键字词：js,轮播