资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用iscroll4怎么实现一个轮播图效果

本篇文章为大家展示了使用iscroll4怎么实现一个轮播图效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

创新互联专注于上蔡企业网站建设,自适应网站建设,电子商务商城网站建设。上蔡网站建设公司,为上蔡等地区提供建站服务。全流程定制网站开发,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

一、html代码,当然可以动态添加下面的小圆点


 
  
   
  • 1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.
  •    
  • 2. A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.
  •    
  • 3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.
  •    
  • 4Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.
  •     
     ← prev
        1   
  • 2
  •   
  • 3
  •   
  • 4
  •    next →

    二、css代码

    
    body, ul, li {
     padding: 10px;
     margin: 0;
    }
    body {
     font-size: 12px;
     -webkit-user-select: none;
     -webkit-text-size-adjust: none;
     font-family: helvetica;
    }
    #wrapper {
     width:100%;
     height: 160px;
     float: left;
     position: relative; /* On older OS versions "position" and "z-index" must be defined, */
     z-index: 1;   /* it seems that recent webkit is less picky and works anyway. */
     overflow: hidden;
     background: #aaa;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     background: #e3e3e3;
    }
    #scroller {
     /*width: 2100px;*/
     height: 100%;
     float: left;
     padding: 0;
    }
    #scroller ul {
     list-style: none;
     display: block;
     float: left;
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     text-align: left;
    }
    #scroller li {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
     box-sizing: border-box;
     display: block;
     float: left;
     /*width: 300px;*/
     height: 160px;
     text-align: center;
     font-family: georgia;
     font-size: 18px;
     line-height: 140%;
    }
    #nav {
     width:100%;
     float: left;
    }
    #prev, #next {
     float: left;
     font-weight: bold;
     font-size: 14px;
     padding: 5px 0;
     width: 80px;
    }
    #next {
     float: right;
     text-align: right;
    }
    #indicator, #indicator > li {
     display: block;
     float: left;
     list-style: none;
     padding: 0;
     margin: 0;
    }
    #indicator {
     width: 110px;
     padding: 12px 0 0 30px;
    }
    #indicator > li {
     text-indent: -9999em;
     width: 8px;
     height: 8px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -o-border-radius: 4px;
     border-radius: 4px;
     background: #ddd;
     overflow: hidden;
     margin-right: 4px;
    }
    #indicator > li.active {
     background: #888;
    }
    #indicator > li:last-child {
     margin: 0;
    }
    

    三、js代码(这里我用的jquery 做的测试,你也可以根据自己的喜好选择其他库)

    
    
    
     var myScroll;
     var timer;
     var i=0;
     var obj=$('#wrapper');
     var obj_w=obj.outerWidth(true);
     var oli=obj.find('li');
     var oli_l=oli.length;
     oli.outerWidth(obj_w);
     $('#scroller').width(oli_l*obj_w);
     function loaded() {
      myScroll = new iScroll('wrapper', {
       snap: true,
       momentum: false,
       hScrollbar: false,
       onScrollEnd: function () {
        document.querySelector('#indicator > li.active').className = '';
        document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
       },
       onBeforeScrollStart:function(){
        clearInterval(timer);
        },
       onTouchEnd:function(){
        timer=setInterval(gund,2000);
        i=myScroll.currPageX
        },
       });
    
     timer=setInterval(gund,2000); 
     function gund(){ //每5秒滚动
       i++;
       
       if(i==oli_l){
        i=0;
        myScroll.scrollToPage(0, 0, 1000); //滚回第一页
       } else {
        myScroll.scrollToPage('next', 0);
       };
       document.title=i
      }; 
     
    };
    document.addEventListener('DOMContentLoaded', loaded, false);
    

    html 和css不用说,都是行家,主要是js,首先是初始化,再根据iscorll提供的API修改相应的代码,这里主要用刀onBeforeScrollStart,onScrollEnd,onTouchEnd这三个事件,同时结合scrollToPage(),currPageX事件进行对应的定时修改,滑动之后同步自动滚动的页数,就ok了,其实写这个主要是熟悉API。。。

    上述内容就是使用iscroll4怎么实现一个轮播图效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


    文章题目:使用iscroll4怎么实现一个轮播图效果
    文章起源:http://www.cdkjz.cn/article/gsdico.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220