用javascript实现网站首页轮播图效果_js实现网站轮播图-优快云博客

这篇博客展示了如何利用JavaScript实现一个简单的网站轮播图效果。通过设置定时器自动切换图片，结合CSS样式和HTML结构，实现了图片的平滑过渡。同时，还加入了鼠标悬停停止播放和点击数字导航跳转到对应图片的功能。

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

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
	<style>
  *{margin:0;
    padding:0;
    list-style:none;}
  .wrap{height:170px;
        width:490px;
        margin:60px auto;
        overflow: hidden;
        position: relative;
        margin:100px auto;}
  .wrap ul{position:absolute;} 
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
           right:5px;
           bottom:10px;}
  .wrap ol li{height:20px; width: 20px;
              background:#ccc;
              border:solid 1px #666;
              margin-left:5px;
              color:#000;
              float:left;
              line-height:center;
              text-align:center;
              cursor:pointer;}
  .wrap ol .on{background:#E97305;
               color:#fff;}

  </style>
  <script type="text/javascript">
  window.onload=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic'),
        list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;

      // 定义并调用自动播放函数
      function auto(){
          timer=setInterval(function(){
              index++;
              if(index>=list.length){
                  index=0;
              }
              change(index);
          },2000);
      }
      auto();
      // 定义图片切换函数
      function change(curIndex){
          pic.style.marginTop=-170*curIndex+"px";
        for(var j=0;j<list.length;j++){
             list[j].className="";
         }
         list[curIndex].className="on";
         index=curIndex;
      }
     
     // 鼠标划过整个容器时停止自动播放
     wrap.onmouseover=function(){
        clearInterval(timer);
     }

     // 鼠标离开整个容器时继续播放至下一张
     wrap.onmouseout=auto;
    
     // 遍历所有数字导航实现划过切换至对应的图片
     for(var i=0;i<list.length;i++){
         list[i].id=i;
         list[i].onmouseover=function(){
             change(this.id);
         }
     }
   }

  </script>	
</head>
<body>
  <div class="wrap" id='wrap'>
    <ul id="pic">
      <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>
</html>