jquery图片切换带缩略图片滚动切换

最新推荐文章于 2019-12-14 14:20:43 发布

芳踪_若梦

最新推荐文章于 2019-12-14 14:20:43 发布

阅读量1.5k

点赞数

分类专栏：技术文章标签： jquery 图片

技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jquery图片切换效果，制作一个通过小图缩略图点击切换显示相应的大图，当缩略图过多时可以点击左右按钮控制缩略图片左右滚动，进行更多的图片切换。效果图如下：

简单例子demo.html如下：

<!DOCTYPE html>
<html lang="zh-CN" manifest="cache.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>详细-首页</title>


<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
/* zoombox */
.zoombox{width:446px;margin:6px 0 0 0;}
.zoompic{border:solid 1px #dfdfdf;width:444px;height:364px;background:url(images/loading.gif) no-repeat 50% 50%;}

.sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}
.sliderbox .arrow-btn{width:38px;height:76px;background:url(images/arrow-btn.png) no-repeat;cursor:pointer;}
.sliderbox #btn-left{float:left;background-position:0 0;}
.sliderbox #btn-left.dasabled{background-position:0 -76px;}
.sliderbox #btn-right{float:right;background-position:-38px 0;}
.sliderbox #btn-right.dasabled{background-position:-38px -76px;}
.sliderbox .slider{float:left;height:76px;width:365px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}
.sliderbox .slider ul{position:absolute;left:0;width:999em;}
.sliderbox .slider li{float:left;width:121px;height:76px;text-align:center;}
.sliderbox .slider li img{border:solid 1px #dfdfdf;}
.sliderbox .slider li.current img{border:solid 1px #3366cc;}

</style>
</head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
	
	//点击小图切换大图
	$("#thumbnail li a").click(function(){
		$(".zoompic img").hide().attr({ "src": $(this).attr("href"), "title": $("> img", this).attr("title") });
		$("#thumbnail li.current").removeClass("current");
		$(this).parents("li").addClass("current");
		return false;
	});
	$(".zoompic>img").load(function(){
		$(".zoompic>img:hidden").show();
	});
	
	//小图片左右滚动
	var $slider = $('.slider ul');
	var $slider_child_l = $('.slider ul li').length;
	var $slider_width = $('.slider ul li').width();
	$slider.width($slider_child_l * $slider_width);
	
	var slider_count = 0;
	
	if ($slider_child_l < 3) {
		$('#btn-right').css({cursor: 'auto'});
		$('#btn-right').removeClass("dasabled");
	}
	
	$('#btn-right').click(function() {
		if ($slider_child_l < 3 || slider_count >= $slider_child_l - 3) {
			return false;
		}
		
		slider_count++;
		$slider.animate({left: '-=' + $slider_width + 'px'}, 'fast');
		slider_pic();
	});
	
	$('#btn-left').click(function() {
		if (slider_count <= 0) {
			return false;
		}
		slider_count--;
		$slider.animate({left: '+=' + $slider_width + 'px'}, 'fast');
		slider_pic();
	});
	
	function slider_pic() {
		if (slider_count >= $slider_child_l - 3) {
			$('#btn-right').css({cursor: 'auto'});
			$('#btn-right').addClass("dasabled");
		}
		else if (slider_count > 0 && slider_count <= $slider_child_l - 3) {
			$('#btn-left').css({cursor: 'pointer'});
			$('#btn-left').removeClass("dasabled");
			$('#btn-right').css({cursor: 'pointer'});
			$('#btn-right').removeClass("dasabled");
		}
		else if (slider_count <= 0) {
			$('#btn-left').css({cursor: 'auto'});
			$('#btn-left').addClass("dasabled");
		}
	}
	
});
</script>
<body >
<div class="zoombox">
<div class="zoompic"><img src="images/3427.jpg" width="444" height="364" alt="美女配奥迪A4L墙纸" /></div>
	<div class="sliderbox">
		<div id="btn-left" class="arrow-btn dasabled"></div>
		<div class="slider" id="thumbnail">
			<ul>
				<li class="current"><a href="images/3427.jpg" target="_blank"><img src="images/3427.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li>
				<li><a href="images/52347.jpg" target="_blank"><img src="images/52347.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸02" /></a></li>
				<li><a href="images/23463.jpg" target="_blank"><img src="images/23463.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸03" /></a></li>
				<li><a href="images/3247.jpg" target="_blank"><img src="images/3247.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸04" /></a></li>
				<li><a href="images/26547.jpg" target="_blank"><img src="images/26547.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸05" /></a></li>
				<li><a href="images/2153.jpg" target="_blank"><img src="images/2153.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸06" /></a></li>
				<li><a href="images/3427.jpg" target="_blank"><img src="images/3427.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li>
			</ul>
		</div>
		<div id="btn-right" class="arrow-btn"></div>
	</div>
  </div><!--slider end-->
</div>	

</body>
</html>