js实现轮播

最新推荐文章于 2024-12-02 11:58:17 发布

测试员辣妈

最新推荐文章于 2024-12-02 11:58:17 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js 轮播

本文链接：https://blog.youkuaiyun.com/hj0903/article/details/86527593

js 专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何使用JavaScript从头实现一个图片轮播功能，包括自动滚动、鼠标悬停暂停、点击箭头切换图片等效果。通过HTML、CSS和JavaScript代码的结合，创建了一个简单的轮播图组件，适用于网页中展示多个图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考博文：

https://blog.youkuaiyun.com/lgx1134569285/article/details/80511795

在原博文基础上进行了一些修改，使其实现其功能

实现效果：
1.自动滚动播放
2.鼠标移上去停止播放

3.点击左右箭头滚动播放

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>轮播图</title>
   <style>
       *{
           margin:0;
           padding:0;
       }
       .box{
           width: 500px;
           height: 300px;
           border: 1px solid #ccc;
           margin: 100px auto;
           padding: 5px;
       }
       .inner{
           width: 500px;
           height: 300px;
           position: relative;
           overflow: hidden;
       }
       .inner img{
           width: 500px;
           height: 300px;
           vertical-align: top;
       }
       ul{
           width: 1000%;
           position: absolute;
           list-style: none;
           left: 0;
           top: 0;
       }
       .inner li{
           float: left;
       }
       ol{
           position: absolute;
           height: 20px;
           right: 20px;
           bottom: 20px;
           text-align: center;
           padding: 5px;
       }
       ol li{
           display: inline-block;
           width: 20px;
           height: 20px;
           line-height: 20px;
           background-color: #fff;
           margin:5px;
           cursor: pointer;
       }
       ol .current{
           background-color: red;
       }
       #arr{
           display: none;
       }
       #arr span{
           width: 40px;
           height: 40px;
           position: absolute;
           left: 5px;
           top: 50%;
           margin-top: -20px;
           background: #fff;
           cursor: pointer;
           line-height: 40px;
           text-align: center;
           font-weight: bold;
           font-family: '黑体';
           font-size: 30px;
           color: #000;
           opacity: 0.5;
           border: 1px solid #fff;
       }
       #arr #right{
           right: 5px;
           left: auto;
       }
   </style>
       <body>
   <div id="box" class="box">
       <div class="inner">
           <ul>
               <li><a href="#"><img src="img/001.png" alt=""></a></li>
               <li><a href="#"><img src="img/002.jpg" alt=""></a></li>
               <li><a href="#"><img src="img/003.jpg" alt=""></a></li>
               <li><a href="#"><img src="img/004.jpg" alt=""></a></li>
               <li><a href="#"><img src="img/005.jpg" alt=""></a></li>
           </ul>
           <ol class="bar">

           </ol>
           <div id="arr">
               <span id="left"> < </span>
               <span id="right"> > </span>
           </div>
       </div>
   </div>

       var box=myx("box");
       //alert(document.getElementById("box"));
       var inner=box.children[0];
       var ulObj=inner.children[0];
       var list=ulObj.children;
       var olObj=inner.children[1];
       var arr=myx("arr");
       var imgWidth=inner.offsetWidth;
       var right=myx("right");
       var pic=0;

for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");

           olObj.appendChild(liObj);
           liObj.innerText=(i+1);
           liObj.setAttribute("index",i);

           liObj.onmouseover=function(){
               for(var j=0;j<olObj.children.length;j++){
                   olObj.children[j].removeAttribute("class");
               }
               this.className="current";
               pic=this.getAttribute("index");
               animate(ulObj,-pic*imgWidth);
           }
       }

olObj.children[0].className="current";
ulObj.appendChild(ulObj.children[0].cloneNode(true));

var timeId=setInterval(onmouseclickHandle,1000);

       box.onmouseover=function(){
           arr.style.display="block";
           clearInterval(timeId);
       };
       box.onmouseout=function(){
           arr.style.display="none";
           timeId=setInterval(onmouseclickHandle,1000);
       };

       right.onclick=onmouseclickHandle;
       function onmouseclickHandle(){
               if(pic==list.length-1){
                   olObj.children[olObj.children.length-1].className="";
                   olObj.children[0].className="current";
                   animate(ulObj,-pic*imgWidth);
                   pic=0;
               }else if(pic<list.length-1){
                   for(var i=0;i<olObj.children.length;i++){
                       olObj.children[i].removeAttribute("class");
                   }
                   olObj.children[pic].className="current";
                   animate(ulObj,-pic*imgWidth);
                   pic++;
               }
       }
       left.onclick=function(){
           if(pic==0){
               pic=list.length-1;
               ulObj.style.left=-pic*imgWidth+"px";
           }
           pic--;
           animate(ulObj,-pic*imgWidth);
           for(var i=0;i<olObj.children.length;i++){
               olObj.children[i].removeAttribute("class");
           }