jQuery全屏自适应图片切换和放大缩小代码

来源:https://www.sucaihuo.com/js/5006.html 2019-12-19 10:59浏览(385) 收藏

jQuery全屏自适应图片切换和放大缩小代码,鼠标滚轮控制图片放大缩小拖动,左右箭头按钮控制幻灯片图片切换。
jQuery全屏自适应图片切换和放大缩小代码
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 9 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.3.js"></script>
<script type="text/javascript" src="js/e-smart-zoom-jquery.min.js"></script>
<script type="text/javascript">
	function resize(){
		$("div.zoom,div.zoombtn").width($(window).width());
		$("div.zoom,div.zoomlist,.list,.imgContainer").height($(window).height());
		$("div.zoomlist,.tempWrap,.imgContainer").width($(window).width()-80);
	};
	$(window).resize(function(){resize()});
	$(function(){
		resize();
		jQuery(".zoom").slide({mainCell:".zoomlist .list",prevCell:".prev",nextCell:".next",effect:"fade",scroll:1,vis:1});
		
		$('img#imageFullScreen_1').smartZoom({'containerClass':'zoomableContainer'});
        var listlength=$(".list .zoombd").length+1;
		var linshi=1;
		function nexta(){
			linshi = linshi+1;
			if(linshi<=listlength){
				$("img#imageFullScreen_"+linshi).smartZoom({'containerClass':'zoomableContainer'});
			}else{
				linshi--;
			 	$("img#imageFullScreen_"+linshi).smartZoom({'containerClass':'zoomableContainer'});
			}	
		};
		function preva(){
			linshi = linshi-1;
			linshi=Math.abs(linshi);
			if(linshi==0){
				linshi=6;
				$("img#imageFullScreen_"+linshi).smartZoom({'containerClass':'zoomableContainer'});
			}else{
				$("img#imageFullScreen_"+linshi).smartZoom({'containerClass':'zoomableContainer'});    
			}	
		};
		$(".next").click(function(){nexta()});
		$(".prev").click(function(){preva()});	
	});
	

</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2