您好,登錄后才能下訂單哦!
本篇文章為大家展示了使用iscroll4怎么實(shí)現(xiàn)一個(gè)輪播圖效果,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
一、html代碼,當(dāng)然可以動(dòng)態(tài)添加下面的小圓點(diǎn)
<div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li> <li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li> <li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li> <li><strong>4Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li> </ul> </div> </div> <div id="nav"> <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">← prev</div> <ul id="indicator"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div> </div>
二、css代碼
<style type="text/css" media="all"> 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; } </style>
三、js代碼(這里我用的jquery 做的測(cè)試,你也可以根據(jù)自己的喜好選擇其他庫(kù))
<script src="js/jquery.js"></script> <script src="js/iscrollc.js"></script> <script type="text/javascript"> 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秒滾動(dòng) i++; if(i==oli_l){ i=0; myScroll.scrollToPage(0, 0, 1000); //滾回第一頁(yè) } else { myScroll.scrollToPage('next', 0); }; document.title=i }; }; document.addEventListener('DOMContentLoaded', loaded, false); </script>
html 和css不用說(shuō),都是行家,主要是js,首先是初始化,再根據(jù)iscorll提供的API修改相應(yīng)的代碼,這里主要用刀onBeforeScrollStart,onScrollEnd,onTouchEnd這三個(gè)事件,同時(shí)結(jié)合scrollToPage(),currPageX事件進(jìn)行對(duì)應(yīng)的定時(shí)修改,滑動(dòng)之后同步自動(dòng)滾動(dòng)的頁(yè)數(shù),就ok了,其實(shí)寫這個(gè)主要是熟悉API。。。
上述內(nèi)容就是使用iscroll4怎么實(shí)現(xiàn)一個(gè)輪播圖效果,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。