您的位置：首页 > 其它

大图滚动

2016-07-14 09:33 302 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="UTF-8">
<title>swiper1</title>
<link
rel="stylesheet"
type="text/css" href="css/swiper.min.css"
/>
<style
type="text/css">
body
{
background-color:
#ccc;
}

.swiper-container
{
width:
943px;
height:
500px;
margin-top:
100px;
cursor:
pointer;
overflow:
hidden;
}
img{
width:
100%;
height:
100%;
}
</style>
</head>

<body>
<div
class="swiper-container">
<div
class="swiper-wrapper">
<div
class="swiper-slide">
<img
src="img/10.jpg"
/>
</div>
<div
class="swiper-slide">
<img
src="img/11.jpg"
/>
</div>
<div
class="swiper-slide">
<img
src="img/12.jpg"
/>
</div>
<div
class="swiper-slide">
<img
src="img/13.jpg"
/>
</div>
<div
class="swiper-slide">
<img
src="img/15.jpg"
/>
</div>
<div
class="swiper-slide">
<img
src="img/16.jpg"
/>
</div>
<div
class="swiper-slide">
<img
src="img/18.jpg"
/>
</div>
<div
class="swiper-slide">
<img
src="img/19.jpg"
/>
</div>
<div
class="swiper-slide">
<img
src="img/20.jpg"
/>
</div>
</div>
<div
class="swiper-pagination"></div>
<div
class="swiper-button-prev"></div>
<div
class="swiper-button-next"></div>
</div>
<script
src="js/swiper.min.js"
type="text/javascript" charset="utf-8"></script>
<script
type="text/javascript">
var
mySwiper = new Swiper('.swiper-container', {
carousel:true,
slidesPerView:2,
speed:
1000,
keyboardControl:
true,
grabCursor:
true,
direction:'horizontal',
loop:
true,
pagination:
'.swiper-pagination',
paginationClickable:
true,
paginationBulletRender:
function(index,
className) {
return
'<span class=' + className
+ '></span>';
},
nextButton:
'.swiper-button-next',
prevButton:
'.swiper-button-prev',
autoplay:
2000,
autoplayDisableOnInteraction:
false,

effect:
'coverflow',
centeredSlides:
true,
slidesPerView:
'auto',
coverflow:
{
rotate:
50,
stretch:
1,
depth:
1000,
modifier:
1,
slideShadows:
true
}
});
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 滚动

相关文章推荐

新的分享

章节导航