首页 > 代码库 > 非常优秀的swiper插件————幻灯片播放、图片轮播

非常优秀的swiper插件————幻灯片播放、图片轮播

2024-07-05 03:12:01   224人阅读

 

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

 

 

 

 

 


联系
我们