【案例】图片无缝轮播效果
知識點：
1、scrollLeft屬性
2、克隆節點
3、定時器
4、鼠標移入移除事件
?
<!DOCTYPE html>
<html lang="en">
<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>
<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));
??????? //設置無縫輪播的步徑
??????? 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
總結
以上是生活随笔為你收集整理的【案例】图片无缝轮播效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Chrome新的语言API，让您的浏览器
- 下一篇： C语言_函数【转】