幻灯片播放、图片轮播————非常优秀的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插件————幻灯片播放、图片轮播