首页 > 代码库 > 非常优秀的swiper插件————幻灯片播放、图片轮播
非常优秀的swiper插件————幻灯片播放、图片轮播
幻灯片播放、图片轮播————非常优秀的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="http://www.mamicode.com/js/zepto.min.js"></script> --> <!-- 图片轮播 --> <!-- <link href="http://www.mamicode.com/plugin/idangerous.swiper.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。