Web Front-end
HTML Tutorial
How to achieve seamless scrolling of images on mobile terminals? (code)
How to achieve seamless scrolling of images on mobile terminals? (code)
The content of this article is about how to achieve seamless scrolling of images on the mobile terminal? (code), it has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
<!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>The above is how to achieve seamless scrolling of mobile images? (Code) full introduction, if you want to know more about HTML video tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How to achieve seamless scrolling of images on mobile terminals? (code). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Tips and methods to achieve seamless scrolling effect with CSS
Oct 25, 2023 pm 12:31 PM
CSS techniques and methods to achieve seamless scrolling effects require specific code examples. With the development of Internet technology, seamless scrolling effects are widely used in web design. It can bring users a better browsing experience and can also increase the dynamics and visual effects of web pages. In this article, I will introduce several commonly used CSS techniques and methods to achieve seamless scrolling effects, and provide specific code examples. Use CSS Animation to Achieve Seamless Scroll Effect CSS animation is a simple and efficient way to achieve seamless scrolling effect. We can use @key
How to use CSS to create a seamless scrolling text carousel effect
Oct 25, 2023 am 10:24 AM
How to use CSS to create a seamless scrolling text carousel effect requires specific code examples. With the development of the Internet and designers' increasing requirements for user experience, the text carousel effect on websites has become one of the common display forms. Text carousels can attract users' attention, increase the dynamics and vitality of the page, and increase users' attention to the content. In this article, I will introduce you to how to use CSS to create a seamless scrolling text carousel effect, and provide specific code examples. Before creating a seamless scrolling text carousel effect, I
Methods and techniques for achieving seamless scrolling news through pure CSS
Oct 19, 2023 am 10:46 AM
Methods and techniques on how to achieve seamless scrolling news through pure CSS. With the continuous development of Web technology, how to achieve some cool effects through CSS has become the pursuit of front-end developers. This article will introduce methods and techniques on how to achieve seamless scrolling news through pure CSS, and provide specific code examples. 1. Implementation ideas There are generally two ideas for implementing seamless scrolling news effects: using CSS animation and using the transform attribute of CSS3. Below we will introduce these two methods one by one. 1. Use CSS animation C
How to use Vue to achieve seamless scrolling advertising effects
Sep 21, 2023 am 11:24 AM
How to use Vue to implement seamless scrolling advertising effects In modern web design, seamless scrolling advertising effects have become very popular. This special effect can attract users' attention and display multiple advertising contents at the same time. Vue is a popular JavaScript framework that provides a simple and reliable way to achieve this effect. This article will show you how to use Vue to create a seamless scrolling ad effect and provide specific code examples. Step 1: Create a Vue component First, we need to create a Vue component to implement
How to use CSS to create a seamless scrolling image carousel effect
Oct 20, 2023 pm 03:37 PM
How to use CSS to create a seamless scrolling image carousel effect. With the development of the Internet and people's pursuit of aesthetics, image carousels have become one of the common elements in web design. The seamless scrolling image carousel effect can attract users' attention and increase the interactivity and visual effect of the page. In this article, we will introduce how to use CSS to achieve a seamless scrolling image carousel effect, and provide specific code examples. First, we need to prepare some basic HTML structure. We can use a container containing multiple images and make
How to use CSS to create a seamless scrolling text display effect.
Oct 21, 2023 am 09:10 AM
Steps to implement how to use CSS to create a seamless scrolling text display effect. In web design, the seamless scrolling text display effect brings people a smoother and more attractive user experience. This effect is usually used in scenes such as carousels and scrolling news. This article will introduce specific steps to use CSS to achieve seamless scrolling text display effects, and provide relevant code examples. Step 1: Create the HTML structure First, we need to create a container element that contains the scrolling text. It can be div, ul or other HTM
How to use CSS to create a seamless scrolling image display bar effect
Oct 16, 2023 am 08:09 AM
How to use CSS to create a seamless scrolling image display bar. With the development of the Internet, image display has become an indispensable part of many website designs. The seamless scrolling image display bar effect can attract users' attention and improve the visual effect and user experience of the website. In this article, I will introduce you to how to use CSS to achieve a seamless scrolling image display bar effect, and provide specific code examples. The effect of achieving seamless scrolling of the picture display bar mainly relies on the animation properties and layout of CSS. Here are the steps to achieve this effect
How to achieve seamless scrolling news notifications using HTML, CSS and jQuery
Oct 25, 2023 am 11:55 AM
How to use HTML, CSS and jQuery to implement seamless scrolling news notifications. In today's era of information explosion, news notifications have become one of the important ways for people to obtain instant information. News notification bars on web pages can attract users' attention and provide important and interesting content. This article will introduce how to use HTML, CSS and jQuery to implement a seamless scrolling news notification bar, with specific code examples. 1. HTML structure: In the HTML file, we first need to create a
