<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>文字垂直滚动
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="swiper/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body { position: relative; height: 100%; }
body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; }
/* 公告滚动 */
.notice-swiper { position: relative; width: 600px; height: auto; padding: 10px; margin: 30px auto; border: 2px solid #222; background-color: #fff; }
.notice-swiper .swiper-container { width: 100%; height: 40px; }
.notice-swiper .swiper-slide { height: 20px; line-height: 20px; }
.notice-swiper .swiper-slide a { color: #333; }
.notice-swiper .swiper-pagination { position: absolute; }
.notice-swiper .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 3px 0; display: block; }
.notice-swiper .swiper-button-next, .notice-swiper .swiper-button-prev { position: absolute; left: auto; right: 0; top: -22px; margin: 0; width: 16px; height: 16px; background-size: 16px 10px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.notice-swiper .swiper-button-prev { margin-right: 20px; }
</style>
</head>
<body>
<div class="notice-swiper">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#">2006年1月John Resig等人创建了jQuery
</a></div>
<div class="swiper-slide"><a href="#">8月，jQuery的第一个稳定版本
</a></div>
<div class="swiper-slide"><a href="#">事件处理和AJAX交互
</a></div>
<div class="swiper-slide"><a href="#">jQuery的性能达到了Prototype
</a></div>
<div class="swiper-slide"><a href="#">Mootools以及Dojo等同类JavaScript库的水平
</a></div>
<div class="swiper-slide"><a href="#">2008年5月，jQuery 1.2.6版发布
</a></div>
<div class="swiper-slide"><a href="#">微软和诺基亚公司正式宣布支持开源的jQuery库
</a></div>
<div class="swiper-slide"><a href="#">它使用了全新的选择符引擎Sizzle
</a></div>
<div class="swiper-slide"><a href="#">2010年1月，也是jQuery的四周年生日
</a></div>
<div class="swiper-slide"><a href="#">jQuery通过eval方法来解析json对象
</a></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div>
注意：如果公告总高度过低，且行数太多的时候，垂直分页点在滚动到后面的时候，当前点会被遮挡！所以为保证分页点的美观，如果公告总高度比较低，应该限制总行数。
</div>
<script src="js/jquery.min.js"></script>
<!-- Swiper JS -->
<script src="swiper/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var mySwiper = new Swiper('.notice-swiper .swiper-container', {
direction: 'vertical',
slidesPerView: 2, // 每页显示几个slide
spaceBetween: 0, // slide的间距px
followFinger : false, //
speed: 400, // 速度
mousewheel: true, // 鼠标滚轮控制
loop: $(".notice-swiper .swiper-slide").length > 2, // 循环
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
pagination: {
el: '.notice-swiper .swiper-pagination',
clickable: true,
dynamicBullets: true
},
navigation: {
nextEl: '.notice-swiper .swiper-button-next',
prevEl: '.notice-swiper .swiper-button-prev',
},
});
// 鼠标移入停止自动滚动
$('.notice-swiper .swiper-slide').mouseenter(function() {
mySwiper.autoplay.stop();
})
// 鼠标移出开始自动滚动
$('.notice-swiper .swiper-slide').mouseleave(function() {
mySwiper.autoplay.start();
})
</script>
</body>
</html>
效果：
转载于:https://www.cnblogs.com/mankii/p/11505762.html
相关资源：Swiper滑动上下左右翻页.zip
