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

亦凉 2022-06-07 01:54 199阅读 0赞

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

setTimeout()和clearTimeout()

setInterval()和clearInterval()

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

**使用格式：**

SetTimeout(函数，时间);

SetInterval(函数，时间);

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

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

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

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

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

先来看看HTML代码部分：

CSS代码部分：

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

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

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

JavaScript代码如下：

整段代码如下：

<!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>

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