不会JS ，一秒钟让你会写轮播，不会你打我

来源：互联网发布：linux命令安装oracle 编辑：程序博客网时间：2024/04/28 09:11

1.我以前也是自己写轮播，用原声js写，后台也用一些人家写好的插件，后来发现有swiper这东西后，写轮播省了很多时间，不扯直接写demo，简单粗暴好了解、

首先如果你还有这些插件，请到http://www.swiper.com.cn/download/index.html#file7下载
我们需要用到swiper.css和swiper.js以及jquery.js相信这些东西你们都知道哪里下，百度一艘一大推
还是好人做到底

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <link rel="stylesheet" type="text/css" href="swiper-3.4.2.min.css"/>        <script src="swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>        <script src="jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>        <style type="text/css">            .swiper-container {                width: 600px;                height: 300px;            }          </style>    </head>    <body>        <div class="swiper-container">            <div class="swiper-wrapper">                <div class="swiper-slide" style="background: red;">Slide 1</div>                <div class="swiper-slide" style="background: darkcyan;">Slide 2</div>                <div class="swiper-slide" style="background: firebrick;">Slide 3</div>            </div>            <!-- 如果需要分页器 -->            <div class="swiper-pagination"></div>            <!-- 如果需要导航按钮 -->            <div class="swiper-button-prev"></div>            <div class="swiper-button-next"></div>            <!-- 如果需要滚动条 -->            <div class="swiper-scrollbar"></div>        </div>    </body>    <script type="text/javascript">        window.onload = function() {                 var mySwiper = new Swiper('.swiper-container', {                    autoplay: 1000,//可选选项，自动滑动                    keyboardControl : true,//键盘左右键切换                    mousewheelControl : true,//鼠标滚轮                    //slide的切换效果，默认为"slide"（位移切换）                    //可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。                    effect : 'fade',//自己选择                    //direction : 'vertical',垂直轮播                    pagination : '.swiper-pagination',//分页下面的小圆点                    prevButton:'.swiper-button-prev',//上一页                    nextButton:'.swiper-button-next',//下一页                    zoom : true,//聚焦功能，点击图片放大                })        }    </script></html>

更其实下面还有很多属性，不一一列举了，要深入研究的可以去官方文档去看，我们可以使用多个swiper来嵌套，写出更精点的东西，
就比如你进官网点击swiper的英文网站，首页那个特效就是三个swiper组在一起来写的。

到了这里你还敢说你自己不会写轮播，不会追问，

阅读全文

0 0