登录  /  注册

移动端图片无缝滚动是如何实现的?(代码)

PHPz
发布: 2018-10-15 15:12:53
转载
2075人浏览过

本篇文章给大家带来的内容是关于移动端图片无缝滚动是如何实现的?(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<script type="text/javascript">
//获取html
var html = document.documentElement;
//设置html的字体大小 = 可视区的宽度 / 15
html.style.fontSize = html.clientWidth / 15 + &#39;px&#39;;
//阻止pc和浏览器默认行为。
document.addEventListener(&#39;touchstart&#39;,function(ev){
ev.preventDefault();
});
</script>
<style>
body{
margin: 0;
}
.wrap{
height: 4.68rem;
position: relative;
}
.list{
padding: 0;
margin: 0;
width:400%;
position: absolute;
top:0;
left:0;
list-style: none;
}
.list li{
float: left;
width:15rem;
}
.list img{
width:15rem;
display: block;
}
nav{
width:15rem;
height: 10px;
position: absolute;
bottom:5px;
z-index: 1;
text-align:center;
}
nav a{
width:15px;
height: 15px;
display: inline-block;
background: red;
border-radius:50%;
vertical-align:top;
}
nav a.active{
background:#fff;
}
</style>
</head>
<body>
<section>
<ul>
<li>
<img src="img/img.jpg" alt="" />
</li>
<li>
<img src="img/img2.jpg" alt="" />
</li>
<li>
<img src="img/img3.jpg" alt="" />
</li>
<li>
<img src="img/img4.jpg" alt="" />
</li>
</ul>
<nav>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</nav>
</section>
<script type="text/javascript">
var wrap=document.getElementsByClassName("wrap")[0],
list=document.getElementsByClassName("list")[0],
disX=0,
listL=0,
n=0,
w=wrap.clientWidth,
s=0,
timer=0;
a=document.getElementsByTagName("a");
list.addEventListener("touchstart",start);
list.addEventListener("touchmove",move);
list.addEventListener("touchend",end);
list.innerHTML+=list.innerHTML;
len=list.children.length;
console.log(len);
list.style.width=w*len+"px";
function start(ev){
clearInterval(timer);
var e=ev.changedTouches[0];
disX=e.pageX;
list.style.transition="none";
var num=Math.round(list.offsetLeft/w);
list.style.left=num*w+"px";
if(num==0){
num=a.length;
list.style.left=-num*w+"px";
}
if(-num==len-1){
num=a.length-1;
list.style.left=-num*w+"px";
}
listL=this.offsetLeft;
}
function move(ev){
var e=ev.changedTouches[0];
list.style.left=(e.pageX-disX)+listL+"px";
}
function end(){
var num=Math.round(list.offsetLeft/w);
console.log(num)
list.style.transition="0.5s";
list.style.left=num*w+"px";
a[n].className="";
a[(-num)%a.length].className="active";
n=(-num)%a.length;
timer=setInterval(function(){
inn();
},1000)
s=-num;
}
timer=setInterval(function(){
inn();
},1000)
function inn(){
s++;
list.style.left=-s*w+"px";
list.style.transition="0.5s";
console.log(s);
if(s>len-1){
s=a.length-1;
list.style.transition="none";
list.style.left=-s*w+"px";
console.log(list.style.left);
setTimeout(function(){
list.style.transition="0.5s";
s++;
list.style.left=-s*w+"px";
a[n].className="";
a[s%a.length].className="active";
n=s%a.length;
},30)
}
a[n].className="";
a[s%a.length].className="active";
n=s%a.length;
}
</script>
</body>
</html>
登录后复制

以上就是对移动端图片无缝滚动是如何实现的?(代码)的全部介绍,如果您想了解更多有关HTML视频教程,请关注PHP中文网。

以上就是移动端图片无缝滚动是如何实现的?(代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:cnblogs网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号