甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

简单实现js轮播图效果

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

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

html结构




 
 Document

js

(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://chengdu.cdxwcx.cn/article/jschpe.html

    其他资讯