元宵节微场景、微海报HTML5页面

xxz · 发表于 2017-2-23 14:06:44

下来看看

996024364 · 发表于 2017-2-23 15:58:14

如何下载

破竹缭乱 · 发表于 2017-2-23 16:20:36

看看怎么用的借鉴一下

呐，单细胞 · 发表于 2017-2-23 21:59:45

学习学习

方木大神 · 发表于 2017-2-24 10:52:21

学习起来，以后结婚了，可以自己做！

swipers · 发表于 2017-2-24 11:01:44

<!DOCTYPE html>
<html>
<head>
<title>swiper</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="animate.min.css">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.swiper-container {
padding: 19px 0;
}
.swiper-slide{
width:82%;
padding:0 2%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background: red;">1</div>
<div class="swiper-slide" style="background: green;">2</div>
<div class="swiper-slide" style="background: blue;">3</div>
<div class="swiper-slide" style="background: red;">4</div>
<div class="swiper-slide" style="background: green;">5</div>
<div class="swiper-slide" style="background: blue;">6</div>
<div class="swiper-slide" style="background: red;">7</div>
</div>
</div>
<script type = "text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="swiper.animate1.0.2.min.js"></script>
<script type = "text/javascript" src="swiper-3.4.1.jquery.min.js"></script>
<script type="text/javascript">
function html(i) {
return '<div class="swiper-slide" style="background: red;">'+i+'</div>';
}
var swiper = new Swiper('.swiper-container', {
roundLengths:true,
initialSlide:2,
slidesPerView:"auto",
centeredSlides:true,
followFinger:false
});
today = 0;
pre = 2;
next = 2;
swiper.appendSlide(html(today));
swiper.appendSlide(html(today+1));
swiper.appendSlide(html(today+2));
swiper.prependSlide(html(today-1));
swiper.prependSlide(html(today-2));
swiper.on('slideChangeStart', function (swiper) {
swiper.lockSwipes();
});
swiper.on('slideChangeEnd', function (swiper) {
swiper.unlockSwipes();
if (swiper.activeIndex == 1) {
pre ++;
swiper.prependSlide(html(today - pre));
} else if (swiper.activeIndex == swiper.slides.length - 1) {
next ++;
swiper.prependSlide(html(today + next));
}
});
</script>
</body>
</html>

复制代码

zzqzzq · 发表于 2017-2-24 12:46:57

谢谢分享

917112308 · 发表于 2017-2-24 13:33:00

2呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃

kukugao · 发表于 2017-2-24 14:39:26

kyd------------------

weizf2000 · 发表于 2017-2-25 10:26:44

可以下载吗。