复制下面的代码，直接保存为huadong.htm就可以马上查看效果了，小编也是找了一天才找到这个好用的插件，现在和大家分享。

ps:每次发一些简单的功能总有人骂说这么简单的东西发出来干嘛，拜托那是你会了好么，不会的人看到了还是有帮助的好吗？至少给需要的人节约一点时间也比你在这瞎抱怨强吧。。个人意见

想改变大小，或者切换时间等等，只要会一点简单的代码基础就可以自己看着改，需要更多的切换方式请查看开发文档。效果如下

<style>

.swiper-container {

width: 600px;

height: 150px;

}

</style>

<link rel="stylesheet" href="http://www.anlian1.com/swiper.min.css">

<script src="http://www.anlian1.com/swiper.min.js"></script>

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide" style="background-color:red;"><img src="http://www.anlian1.com/a1.jpg"></div>

<div class="swiper-slide" style="background-color:blue;"><img src="http://www.anlian1.com/a2.jpg"></div>

<div class="swiper-slide" style="background-color:yellow;"><img src="http://www.anlian1.com/a3.jpg"></div>

</div>

<div class="swiper-pagination"></div>

</div>

<script>

var mySwiper = new Swiper ('.swiper-container', {

autoplay: 3000,

loop: true,

pagination: '.swiper-pagination',

})

</script>

保存上面的代码就可以运行了，觉得简单的同学就可以直接拿去修改着用了，不懂的同学可以看下面的简单的注释

<style>

.swiper-container {

width: 600px; //定义banner宽度

height: 150px; //定义banner高度

}

</style>

<link rel="stylesheet" href="
http://www.anlian1.com/swiper.min.css"> //引入样式文件

<script src="
http://www.anlian1.com/swiper.min.js"></script> //引入js文件

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide" style="background-color:red;"><img src="
http://www.anlian1.com/a1.jpg"></div> //第一张banner图片

<div class="swiper-slide" style="background-color:blue;"><img src="
http://www.anlian1.com/a2.jpg"></div> //第二张banner图片

<div class="swiper-slide" style="background-color:yellow;"><img src="
http://www.anlian1.com/a3.jpg"></div> //第三张banner图片

</div>

<div class="swiper-pagination"></div>

</div>

<script>

var mySwiper = new Swiper ('.swiper-container', {

autoplay: 3000, //开启自动切换

loop: true, //开启循环切换

pagination: '.swiper-pagination',

})

</script>