移动端图片无缝滚动是如何实现的？（代码）
本篇文章给大家带来的内容是关于移动端图片无缝滚动是如何实现的？（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!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 + 'px';
//阻止pc和浏览器默认行为。
document.addEventListener（'touchstart',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工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
CSS实现无缝滚动效果的技巧和方法
Oct 25, 2023 pm 12:31 PM
CSS实现无缝滚动效果的技巧和方法，需要具体代码示例随着互联网技术的发展，无缝滚动效果在网页设计中被广泛应用。它可以给用户带来更好的浏览体验，也能增加网页的动感和视觉效果。在本文中，我将介绍几种常用的CSS实现无缝滚动效果的技巧和方法，并提供具体的代码示例。使用CSS动画实现无缝滚动效果CSS动画是实现无缝滚动效果的一种简单且高效的方法。我们可以使用@key
如何使用CSS制作无缝滚动的文字轮播的效果
Oct 25, 2023 am 10:24 AM
如何使用CSS制作无缝滚动的文字轮播的效果，需要具体代码示例随着互联网的发展和设计人员对用户体验的要求不断提高，网站上的文字轮播效果已经成为常见的展示形式之一。文字轮播能够吸引用户的目光，增加页面的动感和活力，提升用户对内容的关注度。在本文中，我将向大家介绍如何使用CSS制作一个无缝滚动的文字轮播效果，并提供具体的代码示例。在制作无缝滚动的文字轮播效果前，我
如何通过纯CSS实现无缝滚动新闻的方法和技巧
Oct 19, 2023 am 10:46 AM
如何通过纯CSS实现无缝滚动新闻的方法和技巧随着Web技术的不断发展，如何通过CSS实现一些炫酷的效果成为了前端开发者们的追求。本文将介绍如何通过纯CSS实现无缝滚动新闻的方法和技巧，并提供具体的代码示例。一、实现思路无缝滚动新闻效果的实现思路一般有两种：使用CSS动画和使用CSS3的transform属性。下面我们将逐一介绍这两种方法。1.使用CSS动画C
如何使用Vue实现无缝滚动广告特效
Sep 21, 2023 am 11:24 AM
如何使用Vue实现无缝滚动广告特效在现代的网页设计中，无缝滚动广告特效已经变得非常流行。这种特效能够吸引用户的注意力，同时展示多个广告内容。Vue是一个流行的JavaScript框架，它提供了简单而可靠的方式来实现这种特效。本文将向你展示如何使用Vue来创建一个无缝滚动广告效果，并提供具体的代码示例。第一步：创建Vue组件首先，我们需要创建一个Vue组件来实
如何使用CSS制作无缝滚动的文字展示效果的实现步骤
Oct 21, 2023 am 09:10 AM
如何使用CSS制作无缝滚动的文字展示效果的实现步骤在网页设计中，无缝滚动的文字展示效果给人们带来了更加流畅和吸引人的用户体验。这种效果通常用于轮播图、滚动新闻等场景。本文将介绍一种使用CSS实现无缝滚动的文字展示效果的具体步骤，并提供相关的代码示例。步骤一：创建HTML结构首先，我们需要创建一个包含滚动文字的容器元素。可以是div、ul或者其他的HTM
如何使用CSS制作无缝滚动的图片轮播的效果
Oct 20, 2023 pm 03:37 PM
如何使用CSS制作无缝滚动的图片轮播效果随着互联网的发展和人们对美观性的追求，图片轮播已经成为网页设计中常见的元素之一。无缝滚动的图片轮播效果能够吸引用户的注意力，增加页面的互动性和视觉效果。在本文中，我们将介绍如何使用CSS来实现无缝滚动的图片轮播效果，并提供具体的代码示例。首先，我们需要准备一些基本的HTML结构。我们可以使用一个包含多个图片的容器，并使
如何使用CSS制作无缝滚动的图片展示栏的效果
Oct 16, 2023 am 08:09 AM
如何使用CSS制作无缝滚动的图片展示栏的效果随着互联网的发展，图片展示成为了很多网站设计中必不可少的一部分。而无缝滚动的图片展示栏效果，更是能够吸引用户目光，提升网站的视觉效果和用户体验。在本文中，我将向您介绍如何使用CSS来实现无缝滚动的图片展示栏效果，并提供具体的代码示例。实现无缝滚动的图片展示栏效果主要依赖于CSS的动画属性和布局。下面是实现该效果的步
如何使用HTML、CSS和jQuery实现无缝滚动的新闻通知
Oct 25, 2023 am 11:55 AM
如何使用HTML、CSS和jQuery实现无缝滚动的新闻通知在当今信息爆炸的时代，新闻通知成为人们获取即时信息的重要途径之一。网页上的新闻通知栏能够吸引用户的注意力，并提供重要和令人感兴趣的内容。本文将介绍如何使用HTML、CSS和jQuery来实现一个无缝滚动的新闻通知栏，并附带具体代码示例。一、HTML结构：在HTML文件中，我们首先需要建立一个包含新闻
