zoukankan      html  css  js  c++  java
  • 轮播图之缩略图API

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" href="swiper.min.css">
    		<script src="swiper.min.js"></script>
    		<style>
        html, body {
          position: relative;
          height: 100%;
        }
        body {
          background: #000;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
        }
        .swiper-container {
           100%;
          height: 300px;
          margin-left: auto;
          margin-right: auto;
        }
        .swiper-slide {
          background-size: cover;
          background-position: center;
        }
        .gallery-top {
          height: 100%;
           100%;
        }
        .gallery-thumbs {
          height: 5%;
          padding: 10px 0;
    	  color:#fff;
    	  font-size:24px;
    	  position:fixed;
    	  top:0;
        }
        .gallery-thumbs .swiper-slide {
           25%;
          height: 100%;
          
        }
        .gallery-thumbs .swiper-slide-thumb-active {
          color:red;
        }
    
      </style>
    
    	</head>
    	<body>
    		  <div class="swiper-container gallery-top">
    			<div class="swiper-wrapper">
    			  <div class="swiper-slide" style="background-image:url(img/1.jpg)"></div>
    			  <div class="swiper-slide" style="background-image:url(img/2.jpg)"></div>
    			  <div class="swiper-slide" style="background-image:url(img/3.jpg)"></div>
    			  <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>
    			</div>
    		  </div>
    		  <div class="swiper-container gallery-thumbs">
    			<div class="swiper-wrapper">
    			  <div class="swiper-slide">图一</div>
    			  <div class="swiper-slide">图二</div>
    			  <div class="swiper-slide">图三</div>
    			  <div class="swiper-slide">图四</div>
    			</div>
    		  </div>
    
    		<script language="javascript"> 
    		var galleryThumbs = new Swiper('.gallery-thumbs', {
    		  spaceBetween: 10,
    		  slidesPerView: 4,
    		  freeMode: true,
    		  watchSlidesVisibility: true,
    		  watchSlidesProgress: true,
    		});
    		var galleryTop = new Swiper('.gallery-top', {
    		  spaceBetween: 10,
    		  thumbs: {
    			swiper: galleryThumbs
    		  }
    		})
    
    		</script>
    	</body>
    </html>
    
    
  • 相关阅读:
    (zt)再给正直一次机会(最新进展)
    迁勇
    一本书、四部电影
    巴乔到北京了
    MLDN
    (zt)沉默是美德(转自连岳)
    十分钟
    不推荐两部电影
    Project Processing ...... Requirement
    Oracle Data Guard Linux 平台 Logical Standby 创建实例
  • 原文地址:https://www.cnblogs.com/lxystar/p/10855841.html
Copyright © 2011-2022 走看看