行動端圖片無縫滾動是如何實現的？ （代碼）
本篇文章帶給大家的內容是關於行動裝置圖片無縫滾動是如何實現的？ （程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
<!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脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++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製作一個無縫滾動的文字輪播效果，並提供具體的程式碼範例。在製作無縫滾動的文字輪播效果之前，我
如何使用Vue實現無縫滾動廣告特效
Sep 21, 2023 am 11:24 AM
如何使用Vue實現無縫滾動廣告特效在現代的網頁設計中，無縫滾動廣告特效已經變得非常流行。這種特效能夠吸引用戶的注意力，同時展示多個廣告內容。 Vue是一個流行的JavaScript框架，它提供了簡單而可靠的方式來實現這種特效。本文將向你展示如何使用Vue來創建一個無縫滾動廣告效果，並提供具體的程式碼範例。第一步：建立Vue元件首先，我們需要建立一個Vue元件來實
如何透過純CSS實現無縫滾動新聞的方法和技巧
Oct 19, 2023 am 10:46 AM
如何透過純CSS實現無縫滾動新聞的方法和技巧隨著Web技術的不斷發展，如何透過CSS實現一些酷炫的效果成為了前端開發者們的追求。本文將介紹如何透過純CSS實現無縫滾動新聞的方法和技巧，並提供具體的程式碼範例。一、實現思路無縫滾動新聞效果的實現思路一般有兩種：使用CSS動畫和使用CSS3的transform屬性。以下我們將逐一介紹這兩種方法。 1.使用CSS動畫C
如何使用CSS製作無縫滾動的圖片輪播的效果
Oct 20, 2023 pm 03:37 PM
如何使用CSS製作無縫滾動的圖片輪播效果隨著互聯網的發展和人們對美觀性的追求，圖片輪播已經成為網頁設計中常見的元素之一。無縫滾動的圖片輪播效果能夠吸引使用者的注意力，增加頁面的互動性和視覺效果。在本文中，我們將介紹如何使用CSS來實現無縫滾動的圖片輪播效果，並提供具體的程式碼範例。首先，我們需要準備一些基本的HTML結構。我們可以使用一個包含多個圖片的容器，並使
如何使用CSS製作無縫滾動的文字展示效果的實現步驟
Oct 21, 2023 am 09:10 AM
如何使用CSS製作無縫滾動的文字展示效果的實現步驟在網頁設計中，無縫滾動的文字展示效果給人們帶來了更加流暢和吸引人的用戶體驗。這種效果通常用於輪播圖、滾動新聞等場景。本文將介紹一種使用CSS實現無縫滾動的文字展示效果的具體步驟，並提供相關的程式碼範例。步驟一：建立HTML結構首先，我們需要建立一個包含滾動文字的容器元素。可以是div、ul或其他的HTM
如何使用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檔案中，我們首先需要建立一個包含新聞
