原生js实现图片轮播特效

韩佐

2023-03-14

本文向大家介绍原生js实现图片轮播特效，包括了原生js实现图片轮播特效的使用技巧和注意事项，需要的朋友参考一下

本文特意为原生js实现图片轮播特效代码做了下总结，分享给大家供大家参考，欢迎大家学习。

运行效果图：

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最简单的轮播广告</title>
  <style>
    body, div, ul, li {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    body {
      background: #000;
      text-align: center;
      font: 12px/20px Arial;
    }

    #box {
      position: relative;
      width: 492px;
      height: 172px;
      background: #fff;
      border-radius: 5px;
      border: 8px solid #fff;
      margin: 10px auto;
    }

    #box .list {
      position: relative;
      width: 490px;
      height: 170px;
      overflow: hidden;
      border: 1px solid #ccc;
    }

    #box .list li {
      position: absolute;
      top: 0;
      left: 0;
      width: 490px;
      height: 170px;
      opacity: 0;
      transition: opacity 0.5s linear
    }

    #box .list li.current {
      opacity: 1;
    }

    #box .count {
      position: absolute;
      right: 0;
      bottom: 5px;
    }

    #box .count li {
      color: #fff;
      float: left;
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-right: 5px;
      overflow: hidden;
      background: #F90;
      opacity: 0.7;
      border-radius: 20px;
    }

    #box .count li.current {
      color: #fff;
      opacity: 0.7;
      font-weight: 700;
      background: #f60
    }
  </style>
</head>
<body>
<div id="box">
  <ul class="list">
    <li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
  </ul>
  <ul class="count">
    <li class="current">1</li>
    <li class="">2</li>
    <li class="">3</li>
    <li class="">4</li>
    <li class="">5</li>
  </ul>
</div>


<script>
  var box=document.getElementById('box');
  var uls=document.getElementsByTagName('ul');
  var imgs=uls[0].getElementsByTagName('li');
  var btn=uls[1].getElementsByTagName('li');
  var i=index=0; //中间量，统一声明；
  var play=null;
  console.log(box,uls,imgs,btn);//获取正确

  //图片切换, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单 在css里面
  function show(a){        //方法定义的是当传入一个下标时，按钮和图片做出对的反应
    for(i=0;i<btn.length;i++ ){
      btn[i].className='';    //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
      btn[a].className='current';
    }
    for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同
      imgs[i].style.opacity=0;
      imgs[a].style.opacity=1;
    }
  }
  //切换按钮功能，响应对应图片
  for(i=0;i<btn.length;i++){
    btn[i].index=i;  //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
    btn[i].onmouseover=function(){
      show(this.index);
      clearInterval(play); //这就是最后那句话追加的功能
    }
  }

  //自动轮播方法
function autoPlay(){
      play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
      index++;
      index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。
      show(index);
    },1000)
  }
  autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了

  //div的鼠标移入移出事件
  box.onmouseover=function(){
    clearInterval(play);
  };
  box.onmouseout=function(){
    autoPlay();
  };
  //按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。

</script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

原生js实现图片轮播特效

相关阅读

相关文章

相关问答

相关工具

相关文档