<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper中文网基础演示(www.swiper.com.cn)</title>
<link rel="stylesheet" href="css/swiper.min.css">
<!--Swiper3.0.4-->
<style>
* {
margin: 0;
padding: 0;
}
.swiper-slide {
height: 350px;
width: 100%;
overflow: hidden;
}
.swiper-slide img{
height: 350px;
width: 100%;
}
.swiper-container .swiper-pagination{
position: absolute;
right: 80px;
top: 20px;
list-style-type: none;
width: 250px;
height: 304px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.swiper-container .swiper-pagination a{
display: block;
width: 210px;
height: 20px;
border-bottom: 1px solid #3e3e40;
color: #fff;
font-size: 14px;
line-height: 20px;
padding: 20px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
background-color: #262626;
opacity: 0.9;
text-decoration: none;
}
.swiper-container .swiper-pagination .active a{
color: #fd521d;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper banner_sidebar">
<div class="swiper-slide blue-slide">
<a href="https://www.renrenche.com/appdown?plog_id=9d36ab2067699aa6a12629f3eb224579">
</a>
</div>
<div class="swiper-slide red-slide">
<a href="https://www.renrenche.com/sales?fromSource=pc-index-banner&plog_id=9d36ab2067699aa6a12629f3eb224579">
</a>
</div>
<div class="swiper-slide orange-slide">
<a href="https://bbs.renrenche.com/forum.php?mod=viewthread&tid=64302&plog_id=9d36ab2067699aa6a12629f3eb224579">
</a>
</div>
<div class="swiper-slide red-slide">
<a href="https://bbs.renrenche.com/forum.php?mod=viewthread&tid=64272&plog_id=9d36ab2067699aa6a12629f3eb224579">
</a>
</div>
<div class="swiper-slide orange-slide">
<a href="https://bbs.renrenche.com/forum.php?mod=viewthread&tid=48142&plog_id=9d36ab2067699aa6a12629f3eb224579">
</a>
</div>
<ul class="swiper-pagination"></ul>
</div>
</div>
<script src="js/swiper-3.4.2.min.js"></script>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
// 分页器
pagination : '.swiper-pagination',
autoplay: 3000,
speed: 100,
loop: true,
effect: 'fade',
paginationClickable :true,
// 自定义分页器必须设置custom
paginationType : 'custom',
autoplayDisableOnInteraction : false,
preventClicks : true,
preventLinksPropagation : false,
// 自定义特殊类型分页器，当分页器类型设置为自定义时可用。
paginationCustomRender: function (swiper, current, total) {
var list_info = [
"买车靠谱！卖车划算！",
"极速卖车，卖给个人价更高",
"大众途观VS本田CRV，买谁更划算？",
"人人车体验店送福利啦！",
"拒绝一百万次，只为更加靠谱"
]
var list_a = [
"https://www.renrenche.com/appdown?plog_id=9d36ab2067699aa6a12629f3eb224579",
"https://www.renrenche.com/sales?fromSource=pc-index-banner&plog_id=9d36ab2067699aa6a12629f3eb224579",
"https://bbs.renrenche.com/forum.php?mod=viewthread&tid=64302&plog_id=9d36ab2067699aa6a12629f3eb224579",
"https://bbs.renrenche.com/forum.php?mod=viewthread&tid=64272&plog_id=9d36ab2067699aa6a12629f3eb224579",
"https://bbs.renrenche.com/forum.php?mod=viewthread&tid=48142&plog_id=9d36ab2067699aa6a12629f3eb224579"
]
var _html = '';
for (var i = 0; i < total; i++) {
if (current == i + 1) {
_html += '<li class="swiper-pagination-custom active"><a href='+list_a[i]+'>' + list_info[i] + '</a></li>';
}else{
_html += '<li class="swiper-pagination-custom"><a href='+list_a[i]+'>' + list_info[i] + '</a></li>';
}
}
return _html;//返回所有的页码html
}
});
//给每个页码绑定跳转的事件
$('.swiper-pagination').on('mouseover','li',function(){
//index()方法获取当前元素在兄弟元素的排行
var index = $(this).index() + 1
mySwiper.slideTo(index, 500, true);
})
// 加完mySwiper.slideTo()之后，自定义标签中的a标签的默认行为失效了
</script>
</script>
</body>
</html>
Swiper切换到指定slide。
mySwiper.slideTo(index, speed, runCallbacks)
index:必选，num，指定将要切换到的slide的索引。
speed:可选，num(单位ms)，切换速度
runCallbacks:可选，boolean，设置为false时不会触发onSlideChange回调函数。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
