【案例】圖片無縫輪播效果

知識點：

1、scrollLeft屬性

2、克隆節點

3、定時器

4、鼠標移入移除事件

<!DOCTYPE html>

<head>

??????? <meta charset="UTF-8">

??????? <title>無縫輪播</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>

??????? 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));

??????? //設置無縫輪播的步徑

??????? var step = 1;

??????? //設置輪播標志

??????? var run;

??????? //將無縫輪播封裝為一個函數

??????? function autoRun(){

???????????????? run = setInterval(function(){

????????????????????????????????? var newScroolLeft = show.scrollLeft + step;

????????????????????????????????? if(newScroolLeft >= ulWidth){

????????????????????????????????????????? newScroolLeft = 0;

????????????????????????????????? }

????????????????????????????????? show.scrollLeft = newScroolLeft + step;

???????????????????????? },20);

??????? }

??????? //設置頁面進入初始化

??????? autoRun();

??????? //鼠標移入停止輪播

??????? show.onmouseenter = function(){

???????????????? clearInterval(run);

??????? }

??????? //鼠標離開繼續輪播

??????? show.onmouseleave = function(){

???????????????? autoRun();

??????? }

</script>

</html>

轉載于:https://www.cnblogs.com/sherryStudy/p/wufneg_lunbo.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/448856.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/448856.shtml
英文地址，請注明出處：http://en.pswp.cn/news/448856.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！