zoukankan      html  css  js  c++  java
  • 实现可拖动的轮播图,使用swiper插件

    (涉及到swiper.min.js,swiper.min.css,记得导入这两个文件。)
    两种样式:

    1)标题 + 页数。


    2)标题。


    第一种:标题+页数。

    <div class="swiper-container" id="swiper-container">
        <div class="swiper-wrapper" >
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/>
                <div class="title">第一张图</div>
                <div>
                	<span class="swiper-title"></span>
                	<span class="swiper-now"></span>
                </div>
            </div>
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="title">第二张图</div>
                <div>
                	<span class="swiper-title"></span>
                	<span class="swiper-now"></span>
                </div>
            </div>
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="title">第三张图</div>
                <div>
                	<span class="swiper-title"></span>
                	<span class="swiper-now"></span>
                </div>
            </div>
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="title">第四张图</div>
                <div>
                	<span class="swiper-title"></span>
                	<span class="swiper-now"></span>
                </div>
            </div>
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="title">第五张图</div>
                <div>
                	<span class="swiper-title"></span>
                	<span class="swiper-now"></span>
                </div>
            </div>
        </div>
        <!-- <div class="swiper-pagination" id="swiper-pagination"></div> -->
       
        
    </div>
    


    .swiper-slide {
         100%;
        height: 200px;
      /*  background: #999 url(../image/log.png) center center no-repeat;
        background-size: 200px auto;*/
    }
    
    .swiper-slide  img {
        100%;
        height: 100%;
    }
    
    .swiper-pagination {
        position: absolute;
        bottom: 10px;
    }
    .swiper-title{
    	line-height: 30px;
        position: absolute;
        text-align: right;
        bottom: 0px;
        height:30px;
        100%;
        background: rgba(0,0,0,.6);
        color: #fff;
        background: linear-gradient(bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));
    	background: -ms-linear-gradient(bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));        /* IE 10 */
    
    	background:-moz-linear-gradient(bottom,rgba(0,0,0,1),  rgba(0,0,0,.1));/*火狐*/ 
    
    	background:-webkit-gradient(linear,bottom rgba(0,0,0,1),  rgba(0,0,0,.1));/*谷歌*/ 
    
    	background: -webkit-gradient(linear,bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));      /* Safari 4-5, Chrome 1-9*/
    
    	background: -webkit-linear-gradient(bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));   /*Safari5.1 Chrome 10+*/
    
    	background: -o-linear-gradient(bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));  /*Opera 11.10+*/
    	/*z-index: 2;*/
    
    }
    .title{
    	font-size: 13px;
    	font-weight: 600;
    	 80%;
    	height: 30px;
    	line-height: 36px;
    	text-align: left;
    	position: absolute;
    	left: 15px;
    	bottom: 2px;
    	color: #fff;
    	z-index: 2;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    }
    .swiper-now{
    	position: absolute;
    	bottom: 6px;
    	right: 16px;
    	color: #4b9edc;
    }
    


    var mySwiper = new Swiper('.swiper-container',{
        pagination: '.swiper-pagination',
        loop:true,
        grabCursor: true,
        paginationClickable: true,
        autoplay: 3000
    });
    
    var now = document.querySelectorAll(".swiper-now"); 
    var imgs = document.querySelectorAll(".swiper-title");
    
    var count = imgs.length-2;
    for(var i=0;i<imgs.length;i++){
    	imgs[i].innerText = '/'+count;
    }
    
    now[0].innerText = '1';
    
    for(var i=1;i<imgs.length-1;i++){
        now[i].innerText = i;
    }
    now[imgs.length-1].innerText = '1';
    




    第二种:标题。

    <div class="swiper-container" id="swiper-container">
        <div class="swiper-wrapper" >
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第一页</div></div>
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第二页</div></div>
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第三页</div></div>
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第四页</div></div>
            <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第五页</div></div>
            
        </div>
        <!-- <div class="swiper-pagination" id="swiper-pagination"></div> -->
    <div id="page"><span id="now">1</span><span id="all"></span></div>
       
        
    </div>
    


    .swiper-slide {
         100%;
        height: 200px;
      /*  background: #999 url(../image/log.png) center center no-repeat;
        background-size: 200px auto;*/
    }
    
    .swiper-slide  img {
        100%;
        height: 100%;
    }
    
    .swiper-pagination {
        position: absolute;
        bottom: 20px;
    }
    .swiper-title{
        position: absolute;
        bottom: 0px;
        height:20px;
        100%;
        background: rgba(0,0,0,.6);
        color: #fff;
        text-align: center;
        background: linear-gradient(bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));
    	background: -ms-linear-gradient(bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));        /* IE 10 */
    
    	background:-moz-linear-gradient(bottom,rgba(0,0,0,1),  rgba(0,0,0,.1));/*火狐*/ 
    
    	background:-webkit-gradient(linear,bottom rgba(0,0,0,1),  rgba(0,0,0,.1));/*谷歌*/ 
    
    	background: -webkit-gradient(linear,bottom, rgba(0,0,0,1),  rgba(0,0,0,.1)));      /* Safari 4-5, Chrome 1-9*/
    
    	background: -webkit-linear-gradient(bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));   /*Safari5.1 Chrome 10+*/
    
    	background: -o-linear-gradient(bottom, rgba(0,0,0,1),  rgba(0,0,0,.1));  /*Opera 11.10+*/
    	/*z-index: 2;*/
    }
    #page{
    	position: absolute;
    	right: 20px;
    	bottom: 0;
    	background: red;
    }
    #page span{ display: block;color: #fff;float: left; }
    #page #now{ color: blue; }
    


    var mySwiper = new Swiper('.swiper-container',{
        pagination: '.swiper-pagination',
        loop:true,
        grabCursor: true,
        paginationClickable: true,
        autoplay: 1500
    });
    var img=document.getElementsByTagName("img").length-2;
    var all=document.getElementById("all");
    all.innerHTML="/ "+img;
    
  • 相关阅读:
    SD卡测试
    测试人员可能会遇到的问题
    HDU 1024 Max Sum Plus Plus
    HDU 1176 免费馅饼
    HDU 1257 最少拦截系统
    HDU 1087 Super Jumping! Jumping! Jumping!
    poj 1328 Radar Installation
    poj 1753 Flip Game
    HDU 1003 Max Sum
    HDU 5592 ZYB's Premutation(BestCoder Round #65 C)
  • 原文地址:https://www.cnblogs.com/hiuman/p/7347389.html
Copyright © 2011-2022 走看看