<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