使用JavaScript实现广告图片自动切换

作者: 测试老杨 | 来源:发表于2018-09-13 07:49 被阅读105次

使用JavaScript实现广告图片自动切换
JavaScript实现简单的图片切换
Android自定义View使用canvas实现轮播图效果
使用Javascript实现图片水印
在简书中如何引用代码
2018-09-26 Day27 - 作业
UIImage图片无限滚动的实现
【axure】axure制作图片轮播效果
自动切换的轮播图，并带点击事件
单选开关（点击选择与否切换）

重构首页广告层的HTML代码

广告层的HTML代码如下：

  <div class="swiper-container">
    <div class="swiper-wrapper" style="width: 100%;height:675px;">
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>   
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>   
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>    
  </div>

往广告层里面添加图片

添加广告图片的JavaScript代码如下：

    <script>
    $.each(images, function(i,image) {
        $(".swiper-wrapper").append("<div class='swiper-slide' style='width:100%;height:100%;background: url("+image+") no-repeat 50%;background-size:cover'></div>");
    });
    </script>

引入Swiper的CSS框架

代码如下：

<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>

引入Swiper的JS框架

代码如下：

<script type="text/javascript" src="js/swiper.min.js" ></script>

初始化Swiper

autoplay设置为true表示自动切换（默认间隔时长为3秒）。
初始化滑块的JS代码如下：

    <script>        
    var mySwiper = new Swiper ('.swiper-container', {
    autoplay:   true,
    direction: 'horizontal',
    loop: true,    
    // 如果需要分页器 
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },    
    // 如果需要滚动条
    /*
    scrollbar: {
      el: '.swiper-scrollbar',
    },
    */
  })        
  </script>

测试数据

使用数组保存用于测试的广告图片。
data.js文件的代码如下：

var images=["img/20180907001.jpg","img/20180912002.jpg","img/20180912003.jpg"];

引入该JS文件，代码如下：

<script type="text/javascript" src="js/data.js" ></script>

使用浏览器浏览

swiper0912_03.gif

附上完整代码

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js" ></script>
<script type="text/javascript" src="js/data.js"></script>

<style>
  .menu{
        height:80px;
        margin-bottom:3px;
  }

  a{
        text-decoration:none;
        font-size:20px;
        color:black;
  }

  a.current{
        color:#fff;
  }

  ul.first{
        list-style-type:none;
        margin-top:0;
        padding-left:0;
        height:80px;
  }

  ul.second{
        list-style-type:none;
        margin-top:0;
        padding-left:0; 
  }

  li.first{
        display:inline-block;
        width:19.5%;
        text-align:center;
        height:80px;
        line-height:80px;
        border:1px solid red;
  }

  li.first:nth-child(1){
        background-color:#e95a1a;
  }
  
  li.first:hover div{
        display:block;
  }

  li.first:hover > a{
    color:#fff;
  }

  li.first:hover{
        background-color:#e95a1a;
  }

  li.second{
        display:inline-block;
        text-align:center;
        margin-right:2px;
        border:1px solid red;
  }

  li.second a{
        padding:0 55px;
  }

  li.second a:hover{
        color:#e95a1a;
  }

  li div{
    display:none;
    background:url(img/menubg.png) repeat;
    height: 56px;
    line-height: 52px;
    left: 0;
    position: absolute;
    top: 90px;
    width: 100%;
    text-align: center;
    z-index: 999;
  }

</style>
</head>
<body>
  <div class="header">
  <div class="menu">
  <ul class="first">
  <li class="first">
  <a href="#" class="current">首页</a>
  </li>
  <li class="first">
  <a href="#">产品中心</a>
  <div>
  <ul class="second">
  <li class="second"><a href="#">企业版</a></li>
  <li class="second"><a href="#">工作流</a></li>
  <li class="second"><a href="#">移动应用</a></li>
  <li class="second"><a href="#">云服务</a></li>
  </ul>
  </div>
  </li>
  <li class="first">
  <a href="#">案例中心</a>
  <div>
  <ul class="second">
  <li class="second"><a href="#">人工智能</a></li>
  <li class="second"><a href="#">互联网</a></li>
  <li class="second"><a href="#">移动支付</a></li>
  <li class="second"><a href="#">金融证券</a></li>
  <li class="second"><a href="#">医疗保险</a></li>
  </ul>
  </div> 
  </li>
  <li class="first">
  <a href="#">服务支持</a>
  <div>
  <ul class="second">
  <li class="second"><a href="#">服务流程</a></li>
  <li class="second"><a href="#">服务内容</a></li>
  <li class="second"><a href="#">服务宗旨</a></li>
  </ul>
  </div>
  </li>
  <li class="first">
  <a href="#">关于我们</a>
  <div>
  <ul class="second">
  <li class="second"><a href="#">公司介绍</a></li>
  <li class="second"><a href="#">公司荣誉</a></li>
  <li class="second"><a href="#">新闻中心</a></li>
  <li class="second"><a href="#">招纳贤士</a></li>
  <li class="second"><a href="#">联系我们</a></li>
  </ul>
  </div>
  </li>
  </ul>
  </div>
  </div>
  <div class="swiper-container">
    <div class="swiper-wrapper" style="width: 100%;height:675px;">
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>   
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>   
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>    
  </div>        
    <script>
    $.each(images, function(i,image) {
        $(".swiper-wrapper").append("<div class='swiper-slide' style='width:100%;height:100%;background: url("+image+") no-repeat 50%;background-size:cover'></div>");
    });
    </script> 
    <script>        
    var mySwiper = new Swiper ('.swiper-container', {
    autoplay: true,
    direction: 'horizontal',
    loop: true,    
    // 如果需要分页器 
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },    
    // 如果需要滚动条
    /*
    scrollbar: {
      el: '.swiper-scrollbar',
    },
    */
  })        
  </script>  
</body>
</html>