【案例】图片无缝轮播效果
知識(shí)點(diǎn)：
1、scrollLeft屬性
2、克隆節(jié)點(diǎn)
3、定時(shí)器
4、鼠標(biāo)移入移除事件
?
<!DOCTYPE html>
<html lang="en">
<head>
??????? <meta charset="UTF-8">
??????? <title>無(wú)縫輪播</title>
??????? <style>
???????????????? *{
???????????????????????? margin: 0;
???????????????????????? padding: 0;
???????????????? }
???????????????? body{
???????????????????????? background:#000;
???????????????? }
???????????????? li{
???????????????????????? list-style: none;
???????????????? }
???????????????? #show{
???????????????????????? width: 940px;
???????????????????????? height: 450px;
???????????????????????? margin: 0 auto;
???????????????????????? margin-top: 60px;
???????????????????????? /* overflow-x: scroll; */
???????????????????????? overflow: hidden;
???????????????? }
???????????????? #show #wrap{
???????????????????????? width: 7520px;
???????????????????????? height: 450px;
???????????????? }
???????????????? #show #wrap ul{
???????????????????????? width: 3760px;
???????????????????????? height: 450px;
???????????????????????? float: left;
???????????????? }
???????????????? #show #wrap ul>li{
???????????????????????? float: left;
???????????????? }
??????? </style>
</head>
<body>
??????? <div id="show">?????
???????????????? <div id="wrap">
???????????????????????? <ul>
????????????????????????????????? <li><img src="./images/a.jpg" alt=""></li>
????????????????????????????????? <li><img src="./images/c.jpg" alt=""></li>
????????????????????????????????? <li><img src="./images/b.jpg" alt=""></li>
????????????????????????????????? <li><img src="./images/d.jpg" alt=""></li>
???????????????????????? </ul>
???????????????????????? <!-- <ul>
????????????????????????????????? <li><img src="./images/a.jpg" alt=""></li>
????????????????????????????????? <li><img src="./images/c.jpg" alt=""></li>
????????????????????????????????? <li><img src="./images/b.jpg" alt=""></li>
????????????????????????????????? <li><img src="./images/d.jpg" alt=""></li>
???????????????????????? </ul> -->
???????????????? </div>
??????? </div>
</body>
<script>
??????? var show = document.getElementById('show');
??????? var ul = document.querySelector('ul');
??????? var wrap = document.getElementById('wrap');
??????? var ulWidth = ul.offsetWidth;
??????? console.log(ulWidth);
?
??????? //克隆ul并追加到wrap
??????? wrap.appendChild(ul.cloneNode(true));
??????? //設(shè)置無(wú)縫輪播的步徑
??????? var step = 1;
??????? //設(shè)置輪播標(biāo)志
??????? var run;
??????? //將無(wú)縫輪播封裝為一個(gè)函數(shù)
??????? function autoRun(){
???????????????? run = setInterval(function(){
????????????????????????????????? var newScroolLeft = show.scrollLeft + step;
????????????????????????????????? if(newScroolLeft >= ulWidth){
????????????????????????????????????????? newScroolLeft = 0;
????????????????????????????????? }
????????????????????????????????? show.scrollLeft = newScroolLeft + step;
???????????????????????? },20);
??????? }
??????? //設(shè)置頁(yè)面進(jìn)入初始化
??????? autoRun();
??????? //鼠標(biāo)移入停止輪播
??????? show.onmouseenter = function(){
???????????????? clearInterval(run);
??????? }
??????? //鼠標(biāo)離開(kāi)繼續(xù)輪播
??????? show.onmouseleave = function(){
???????????????? autoRun();
??????? }
</script>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/sherryStudy/p/wufneg_lunbo.html
總結(jié)
以上是生活随笔為你收集整理的【案例】图片无缝轮播效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Chrome新的语言API，让您的浏览器
- 下一篇： C语言_函数【转】