轮播--点击图片弹出遮罩层的轮播图
实现效果:
1.鼠标经过图片改变图片的透明度
2.点击图片,弹出遮罩层
3.点击遮罩层左右箭头,实现轮播;
4.点击遮罩层图片以外的部分,关闭遮罩层
使用方法:
html:
<div id="wrap">
</div>
css:
*{
margin: 0;
padding: 0;
}
img{
border: none;
display: block;
float: left;
}
#wrap{
width: 800px;
height: 400px;
background: #000;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
#wrap img.smallImg{
float: left;
display: block;
opacity: 0.5;
filter: alpha(opacity=50);
}
#wrap img.cur{
opacity: 1;
filter: alpha(opacity=100);
}
#wrap img.current{
opacity: 1;
filter: alpha(opacity=100);
}
js:
jump({
//所有图片的最外层容器的ID
wrapId:'wrap',
//显示图片的最外层容器的ID
itemId:'item',
//遮罩层的最外层容器的ID
zoomId:'zoom',
//遮罩层图片的宽度
width: 1000,
//遮罩层图片的高度
height: 420,
//打开页面显示的小图片
imgsArr:['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg'],
//遮罩层的大图片
bigImgsArr:['images/-1.jpg','images/-2.jpg','images/-3.jpg','images/-4.jpg','images/-5.jpg','images/-6.jpg']
})
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。