您的位置：首页 > Web前端 > JavaScript

使用JavaScript实现广告轮播特效

2017-09-13 16:04 330 查看

一、实现的具体特效

        1、广告图片轮播
        2、鼠标悬浮到广告图片，停止轮播
         3、鼠标移开广告图片，继续轮播
        4、数字和轮播的广告图片保持一致
        5、当鼠标悬浮到数字时，切换到指定的图片，停止轮播
        6、当鼠标移出数字时，从当前广告图片继续轮播

二、最后的结果图

三、项目架构图

四、具体实现的源代码

<!DOCTYPEhtml>

<html>

<head>

   <metacharset="UTF-8">

   <title>使用JavaScript实现广告轮播特效</title>

   <style>

     *{

      padding:0px;

      margin:0px;

     }

       ul{

      text-align:
center;

      position:absolute;

      left:450px;

      top:150px;

      width:150px;

      height:20px;

      margin-left:160px;

     }

        li{

      list-style:none;

      float:left;

      width:20px;

      margin-left:5px;

      border-radius:20px;

     background-color:#666666;

      color:
white;

     }

      div{

      width:500px;

      height:180px;

      margin:0auto;

     }

      .liselected{

      background-color:
red;

     }

       .liunselected{

      background-color:#666666;

     }

   </style>

</head>

<body>

   <div>

     <imgsrc="img/dd_scroll_1.jpg"id="img"/>

     <ulid="carouselUl">

      <li>1</li>

      <li>2</li>

      <li>3</li>

      <li>4</li>

      <li>5</li>

      <li>6</li>

     </ul>

   </div>

   <script>

     varimgIndex=1;//初始化图片的下标值

     varimg= document.getElementById("img");//图片元素

     //所有的装载数字1-6的li的集合

     varlis= document.getElementById("carouselUl").getElementsByTagName("li");

     //默认第一个数字的背景颜色为red

     lis[0].className="liselected";

     //实现轮播的函数

     functionCarousel()
{

      //如果轮播的图片的张数小于6

      if(imgIndex<=6)
{

        //对应的装载数字的li变为红色，减一是因为数组下标值从0开始的

        lis[imgIndex-1].className="liselected";

        //当前正在轮播数字的下一个数字的li变为灰色

        //imgIndex-1是求出当前正在轮播数字对应数组的下标值

        //imgIndex-1-1是求出正在轮播数字的下一个数字的对应数组的下标值

        if(imgIndex>=2)
{

          lis[imgIndex-1-1].className="liunselected";

        }

        //轮播的图片

        img.src="img/dd_scroll_"+imgIndex+".jpg";

        imgIndex++;//每次加一,即下一张图片

        //如果轮播的图片的张数大于6，又从第一张开始，由此循环

      }else{

        img.src="img/dd_scroll_1.jpg";//第一张图片

        imgIndex=2;//下次轮播图片的索引值

        lis[5].className="liunselected";//最后一个数字的背景颜色变为灰色

        lis[0].className="liselected";//第一个数字的背景颜色变为红色

      }

     }

     //计时轮播

     vart= window.setInterval(Carousel,1000);

     //鼠标悬浮到图片，停止轮播

     img.onmouseover=function()
{

      window.clearInterval(t);

     };

     //鼠标移开图片，继续轮播

     img.onmouseout=function()
{

      t=window.setInterval(Carousel,1000);

     };

     //当鼠标悬浮到某一个数字时，切换到指定的图片，停止轮播

     for(varn=0;
n<lis.length; n++) {

      lis
.onmouseover=function()
{

        window.clearInterval(t);//停止轮播

        //当前正在轮播的数字的背景变为灰色

        lis[imgIndex-2].className="liunselected";

        //求出要切换到哪张图片，并赋值给imgIndex

        imgIndex=parseInt(this.innerText);

        //切换到指定的图片

        img.src="img/dd_scroll_"+imgIndex+".jpg";

        //切换到指定的图片对应的数字背景变为红色

        lis[imgIndex-1].className="liselected";

      };

      //当鼠标移出数字时，从当前图片继续轮播

      lis
.onmouseout=function()
{

        t=window.setInterval(Carousel,1000);

      }

     }

   </script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 轮播

相关文章推荐

新的分享

章节导航