横滑模板代码来了，自行取用哇

今天又是周五了
突然发现这周好像忙死，一直没时间研究些有的没的
但是~
鉴于本人要尽量避免被嫌弃拖稿的命运，今天还是研究点东西拿出来~~

之前每次在做移动专题的时候经常苦于没有横滑模板很多创意都不能实现，
昨天突然发现一款模板，稍微变化整理得出一款万能横滑模板，
不管你能不能看的懂，贴出来共享一下。
看不懂的可以免费提问哦~

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>```

![](http://upload-images.jianshu.io/upload_images/3487541-33f697a946e27bfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![](http://upload-images.jianshu.io/upload_images/3487541-5c2197f15bda2fd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


这只是前端代码，图中框里插入的CSS文件，JS文件，以及所需的图片文件统统都要放在同一目录下进行使用，
我将具体做好的swipertest放在**“阅读原文”**中，打开就能看到横滑模板具体效果。

好了不说了不说了，今天是周五，昨天是感恩节，祝大家好好过节，好好过周末。

横滑模板代码来了，自行取用哇

推荐阅读更多精彩内容