html 无缝轮播图完整代码图片切换代码-石泉蓝天数码科技

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播图无缝滚动</title>
<style type="text/css">
*

</script>

链接：https://pan.baidu.com/s/1VY4i_dimkS-8xo6rvIINCg
提取码：idfh

暂时没有此产品的评价记录！

亲，需要评论吗?

评论内容

淘宝助理专用数据

<img src="http://www.sxdh.org/attached/202171205816.png" alt="" /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>轮播图无缝滚动</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none; border:0;} .all{   width:500px;   height:200px;   padding:7px;   border:1px solid #ccc;   margin:100px auto;   position:relative; } .screen{ width:500px; height:200px; overflow:hidden;  position:relative; } .screen li{ width:500px; height:200px; overflow:hidden; float:left;} .screen ul{ position:absolute; left:0; top:0px; width:3000px;} .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;} .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;} .all ol li.current{ background:yellow;}     /*#arr {display: none;}*/ #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;} #arr #right{right:5px; left:auto;}     </style>         </head>     <body> <div class="all" id='all'> <div class="screen" id="screen">         <ul id="ul">             <li><img src="images/1.jpg" width="500" height="200" /></li>             <li><img src="images/2.jpg" width="500" height="200" /></li>             <li><img src="images/3.jpg" width="500" height="200" /></li>             <li><img src="images/4.jpg" width="500" height="200" /></li>             <li><img src="images/5.jpg" width="500" height="200" /></li>         </ul>         <ol></ol>         <div id="arr"><></div>     </div> </div> </body> </html> <script>     //需求：无缝轮播图     //步骤：     //1.老三步。获取相关元素。     //2.补齐相互盒子         //1.复制第一张图片所在的li，填入所在的ul中。         //2.生成相关的ol中的li。         //3.点亮第一个ol中的li。     //3.鼠标放到小方块儿上，轮播图片。     //4.添加定时器。     //5.左右切换的按钮。                 //1.老三步。获取相关元素。     var box = document.getElementById("all");     var ul = box.children[0].children[0];     var ol = box.children[0].children[1];     var ulLiArr = ul.children;     //2.补齐相互盒子         //1.复制第一张图片所在的li，填入所在的ul中。     var newLi = ulLiArr[0].cloneNode(true);     ul.appendChild(newLi);         //2.生成相关的ol中的li。     for(var i=0;i<ulLiArr.length-1;i++){         var newOlLi = document.createElement("li");         newOlLi.innerHTML = i+1;         ol.appendChild(newOlLi);     }         //3.点亮第一个ol中的li。     var olLiArr = ol.children;     ol.children[0].className = "current";     //3.鼠标放到小方块儿上，轮播图片。     for(var i=0;i<olLiArr.length;i++){         olLiArr[i].index = i;         olLiArr[i].onmouseover = function () {             for(var j=0;j<olLiArr.length;j++){                 olLiArr[j].className = "";             }             olLiArr[this.index].className = "current";             animate(ul,-this.index*ul.children[0].offsetWidth);             key = square = this.index;         }     }     //4.添加定时器。     var timer = null;     var key = 0;     var square = 0;     timer = setInterval(autoPlay,1000);         function autoPlay(){         key++;         square++;         if(key>olLiArr.length){             key=1;             ul.style.left = 0;         }         animate(ul,-key*ul.children[0].offsetWidth);             square = square>olLiArr.length-1?0:square;         for(var j=0;j<olLiArr.length;j++){             olLiArr[j].className = "";         }         olLiArr[square].className = "current";     }     //5.鼠标移开开启定时器，鼠标放上去开启定时器。     box.onmouseover = function () {         clearInterval(timer);     }     box.onmouseout = function () {         timer = setInterval(autoPlay,1000);     }     //6.左右切换的按钮。     var btnArr = box.children[0].children[2].children;     btnArr[0].onclick = function () {         key--;         square--;         if(key<0){             key=4;             ul.style.left = -5*ul.children[0].offsetWidth + "px";         }         animate(ul,-key*ul.children[0].offsetWidth);             square = square<0?olLiArr.length-1:square;         for(var j=0;j<olLiArr.length;j++){             olLiArr[j].className = "";         }         olLiArr[square].className = "current";     }     btnArr[1].onclick = function () {         autoPlay();     }                     //  基本封装     function animate(obj,target) {         clearInterval(obj.timer);         var speed = obj.offsetLeft < target ? 15 : -15;         obj.timer = setInterval(function() {             var result = target - obj.offsetLeft;             obj.style.left = obj.offsetLeft + speed  + "px";             if(Math.abs(result) <= 15) {                 obj.style.left = target + "px";                 clearInterval(obj.timer);             }         },10);     }         </script> <h2> 链接：https://pan.baidu.com/s/1VY4i_dimkS-8xo6rvIINCg  提取码：idfh </h2>

html 无缝轮播图完整代码图片切换代码

微信客服