當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】图片组无缝轮播的网页编写方法
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】图片组无缝轮播的网页编写方法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
網(wǎng)頁源碼
僅提供HTML文檔，不提供CSS和JavaScript文檔：
<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>安妮 英雄主頁</title><link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/vector.js"></script><style type="text/css">#demo {overflow:hidden;border: 1px dashed #CCC;width: 1000px;height:500px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}#indemo {float: left;clear:both;width: 800%;}#demo1 {float: left;clear:both;}#demo2 {float: left;clear:both;}</style></head><body id="body"><div id="container"><div id="demo"><div id="indemo"><div id="demo1"><a href="#"><img src="1.jpg" border="0" /></a><a href="#"><img src="2.jpg" border="0" /></a><a href="#"><img src="3.jpg" border="0" /></a><a href="#"><img src="4.jpg" border="0" /></a><a href="#"><img src="5.jpg" border="0" /></a><a href="#"><img src="1.jpg" border="0" /></a></div><div id="demo2"></div></div></div></div><script type="text/javascript">Victor("body", "container");</script><script type="text/javascript">$(function() {var speed=1;var tab0=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function marquee() {if (tab2.offsetWidth-tab0.scrollLeft<=1000) {tab0.scrollLeft=0;} else {tab0.scrollLeft++;}}var myMar=setInterval(marquee,speed);tab0.onmouseover=function() {clearInterval(myMar)};tab0.onmouseout=function() {myMar=setInterval(marquee,speed)};});</script></body> </html>圖片
使用了LOL安妮的五張皮膚圖片：
效果圖
簡要分析
在自己寫了第一版本以后，網(wǎng)上搜了搜，發(fā)現(xiàn)普遍的問題是：必須滾動(dòng)完才能重來。這就意味著會(huì)有一段時(shí)間的空白期，這就顯得不好看。
我自己的處理方式也比較簡單，其實(shí)無非就是再把第一張圖片在末尾加一次，然后在判斷<=0的時(shí)候把0改為width。
這樣的話，比如這6張圖，會(huì)在第5切到6的時(shí)候重來，而實(shí)際有用的是前5張（第6張是冗余），然后就能完成所需的視覺效果了！
總結(jié)
以上是生活随笔為你收集整理的【JavaScript】图片组无缝轮播的网页编写方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【C语言】第八章 地址操作与指针 题解
- 下一篇： 【JavaScript】鼠标单击核心价值