利用JS实现相册带缩略图平滑滚动切换特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

163 650 217



特效描述:利用JS实现 相册带缩略图 平滑滚动切换。利用JS实现相册带缩略图平滑滚动切换特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

2. HTML代码

<br>
<div class="mod18Box">
<div class="mod18">
	<span id="prev" class="btn prev"></span>
	<span id="next" class="btn next"></span>
	<span id="prevTop" class="btn prev"></span>
	<span id="nextTop" class="btn next"></span>
	<div id="picBox" class="picBox">
		<ul class="cf">
			<li>
				<a href="http://51qianduan.com/" target="_blank"><img width="680" height="380" src="images/01.jpg" alt="" /></a>
				<span>网页素材-心形高清壁纸</span>
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank" ><img width="680" height="380" src="images/02.jpg" alt="" /></a>
				<span>字体变形logo创意欣赏,7款logo字体设计。</span>
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank"><img width="680" height="380" src="images/03.jpg" alt="" /></a>
				<span>logo设计之猎豹国外Logo欣赏,越来灵感源于自然。</span> 
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank"><img width="680" height="380" src="images/04.jpg" alt="" /></a>
				<span>不用javaScript也能做出绚丽多彩的动画按钮。网页制作必备素材!</span> 
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank"><img width="680" height="380" src="images/05.jpg" alt="" /></a>
				<span>HTML5酷炫相册集,一个非常棒的HTML5相册,有胶卷的感觉,上下滚动鼠标进行图片切换。</span> 
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank"><img width="680" height="380" src="images/06.jpg" alt="" /></a>
				<span>CSS3模拟书签导航,此特效提供5种展示方式。</span>
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank"><img width="680" height="380" src="images/07.jpg" alt="" /></a>
				<span>一款酷炫电池设计PSD分层素材,该素材带有详细的分层,学习制作app图标的好案例。 </span> 
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank"><img width="680" height="380" src="images/08.jpg" alt="" /></a>
				<span>红色礼品蝴蝶结矢量eps素材,金典实用礼品设计、包装设计、节日活动设计必备素材。</span>
			</li>
		</ul>
	</div>
	<div id="listBox" class="listBox">
		<ul class="cf">
			<li class="on"><i class="arr2"></i><img width="118" height="64" src="images/01s.jpg" alt="心壁纸" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/02s.jpg" alt="logo设计" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/03s.jpg" alt="猎豹logo" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/04s.jpg" alt="CSS3按钮" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/05s.jpg" alt="CSS3相册" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/06s.jpg" alt="CSS3动画" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/07s.jpg" alt="PSD电池素材" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/08s.jpg" alt="蝴蝶结素材" /></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
<!--
(function(){
	function G(s){
		return document.getElementById(s);
	}
	function getStyle(obj, attr){
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}else{
			return getComputedStyle(obj, false)[attr];
		}
	}
	function Animate(obj, json){
		if(obj.timer){
			clearInterval(obj.timer);
		}
		obj.timer = setInterval(function(){
			for(var attr in json){
				var iCur = parseInt(getStyle(obj, attr));
				iCur = iCur ? iCur : 0;
				var iSpeed = (json[attr] - iCur) / 5;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				obj.style[attr] = iCur + iSpeed + 'px';
				if(iCur == json[attr]){
					clearInterval(obj.timer);
				}
			}
		}, 30);
	}
	var oPic = G("picBox");
	var oList = G("listBox");
	var oPrev = G("prev");
	var oNext = G("next");
	var oPrevTop = G("prevTop");
	var oNextTop = G("nextTop");
	var oPicLi = oPic.getElementsByTagName("li");
	var oListLi = oList.getElementsByTagName("li");
	var len1 = oPicLi.length;
	var len2 = oListLi.length;
	var oPicUl = oPic.getElementsByTagName("ul")[0];
	var oListUl = oList.getElementsByTagName("ul")[0];
	var w1 = oPicLi[0].offsetWidth;
	var w2 = oListLi[0].offsetWidth;
	oPicUl.style.width = w1 * len1 + "px";
	oListUl.style.width = w2 * len2 + "px";
	var index = 0;
	var num = 5;
	var num2 = Math.ceil(num / 2);
	function Change(){
		Animate(oPicUl, {left: - index * w1});
		if(index < num2){
			Animate(oListUl, {left: 0});
		}else if(index + num2 <= len2){
			Animate(oListUl, {left: - (index - num2 + 1) * w2});
		}else{
			Animate(oListUl, {left: - (len2 - num) * w2});
		}
		for (var i = 0; i < len2; i++) {
			oListLi[i].className = "";
			if(i == index){
				oListLi[i].className = "on";
			}
		}
	}
	oNextTop.onclick = oNext.onclick = function(){
		index ++;
		index = index == len2 ? 0 : index;
		Change();
	}
	oPrevTop.onclick = oPrev.onclick = function(){
		index --;
		index = index == -1 ? len2 -1 : index;
		Change();
	}
	for (var i = 0; i < len2; i++) {
		oListLi[i].index = i;
		oListLi[i].onclick = function(){
			index = this.index;
			Change();
		}
	}
})()
//-->
</script>
</div>
<!--效果html结束-->
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到