橫滑模板代碼來了,自行取用哇

今天又是周五了
突然發(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>```

![](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文件,以及所需的圖片文件統(tǒng)統(tǒng)都要放在同一目錄下進(jìn)行使用,
我將具體做好的swipertest放在**“閱讀原文”**中,打開就能看到橫滑模板具體效果。

好了不說了不說了,今天是周五,昨天是感恩節(jié),祝大家好好過節(jié),好好過周末。 
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,001評(píng)論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,225評(píng)論 4 61
  • 子日:“道千乘之國,敬事而信,節(jié)用而愛人,使民以時(shí)?!笨鬃诱J(rèn)為,治理諸侯之國有五件重要的事情:盡忠職守、令出必行...
    番茄媽閱讀 2,177評(píng)論 0 0
  • 藍(lán)竹雨輕輕的邁起步伐,走在冷風(fēng)中,在她的人生里被嘲笑過多少次,她已經(jīng)不記得了。 在最美的雨...
    洛小檸閱讀 230評(píng)論 0 1
  • 若不是一場突如其來的雷暴雨,若不是擔(dān)驚受怕后的虛脫,還不知道,有種依戀原來纏繞著我。 一直很喜歡貓,只因自小...
    嘰哩咕嚕AMY貓閱讀 440評(píng)論 0 1

友情鏈接更多精彩內(nèi)容