今天又是周五了
突然發(fā)現(xiàn)這周好像忙死,一直沒時(shí)間研究些有的沒的
但是~
鑒于本人要盡量避免被嫌棄拖稿的命運(yùn),今天還是研究點(diǎn)東西拿出來~~
之前每次在做移動(dòng)專題的時(shí)候經(jīng)??嘤跊]有橫滑模板很多創(chuàng)意都不能實(shí)現(xiàn),
昨天突然發(fā)現(xiàn)一款模板,稍微變化整理得出一款萬能橫滑模板,
不管你能不能看的懂,貼出來共享一下。
看不懂的可以免費(fèi)提問哦~
HTML代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>swipertest</title>
<meta name="viewport" content="target-densitydpi=device-dpi,width=1080,user-scalable=0" />
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/common.css">
<div id='wx_pic' style='margin:0 auto;display:none;'>
<img src='images/share.png' />
</div>
</head>
<body ontouchmove="event.preventDefault()">
<div id="loading"><span>0%</span></div>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="home"></div>
<div class="swiper-slide" id="page2"></div>
<div class="swiper-slide" id="page3"></div>
<div class="swiper-slide" id="page4"></div>
<div class="swiper-slide" id="page5"></div>
<div class="swiper-slide" id="page6"></div>
</div>
</div>
<audio preload="auto" autoplay="autoplay" loop="loop" style="width:0;height:0" id="bgvideo">
<source src="images/video.mp3" type="audio/mpeg" />
</audio>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.imgpreload.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>```


這只是前端代碼,圖中框里插入的CSS文件,JS文件,以及所需的圖片文件統(tǒng)統(tǒng)都要放在同一目錄下進(jìn)行使用,
我將具體做好的swipertest放在**“閱讀原文”**中,打開就能看到橫滑模板具體效果。
好了不說了不說了,今天是周五,昨天是感恩節(jié),祝大家好好過節(jié),好好過周末。