井井客

搜索

图集功能配件-小缩略图切换(限制显示五格)

模仿新浪图集做了一个产品图集,下面是其中一小块缩略图切换功能的实现代码。算是练手之作,兼容性还行,因为一时想不出更好的实现方法所以先记录下来,期待未来的自己可以优化一下

图集功能配件-小缩略图切换(限制显示五格)

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图集功能配件-小缩略图切换(限制显示五格)</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style>
/* 主要样式 */
.cont { width:330px; overflow:hidden;}
.cont li,.cont li img { width:60px; height:60px; }
.cont li { float:left; margin-left:5px;display:inline;}
/* 美观的样式 */
.cont li { opacity:0.6;}
.cont li.selected { opacity:1;}
.warp { width:390px;}
.warp .prev,.warp .next { float:right; display:inline-block; margin-top:20px; width:20px; height:20px; line-height:20px; color:#fff; text-align:center; background:#c00; cursor:pointer;}
.warp .prev { float:left; margin-right:10px;}
.warp .prev.no,.warp .next.no { background:#ccc;}
</style>
</head>
<body>
<div class="warp"> <span class="next">&gt;</span> <span class="prev">&lt;</span>
  <div class="cont">
    <ul>
      <li class="selected"><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum1.png" /></a></li>
      <li><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum2.png" /></a></li>
      <li><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum3.png" /></a></li>
      <li><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum4.png" /></a></li>
      <li><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum5.png" /></a></li>
      <li><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum6.png" /></a></li>
      <li><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum7.png" /></a></li>
      <li><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum8.png" /></a></li>
      <li><a href="http://www.jingjingke.com/"><img src="http://www.jingjingke.com/res/img/csNum9.png" /></a></li>
    </ul>
  </div>
</div>
<script>
(function(){
		
	var getLi = $('.cont li');
	var getUl = $('.cont ul');
	var getDiv = $('.es-carouselcon');
	var nextBtn = $('.warp .next');
	var prevBtn = $('.warp .prev');
	var picNum = getLi.length;
	var picNow = $('.cont li.selected').index();
	var picWidth = getLi.width() + parseInt(getLi.css('margin-left')) + parseInt(getLi.css('padding-left')) + parseInt(getLi.css('margin-right')) + parseInt(getLi.css('padding-right'));
	var allWidth = picWidth*picNum;	
	var picHeight = getLi.height() + parseInt(getLi.css('margin-top')) + parseInt(getLi.css('padding-top')) + parseInt(getLi.css('margin-bottom')) + parseInt(getLi.css('padding-bottom'));
	var picFirst = 0;
	var picLast = 0;
	
	getDiv.css({'position':'relative','height':picHeight,'overflow':'hidden'});	
	getUl.css({'position':'relative','width':allWidth,'padding':'0','margin':'0','top':'0'});
	if( picNum > 5){	
		if(picNow < 3){
			picFirst = 0;
			picLast = 4;
			prevBtn.addClass("no");		
			getUl.css('left', -(picWidth*picFirst));
		}else if( picNow > picNum - 4){
			picFirst = picNum - 5;
			picLast = picNum - 1;
			nextBtn.addClass("no");
			getUl.css('left', -(picWidth*picFirst));
		}else{
			picFirst = picNow - 2;
			picLast = picNow + 2;		
			getUl.css('left', -(picWidth*picFirst));
		}	
	}else{
		prevBtn.addClass("no");
		nextBtn.addClass("no");
		picFirst = 0;
		picLast = picNum;
	}

	prevBtn.click(function(){	
		if(picFirst > 0 && picLast < picNum ){
			picFirst = picFirst-1;
			picLast = picLast-1;
			getUl.animate({'left': -(picWidth*picFirst)});
			nextBtn.removeClass("no");
		}		
		if( picFirst == 0 ){
			prevBtn.addClass("no");
		}				
	});
	
	nextBtn.click(function(){
		if(picFirst > -1 && picLast < picNum - 1 ){
			picFirst = picFirst+1;
			picLast = picLast+1;
			getUl.animate({'left': -(picWidth*picFirst)});
			prevBtn.removeClass("no");
		}
		if( picLast == picNum - 1 ){
			nextBtn.addClass("no");
		}
	});	
	
})();
</script>
</body>
</html>

效果如下:

图集功能配件-小缩略图切换(限制显示五格)示例

大环境是这样的:一个产品拥有很多张图片,每一张图片,后台都会有生成一个html文件,组成一个html集合。

首先使用selected样式,用Jq可以很轻松的知道当前页这个集合中的第几个,估且把这个第几,叫做Num。(顺便获取一下其它的会用到的东西:图片总个数All、展示区域显示的第一张图First、展示区域显示的最后一张图Last)

然后就是接下来一系列的判断,这块就比较死板。标题上也有明确指出,不论产品图片有多少,这块的缩略图展示区域图片的个数只能为5(如果想要展示的更多或更少,则需要去修改这个判断中的数字了)。判断就不详情说明了,只稍微了解一下这三个最重要的:总数小于五、Num小于3、Num大于总数减3。

然后就是对左右切换这个点击的效果了,在某个要求内每次点击都会对两个变量(First和Last)进行增减,并且在First=0时丧失左点击功能,在Last=All时丧失右点击功能。

表达的不好,代码不算复杂,数字看得会有点晕而已~

文章TAG:JQ

作者:井井客原创来源:原创
本文标题:图集功能配件-小缩略图切换(限制显示五格)
本文链接:/c/1562.html

上一篇:jquery倒计时10S后跳转到新页面
下一篇:通过正则表达式去掉style网页内部样式表

文章分类

相关阅读

随便看看