可拖动的轮播图

最新推荐文章于 2024-04-09 11:15:19 发布

weixin_30527423

最新推荐文章于 2024-04-09 11:15:19 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hiuman/p/7347389.html

本文介绍了使用Swiper实现带有标题及页数显示的轮播图效果，包括两种样式配置方法，一种为每张图片下方展示标题和当前页数，另一种仅显示标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（涉及到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 {
    width: 100%;
    height: 200px;
  /*  background: #999 url(../image/log.png) center center no-repeat;
    background-size: 200px auto;*/
}

.swiper-slide  img {
    width:100%;
    height: 100%;
}

.swiper-pagination {
    position: absolute;
    bottom: 10px;
}
.swiper-title{
	line-height: 30px;
    position: absolute;
    text-align: right;
    bottom: 0px;
    height:30px;
    width: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;
	width: 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 {
    width: 100%;
    height: 200px;
  /*  background: #999 url(../image/log.png) center center no-repeat;
    background-size: 200px auto;*/
}

.swiper-slide  img {
    width:100%;
    height: 100%;
}

.swiper-pagination {
    position: absolute;
    bottom: 20px;
}
.swiper-title{
    position: absolute;
    bottom: 0px;
    height:20px;
    width: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;

转载于:https://www.cnblogs.com/hiuman/p/7347389.html