使用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.

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; }

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);

大橙子网站建设，新征程启航

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

其他资讯