jQuery响应式滑动手风琴图片切换代码

jQuery响应式滑动手风琴图片切换代码，支持水平、垂直布局，可自定义遮罩层颜色样式。

分类：图片代码 > 图片滑动难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script src="js/accordion.js" type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('[class*="-accordion"]').not(":first").parents(".accordion-DIV").hide(),$(".btn-group > button").on("click",function(i){
		i.preventDefault();
		var o=$(this).index();
		$('[class*="-accordion"]').eq(o).parents(".accordion-DIV").show().siblings().hide()
		})
	}),
	
	$(".1-accordion").accordion({imageObj:horiObj.imageObj,animateWidth:800}),
	$(".2-accordion").accordion({imageObj:varObj.imageObj,arrangement:"verticality",defaultHeight:50}),
	$(".3-accordion").accordion({imageObj:horiObj.imageObj,response:!1,defaultWidth:75,animateWidth:500}),
	$(".4-accordion").accordion({imageObj:horiObj.imageObj,animateTime:"1.5s"}),
	$(".5-accordion").accordion({imageObj:horiObj.imageObj,styleColor:{background:"red",font:"#fff",textShadow:"0px 0px 1px blue"}
	
});
</script>

调用方法

{
imageObj : [], //存放图片对象
arrangement : "horizontal", //verticality 对齐方式
fontCut : 500, //文字截取（500个字符内）
defaultWidth : 100, //默认初始宽度
defaultHeight : 100, //默认初始高度
animateWidth : 600, //默认放大宽度
animateHeight : 200, //默认放大高度
response : true, //是否使用响应式
styleColor : {"background":"white","font":"#333333","textShadow":"0px 0px 1px green"}, //自定义遮罩颜色样式
animateTime : "0.5s", //动画速度
};