图片轮播方法

最新推荐文章于 2024-04-15 10:28:24 发布

黎明lk

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量1.1k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_46101757/article/details/107916517

版权

js实现自动轮播

改变图片透明度实现轮播

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0 auto;
    padding: 0;
   }
   body{
    background: #000000;
   }
   #box{
    width: 492px;
    height: 172px;
    background: white;
    overflow: hidden;
    position: relative;
    border: 8px solid #FFFFFF;
    border-radius: 10px;
    margin: 10px auto;
    padding: 0;
   }
   #box ul{
    padding: 0;
    list-style-type: none;
   }
   #box #bnner li img{
    position: absolute;
    left: 0;
    top: 0;
   }
   #box #number{
    position: absolute;
    right: 0;
    bottom: 5px;
   }
   #box #number li{
    float: left;
    width: 20px;
    height: 20px;
    background: #F90;
    overflow: hidden;
    font: 12px/20px arial;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    margin-right: 5px;
    text-align: center;
    opacity: 0.7;
   }
   #box #number li a{
    color: #FAFAFA;
    text-decoration: none;
    font-weight: bold;
   }
   #box #number .current{
    background: #f60;
    opacity: 1;
   }
  </style>
  <script>
   window.onload=function(){
    //获取元素
    var box=document.getElementById('box');
    var bnner=document.getElementById('bnner');
    var num=document.getElementById('number');
    var aLi=bnner.getElementsByTagName('li');
    var aNum=num.getElementsByTagName('li');
    var index=n=0;
    var timer=null;
    //自动轮播实现方法
    function autoPlay(){
     //设置一个定时器,设置多少毫秒轮播下一张图片
     timer=setInterval(function(){
      index++;
      index>=aLi.length&&(index=0);
      show(index);
     },1000)
    }
    autoPlay();
    function show(a){
     for(var i=0;i<aLi.length;i++)aLi[i].style.opacity=0;
     aLi[a].style.opacity=1;
     for(var j=0;j<aNum.length;j++)aNum[j].className="";
     aNum[a].className="current";
    }
//    鼠标停在盒子内清除定时器
    box.onmouseover=function(){
     clearInterval(timer);
    };
    //鼠标移开盒子执行轮播方法
    box.onmouseout=function(){
     autoPlay();
    };
    for(var i=0;i<aNum.length;i++){
     aNum[i].index=i;
     aNum[i].onmouseover=function(){
      show(this.index);
      clearInterval(timer);
     }
    }
   }
  </script>
 </head>
 <body>
  <div id="box">
   <ul id="bnner">
    <li style="opacity: 1;"><img src="img/自动播放——幻灯片效果_files/01.jpg"/></li>
    <li style="opacity: 0;"><img src="img/自动播放——幻灯片效果_files/02.jpg"/></li>
    <li style="opacity: 0;"><img src="img/自动播放——幻灯片效果_files/03.jpg"/></li>
    <li style="opacity: 0;"><img src="img/自动播放——幻灯片效果_files/04.jpg"/></li>
    <li style="opacity: 0;"><img src="img/自动播放——幻灯片效果_files/05.jpg"/></li>
   </ul>
   <ul id="number">
    <li class="current"><a href="javascript:;">1</a></li>
    <li class=""><a href="javascript:;">2</a></li>
    <li class=""><a href="javascript:;">3</a></li>
    <li class=""><a href="javascript:;">4</a></li>
    <li class=""><a href="javascript:;">5</a></li>
   </ul>
  </div>
 </body>
</html>

改变图片路径实现轮播

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   body{
    background: #000000;
   }
   #box{
    width: 492px;
    height: 172px;
    border: 8px solid #FFFFFF;
    padding: 0;
    margin: 10px auto;
    border-radius: 10px;
    background: #000000;
   }
  </style>
  <script>
   window.onload=function(){
    var box=document.getElementById('box');
    var aImg=box.getElementsByTagName('img')[0];
    var index=0;
    var atrr=[];
    atrr[0]='img/自动播放——幻灯片效果_files/01.jpg';
    atrr[1]='img/自动播放——幻灯片效果_files/02.jpg';
    atrr[2]='img/自动播放——幻灯片效果_files/03.jpg';
    atrr[3]='img/自动播放——幻灯片效果_files/04.jpg';
    atrr[4]='img/自动播放——幻灯片效果_files/05.jpg';
    setInterval(function(){
     index++;
     index>=atrr.length&&(index=0);
     aImg.src=atrr[index];
    },1000)
   }
  </script>
 </head>
 <body>
  <div id="box">
   <img src="img/自动播放——幻灯片效果_files/01.jpg" />
   <ul></ul>
  </div>
 </body>
</html>

黎明lk

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片轮播方法

js实现自动轮播<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } body{ background: #000000; } #box{ width:
复制链接

扫一扫