超简单全面的html图片自动轮播

曾经终败给现在 2023-06-25 03:28 51阅读 0赞

# 超简单全面的html图片自动轮播 #

废话不多说，直接上代码

## html部分 ##

<div id="max">
            <div class="re">
                <ul>
                    <li><img src="./pic/big_size/p1.jpg" alt=""></li>
                    <li><img src="./pic/big_size/p2.jpg" alt=""></li>
                    <li><img src="./pic/big_size/p3.jpg" alt=""></li>
                    <li><img src="./pic/big_size/p4.jpg" alt=""></li>
                    <li><img src="./pic/big_size/p5.jpg" alt=""></li>
                </ul>
                <ol>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
        </div>

## css部分 ##

这里为了美观多加了点装饰

#max{ 
      width: 900px;
      height: 500px;
      align-items: center;
      margin: 5% auto;
      margin-top: 0%;
    }
    .re{ 
      position: relative;
      height: 400px;
    }
    .re ul{ 
      list-style-type:none ;
    }
    .re ul>li{ 
      width: 600px;
      height: 300px;
      position: absolute;
    
      transition: 1s;
      opacity: 0;
    }
    .re ul>li img{ 
      width: 900px;
      height: 500px;
      border-radius: 10%;
      border: 15px solid #fffbd6;
    }
    #max ol { 
      position: relative;
      display: grid;
      grid-template-columns: repeat(5,75px);
      grid-template-rows: auto;
      grid-gap: 1em;gap: 1em;
      float: right;
      margin-top: 450px;
      list-style: none;
      top:0;left:0;
    }
    #max ol li { 
      width: 25px;
      height: 10px;
      font-size: 15px;
      line-height: 20px;
      float: left;
      text-align: center;
      border-radius: 2em;
      border: 5px solid #999999;
    }

## js部分 ##

window.onload = function(){ 
      var box=this.document.getElementsByClassName("re")[0];
      var lik=box.getElementsByTagName("li");
      function fun(i,j){ //转换图片函数，就是把透明度改了一下
        lik[i].style.opacity=1;
        lik[j].style.opacity=0;
        lik[i+5].style.backgroundColor="#ffffff";//改一下小图标
        lik[j+5].style.backgroundColor="#00000000"
      }
      fun(0,1);//初始化下
      var i =0;
      function auto(){ //轮播循环函数
        if(++i>=5){ 
          i=0;
          fun(0,4);
        }
        else fun(i,i-1);
      }
      timer=this.setInterval(auto,2000);
      box.onmouseover = function () {  //鼠标划上去，停止轮播
        console.log('good');
        clearInterval(timer);
      }
      box.onmouseout = function () {  //鼠标划出，继续轮播
        timer = setInterval(auto, 2000); //调用定时器
      }
      var j =0;
      for(;j<5;j++){ //点击小图标也可以转换图片
        lik[j+5].ind=j;
        lik[j+5].onclick=function(){ 
          fun(this.ind,i)
          i=this.ind;
        }
      }
    
    }

## 效果 ##

![可爱的狗狗][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0_size_16_color_FFFFFF_t_70]  
可以自动轮播，鼠标划上去停止轮播，点小图标切换，该有的都有。  
想要吗？复制粘贴带走吧。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191225160356608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，51人围观）

还没有评论，来说两句吧...

相关阅读

相关超简单全面的html图片自动轮播

超简单全面的html图片自动轮播废话不多说，直接上代码 html部分 <div id="max"> <div class="re

曾经终败给现在/ 2023年06月25日 03:28/ 0 赞/ 52 阅读

相关 html简单图片轮播居中,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][] ![s3.jpg][] 在这个html的

蔚落/ 2022年10月06日 10:52/ 0 赞/ 446 阅读

相关简单的html轮播图片怎么做的,简单的HTML+js图片轮播?

这个我写过，不知道你是否有什么特殊的要求。 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html

Love The Way You Lie/ 2022年10月06日 07:49/ 0 赞/ 240 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 358 阅读

相关 html实现自动图片轮播,图片轮播的实现（html__js）

1.简单实现 1)实现思想：通过轮播次数来决定显示那一张首先，可以用简单的div 包含img的框架来实现，我们为他添加按钮，每个按钮对应不同的图片，那么，每点击一次，将要显示

待我称王封你为后i/ 2022年10月06日 00:48/ 0 赞/ 315 阅读

相关 html轮播图用什么语言,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][s1.jpg] ![s3.jpg

不念不忘少年蓝@/ 2022年10月05日 12:46/ 0 赞/ 269 阅读

相关 html图片轮播15个自动,15个超强的jQuery/HTML5图片轮播插件

最近咱们为你们分享过很多基于jQuery的图片轮播插件，固然也有不少使用了HTML5和CSS3的相关技术，让整个图片播放器显得更加美观，动画效果显得更加炫酷。此次咱们特地为你们

迷南。/ 2022年10月05日 12:45/ 0 赞/ 954 阅读

相关 html文字自动轮播代码怎么写,图片轮播HTML代码

![428c09165da34559d48c211c0d0c1a7f.png][]代码运行效果图要实现类似幻灯片效果的图片自动切换，怎样通过Html代码实现，对于很多新手来

逃离我推掉我的手/ 2022年10月05日 10:51/ 0 赞/ 265 阅读

相关 html简单实现自动轮播代码怎么写,HTML图片轮播代码怎么写？

贴一个超级简单的JS代码，不需要插件图片轮播代码 body\{max-width: 640px;margin: 0 auto;\} \lunbo ul li\{widt

客官°小女子只卖身不卖艺/ 2022年10月05日 10:46/ 0 赞/ 286 阅读

相关 html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 <!DOCTYPE HTML> <html> <head>

港控/mmm°/ 2022年08月03日 14:36/ 0 赞/ 417 阅读