JavaScript代码实现简单的轮播图效果

JavaScript中的轮播图在许多网站中能够经常看到，如淘宝京东首页等。轮播图还是比较简单的，只要理解动画原理以及定时器函数

setTimeout()和clearTimeout()

setInterval()和clearInterval()

这四个函数都是属于window对象的。Window是可以省略的。

使用格式：

SetTimeout(函数，时间);

SetInterval(函数，时间);

其中，时间是以毫秒作为单位，如果要写1s，需要写成1000.

函数，可以写在外面，传入函数名，也可以直接写在参数列表

如果需要清除定时器，需要使用clearTimeout，clearInterval。

在清除定时器的时候，需要获得定时器的引用。

好了，理解这些定时器后开始写轮播图了。

先来看看HTML代码部分：

 <div class="box">
        <div id="picth">
           <a href=""><img src="images/jd1.jpg" alt=""></a>
           <a href=""><img src="images/jd2.jpg" alt=""></a>
           <a href=""><img src="images/jd3.jpg" alt=""></a>
           <a href=""><img src="images/jd4.jpg" alt=""></a>
           <a href=""><img src="images/jd5.jpg" alt=""></a>
           <a href=""><img src="images/jd6.jpg" alt=""></a>
        </div>
        <div class="nav-bar">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
    </div>

CSS代码部分：

 <style>
       *{margin: 0; padding: 0;}
       .box{
           width: 730px;
           height: 454px;
           position: relative;
           overflow: hidden;
           margin: 50px auto 0;
       }
       #picth{
           width: 4380px;
           height: 454px;
           position: absolute;
           left: 0;
           top: 0;
       }
       #picth a{
           float: left;
       }
       .nav-bar{
           position: absolute;
           bottom: 10px;
           width: 130px;
           left: 300px;
       }
       ul{list-style: none;}
       .nav-bar li{
              height: 12px;
              line-height: 12px;
              width: 12px;
              float: left;
              margin: 0 4px;
              background: #333;
              color: #FFFFFF;
              text-align: center;
       }
       .nav-bar .on{background: #c00;}
    </style>

css代码中我并没有使用百分比的宽度。图片的大小为730*454

这里有两点需要注意：1、整个盒子.box，图片，图片picth对应的数字.nav-bar都要写定位。

2、图片有多少张，则图片中的div宽度就730宽度*图片的数量。高度不变。

JavaScript代码如下：

<script>
        //图片切换，先获取所有的图片
      var picth = document.getElementById("picth");
      var li = document.getElementsByTagName("li");
      var t = null;//定义一个定时器
      var init = 0;//默认为第一张图片
      //时间函数
       function chang (){
        t = setInterval( function(){
          init ++ ;
         if( init >=6){
             init = 0;
         }
         picth.style.left = init *-730 + "px"; //做左移动
         //导航数字切换
         for ( var i = 0, len = li.length; i < len; i++){
              li[i].className = "";
         }
              li[init].className = "on";
      },2000);

       }
             chang();//开始动画

               //鼠标移到图片停止动画
               picth.onmouseover = function(){
                 clearInterval(t);
             }
             picth.onmouseout = function(){
                 //封装一个函数，调用
                 chang();
             }
       

            //导航数字的移动方向与图片一致

           
           
                //数字循环
               for ( var j = 0, len = li.length; j < len; j ++){
                   li[j].index = j;//给个点击的值
                     //注册事件
                     li[j].onmouseover = function(){
                         clearInterval(t);
                         init = this.index;//图片的位置属性和所单击的数字一致
                         picth.style.left = init *-730 + "px";
                for ( var i = 0, len = li.length ; i < len; i++){
                       li[i].className = "";
                }
                //当前的li，加上on
                li[init].className = "on";
                     }
               }

           
    </script>

整段代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       *{margin: 0; padding: 0;}
       .box{
           width: 730px;
           height: 454px;
           position: relative;
           overflow: hidden;
           margin: 50px auto 0;
       }
       #picth{
           width: 4380px;
           height: 454px;
           position: absolute;
           left: 0;
           top: 0;
       }
       #picth a{
           float: left;
       }
       .nav-bar{
           position: absolute;
           bottom: 10px;
           width: 130px;
           left: 300px;
       }
       ul{list-style: none;}
       .nav-bar li{
              height: 12px;
              line-height: 12px;
              width: 12px;
              float: left;
              margin: 0 4px;
              background: #333;
              color: #FFFFFF;
              text-align: center;
       }
       .nav-bar .on{background: #c00;}
    </style>
</head>
<body>
    <div class="box">
        <div id="picth">
           <a href=""><img src="images/jd1.jpg" alt=""></a>
           <a href=""><img src="images/jd2.jpg" alt=""></a>
           <a href=""><img src="images/jd3.jpg" alt=""></a>
           <a href=""><img src="images/jd4.jpg" alt=""></a>
           <a href=""><img src="images/jd5.jpg" alt=""></a>
           <a href=""><img src="images/jd6.jpg" alt=""></a>
        </div>
        <div class="nav-bar">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
    </div>
    <script>
        //图片切换，先获取所有的图片
      var picth = document.getElementById("picth");
      var li = document.getElementsByTagName("li");
      var t = null;//定义一个定时器
      var init = 0;//默认为第一张图片
      //时间函数
       function chang (){
        t = setInterval( function(){
          init ++ ;
         if( init >=6){
             init = 0;
         }
         picth.style.left = init *-730 + "px"; //做左移动
         //导航数字切换
         for ( var i = 0, len = li.length; i < len; i++){
              li[i].className = "";
         }
              li[init].className = "on";
      },2000);

       }
             chang();//开始动画

               //鼠标移到图片停止动画
               picth.onmouseover = function(){
                 clearInterval(t);
             }
             picth.onmouseout = function(){
                 //封装一个函数，调用
                 chang();
             }
       

            //导航数字的移动方向与图片一致

           
           
                //数字循环
               for ( var j = 0, len = li.length; j < len; j ++){
                   li[j].index = j;//给个点击的值
                     //注册事件
                     li[j].onmouseover = function(){
                         clearInterval(t);
                         init = this.index;//图片的位置属性和所单击的数字一致
                         picth.style.left = init *-730 + "px";
                for ( var i = 0, len = li.length ; i < len; i++){
                       li[i].className = "";
                }
                //当前的li，加上on
                li[init].className = "on";
                     }
               }

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

好了，简单的轮播效果就完成了，赶紧去试试吧。

JavaScript代码实现简单的轮播图效果

猜你喜欢