幻灯片播放、图片轮播————非常优秀的swiper插件
http://www.idangero.us/sliders/swiper/index.php 插件主页
http://www.idangero.us/sliders/swiper/api.php 插件API
http://www.idangero.us/sliders/swiper/demos.php 插件DEMO
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" /> <!-- jquery库 --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- <script src="js/zepto.min.js"></script> --> <!-- 图片轮播 --> <!-- <link href="plugin/idangerous.swiper.css" rel="stylesheet" type="text/css" /> <script src="plugin/idangerous.swiper-2.0.min.js"></script> --> <link href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css" rel="stylesheet" type="text/css" /> <script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script> </head> <body> <style type="text/css"> .main{width:540px;margin:0 auto;overflow:auto;zoom:1;} </style> <!-- 首页头条新闻(4张) --> <!-- 图片轮播 --> <div class="main" style="position:relative;"> <div class="swiper-container" id="swiper-container"> <div class="swiper-wrapper" id=""> <div class="swiper-slide"><a href="news_detail.html?id=51"><img src="http://192.168.81.11:8080/tzyb/newsBannerImage/1400489533563.gif" width="540" height="220" border="0"></a><div class="title-bg"></div><div class="title">幻灯片演示一</div></div> <div class="swiper-slide"><a href="news_detail.html?id=50"><img src="http://192.168.81.11:8080/tzyb/newsBannerImage/1400489390403.gif" width="540" height="220" border="0"></a><div class="title-bg"></div><div class="title">幻灯片演示222222222222</div></div> <div class="swiper-slide"><a href="news_detail.html?id=49"><img src="http://192.168.81.11:8080/tzyb/newsBannerImage/1400489313488.gif" width="540" height="220" border="0"></a><div class="title-bg"></div><div class="title">幻灯片演示3333333333333</div></div> <div class="swiper-slide"><a href="news_detail.html?id=48"><img src="http://192.168.81.11:8080/tzyb/newsBannerImage/1400489263558.gif" width="540" height="220" border="0"></a><div class="title-bg"></div><div class="title">幻灯片演示4444444444444</div></div> </div> </div> <div class="my-pager"></div> </div> <style> .swiper-container {width: 100%;} .my-pager {position: absolute;left:0;text-align: right;bottom:0;width: 96%;height:30px;line-height:30px;z-index:100;} .swiper-pagination-switch {display: inline-block;width: 8px;height: 8px;border-radius: 8px;background: #999;-webkit-box-shadow: 0px 1px 2px #555 inset;box-shadow: 0px 1px 2px #555 inset;margin: 0 3px;cursor: pointer;} .swiper-active-switch {background: #fff;} #swiper-container img{width:100%;} #swiper-container .title{position:absolute;bottom:0;width:100%;height:30px;line-height:30px;color:#FFF;font-size:20px;z-index:2;} #swiper-container .title-bg{position:absolute;bottom:0;width:100%;height:30px;background:#000;opacity:0.6;filter:alpha(opacity=60);z-index:1;} .swiper-wrapper{overflow:auto;zoom:1;} .swiper-slide{position:relative;} </style> <script> $(function(){ var mySwiper = new Swiper(‘.swiper-container‘,{ pagination: ‘.my-pager‘, autoplay:3000, loop:true, grabCursor: true, paginationClickable: true }) var containerH=$("#swiper-container").find("img").first().height(); $("#swiper-container").height(containerH); }); </script> <!-- 图片轮播,end --> </body> </html>
非常优秀的swiper插件————幻灯片播放、图片轮播,布布扣,bubuko.com
原文：http://www.cnblogs.com/qq21270/p/3737456.html