Flask接口签名sign原理与实例代码浅析
227
2023-06-19
利用iscroll4实现轮播图效果实例代码
前言
iscroll之所以会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样,在使用iscroll的是时候只知道可以手动滑动,不知道iscroll的轮播怎么实现,那么以下就是我做的一个轮播效果,亲测有效;
一、html代码,当然可以动态添加下面的小圆点
二、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%;
FHREbJrQheight: 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-FHREbJrQborder-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。。。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用iscorll能带来一定的帮助,如果有疑问大家可以留言交流。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~