<link rel="stylesheet" href="/ie/idangerous.swiper.css">
<script src="/ie/jquery-1.10.1.min.js"></script>
<script src="/ie/idangerous.swiper.min.js"></script>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<foreach name="blist" item="r" key="k" >
<div class="swiper-slide" ><img src="{$r.img_path}" style="width: 100%; "></div>
</foreach>
</div>
<div class="pagination"></div>
<!-- 左右箭头 -->
<!--
<div style="
width: 1200px;
height: 60px;
position: absolute;
top:79%;
left: 50%;
margin-left: -600px;
overflow: hidden;
z-index: 9;">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>-->
</div>
<script>
$(document).ready(function(){
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,//可选选项，自动滑动
loop : true,//可选选项，开启循环
calculateHeight : true,
pagination : '.pagination',
paginationClickable :true,roundLengths : true,slidesPerView : 1,autoResize : false,
})
$('#sdafasdfdsimgmmm').hide();
$(".swiper-slide img").each(function(){
$(this).show();
});
});
</script>
<style type="text/css">
.pagination {
position: absolute;
z-index: 20;
bottom: 10px;
width: 100%;
text-align: center;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;width: 42px;
height: 5px;
display: block;
background-color: #323232;
margin-left: 18px;
display: inline-block;border-radius: 0px;
}
.swiper-active-switch {
background: #fff;opacity: 1;
background: #3FDEC7;
width: 42px;
height: 5px;
display: block;
display: inline-block;border-radius: 0px;
}.bj>.in_news>.neih>.xinw>a>.meige>.ner>p{height:38px;}
/*利用:after伪元素*/
.clearUl:after {
content:"";
display: block;
clear: both;
}
</style>
css js 附件下载
swiper2文档
superslide2
Swiper的初始化与更新
用js监视用户浏览器的大小变动
js 页面宽度 js 监听页面宽度变化 js 监听页面宽度变化 js监控页面变化
js获取浏览器和设备相关width（屏幕的宽度）
Swiper有边框
图片有边框 幻灯片下边有边框 有背景色 盒子高度比图片高 7个像素 7px 底部距离
Swiper2说明文档
roundLengths
值为true时，Swiper会四舍五入宽度和高度
类型：boolean默认：false举例： true
当滑动组有边框线，宽度不够超出或者
禁止拖动
使该slide无法拖动 swiper禁止手动滑动 swiper-no-swiping swiper禁止鼠标拖动
swiper 中禁止鼠标拖动切换图片
noSwiping