轮播图实现教程-优快云博客

本文链接：https://blog.youkuaiyun.com/ITdada/article/details/7559397

本文详细介绍了如何使用HTML、CSS及jQuery实现一个自动轮播图片的功能，并附带了完整的代码示例，帮助读者理解轮播图的工作原理及其交互效果。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
   *{
       margin:0px;
       padding:0px;
   }
   #d1{
       border : 1px solid #aaaaaa;
       margin-left:200px;
       margin-top:40px;
       width:548px;
       height:177px;
       overflow:hidden;
       position:relative;
   }

   #adv,#num{
       position:absolute;
   }

   ul li{
       list-style:none;
       display:inline;
   }
   ul img{
       width:548px;
       height:177px;
       display:block;
   }

   #num{
       right:5px;
       bottom:5px;
   }

   #num li{
       float: left;
       color: #FF7300;
       text-align: center;
       line-height: 16px;
       width: 16px;
       height: 16px;
       font-family: Arial;
       font-size: 12px;
       cursor: pointer;
       overflow: hidden;
       margin: 3px 1px;
       border: 1px solid #FF7300;

   }

   .on{
       line-height: 21px;
       width: 21px;
       height: 21px;
       font-size: 16px;
       margin: 0 1px;
       border: 0;
       background-color:red;
       font-weight: bold;
   }
</style>
   <script type="text/javascript" src="../js/jquery-1.4.3.js">
   </script>
   <script type="text/javascript">
       $(function(){
           var timer = null;
           $('#num li').mouseover(function(){
               var index = $('#num li').index(this);
               showImage(index);
               //$(this).addClass('on').siblings().removeClass('on');
           }).eq(0).mouseover();

           $('#d1').hover(function(){
               //光标进入，停止滚动
               clearInterval(timer);
           },function(){
               //光标移走，开始滚动
               var index1 = 0;
               timer = setInterval(function(){
                   showImage(index1);
                   index1 ++;
                   if(index1 == 5){
                       index1 = 0;
                   }
               },2000);
           }).trigger('mouseleave');
       });

       //显示index下标对应的图片
       function showImage(index){
       //得到div的高度
           var height = $('#d1').height();
           //stop(true):先清空该节点上的其它的动画
           //否则动画会累积。
           $('#adv').stop(true).animate({'top':-index * height},1000);
           $('#num li').eq(index).addClass('on').siblings().removeClass('on');
       }
   </script>
</head>
<body>
   <div id="d1">
       <ul id="adv">
           <li><img src="../images/1.jpg"/></li>
           <li><img src="../images/2.jpg"/></li>
           <li><img src="../images/3.jpg"/></li>
           <li><img src="../images/4.jpg"/></li>
           <li><img src="../images/5.jpg"/></li>
       </ul>
       <ul id="num">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
       </ul>
   </div>

</body>
</html>