简单实现js轮播图效果

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

创新互联建站自成立以来，一直致力于为企业提供从网站策划、网站设计、网站设计、网站建设、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

html结构




 
 Document

(function(){
 var banner = document.getElementById('banner');
 var bannerInner = utils.firstChild(banner);
 var bannerTip = utils.children(banner,'ul')[0];
 var imgList = bannerInner.getElementsByTagName('img');
 var oLis = bannerTip.getElementsByTagName('li');
 var bannerLeft = utils.children(banner,'a')[0];
 var bannerRight = utils.children(banner,'a')[1];
 //实现数据绑定：Ajax请求数据、按照字符串拼接的方式绑定数据
 var jsonData = null,count = null
 ~function(){
  var xhr = new XMLHttlRequest;
  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(){
  //绑定轮播图区域的数据
  var str = "";
  if(jsonData){
   for(var i = 0,len = jsonData.length;i

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

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

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

绑定的数据

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

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

文章题目：简单实现js轮播图效果
本文地址：http://csdahua.cn/article/jschpe.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

简单实现js轮播图效果

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

简单实现js轮播图效果

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们