好资源导航 » 文章资讯 » 简单实现js轮播图效果

简单实现js轮播图效果

2024-02-05 02:00:03 66

本文实例为大家分享了js实现轮播图效果展示的具体代码，供大家参考，具体内容如下

html结构





Document

(function(){
varbanner=document.getElementById('banner');
varbannerInner=utils.firstChild(banner);
varbannerTip=utils.children(banner,'ul')[0];
varimgList=bannerInner.getElementsByTagName('img');
varoLis=bannerTip.getElementsByTagName('li');
varbannerLeft=utils.children(banner,'a')[0];
varbannerRight=utils.children(banner,'a')[1];
//实现数据绑定：Ajax请求数据、按照字符串拼接的方式绑定数据
varjsonData=null,count=null
~function(){
varxhr=newXMLHttlRequest;
xhr.open('get',"json/banner.txt?_="+Math.random(),false);
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){
jsonData=utils.formatJSON(xhr.responseText);
}
}
xhr.send(null);
}()

~function(){
//绑定轮播图区域的数据
varstr="";
if(jsonData){
for(vari=0,len=jsonData.length;i

' } //为了实现无缝滚动，需要把第一张克隆一份放在末尾 str+='

' } bannerInner.innerHTML=str; count=jsonData.length+1; utils.css(bannerInner,"width",count*1000); //绑定焦点区域的数据 str=''; if(jsonData){ for(vari=0,len=jsonData.length;i':str+='

'; } } bannerTip.innerHTML=str; }() //图片延迟加载 functionlazyImg(){ for(vari=0,len=imgList.length;ioLis.length-1?0:step; for(vari=0,len=oLis.length;i

绑定的数据

[
{"img":"http://www.haoziyuan.ccimg/banner1.jpg","desc":"第一张轮播图"},
{"img":"http://www.haoziyuan.ccimg/banner2.jpg","desc":"第二张轮播图"},
{"img":"http://www.haoziyuan.ccimg/banner3.jpg","desc":"第三张轮播图"},
{"img":"http://www.haoziyuan.ccimg/banner4.jpg","desc":"第四张轮播图"}
]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

简单实现js轮播图效果

热门推荐

随机推荐