1,本方法是用http://jqweui.com/extends#photos里面的方法来调用的,只是做个记录
2,首先引入jq文件和css文件
css文件
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
jq文件
<script type="text/javascript" src="js/jquery-2.1.4.js" ></script>
<script type="text/javascript" src="js/jquery-weui.js" ></script>
<script type="text/javascript" src="js/swiper.min.js" ></script>
js代码
<script>
//初始化代码
$(function() {
FastClick.attach(document.body);
});
//图片放大
var pb1 = $.photoBrowser({
items: [
//图片路径
"./img/ad_auto.jpg",
"./img/ad_home.jpg",
"./img/ad_nba.jpg",
"./img/ad_stock.jpg",
"./img/ad_yuetu.jpg",
],
//可翻页
onSlideChange: function(index) {
console.log(this, index);
},
onOpen: function() {
console.log("onOpen", this);
},
onClose: function() {
console.log("onClose", this);
}
});
//开始显示用的是第几张,这里是第0张开始就是第一张开始
$("#pb1").click(function() {
pb1.open(0);
});
</script>
html代码
<div class='demos-content-padded'>
<a href="javascript:;" id="pb1"><img src="img/ad_auto.jpg"/></a>
</div>
网友评论