jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动



341 1362 455



特效描述:jquery 图片切换特效 左右按钮 焦点图切换滚动,jquery 制作图片切换特效,鼠标点击左右按钮缩略图左右滚动、鼠标点击缩略图、焦点图片左右切换滚动是一款非常不错用户体验设计jquery 图片切换特效。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
/* reset */
*{margin:0;padding:0;list-style-type:none;}
:focus{outline:0;}
img{vertical-align:middle;}
a,img{border:0;}
a,a:visited{color:#6a6a6a;text-decoration:none;}
a:hover{color:#7bbb05;text-decoration:none;}
.f-l{float:left;}.f-r{float:right;}
body{font:12px/180% Helvetica,Arial,sans-serif,"宋体";color:#636363;}
/* focus */
.focus{width:622px;overflow:hidden;position:relative;margin:0 auto;}
.focus .focuspic{height:340px;width:999em;position:relative;float:left;}
.focus .focuspic .indexbanner{float:left;width:620px;position:relative;height:340px;overflow:hidden;border:solid 1px #3366cc;}
/* scrollbox */
.scrollbox{height:190px;padding:20px 0;float:left;}
.scrollbox .scrollbtn{width:12px;height:37px;margin:38px 0 0 0;overflow:hidden;background:url(images/arrow.gif) no-repeat;cursor:pointer;}
.scrollbox #prev{background-position:0 0;}
.scrollbox #prev.disabled{background-position:0 -37px;cursor:default;}
.scrollbox #next{background-position:-12px 0;}
.scrollbox #next.disabled{background-position:-12px -37px;cursor:default;}
.scrollbox .scrollpic{float:left;margin:0 16px 0 16px;display:inline;width:562px;height:190px;overflow:hidden;}
.scrollbox .scrollpic ul{width:999em;float:left;display:inline;}
.scrollbox .scrollpic li{float:left;width:188px;text-align:center;}
.scrollbox .scrollpic li a img{border:solid 1px #ddd;padding:5px;}
.scrollbox .scrollpic li a span{display:block;height:30px;line-height:30px;cursor:pointer;}
.scrollbox .scrollpic li a:hover span,.scrollbox .scrollpic li.current a span{color:#3366cc;font-weight:800;}
.scrollbox .scrollpic li.current a img{border:solid 1px #3366cc;}
</style>
<script type="text/javascript">
$(function(){
	var animate_time=200;//动画时间:0.3秒
	var interval_time=3000;//播放间隔时间:5秒
	var picnumber=$(".scrollpic li").size()-1;//计算广告的数量
	var slideclick = 0;//初始化
	//循环函数
	function autoplay(){
		slideclick++;
		if(slideclick<=picnumber){
			$(".scrollpic li").eq(slideclick).trigger("dblclick");
		}else{
			$(".scrollpic li").eq(0).trigger("dblclick");
			slideclick = 0
		}
	}
	//设置循环时间,自动开始循环
	var auto_setInterval = setInterval(autoplay,interval_time);
	//悬停广告区域时播放停止
	$(".focus").hover(function(){
		clearInterval(auto_setInterval);
	},function(){
		auto_setInterval = setInterval(autoplay,interval_time);
	});
	//小图点击时,开始动画
	$(".scrollpic li").dblclick(function(){
		slideclick=$(".scrollpic li").index($(this));	
		$(".scrollpic li").removeClass("current");
		$(this).addClass("current");
		//大图上移
		$(".focus .focuspic").animate({"marginLeft":slideclick*-622},{duration:animate_time,queue:false});
		//控制缩略图显示个数
		if(slideclick<picnumber){
			if(slideclick==0||slideclick==1){
				$(".scrollpic ul").animate({"marginLeft":"0px"},{duration:animate_time,queue:false});
			}else{
				$(".scrollpic ul").animate({"marginLeft":(slideclick-1)*-188},{duration:animate_time,queue:false});//显示最后4张图片不在滚动
			}
		}
		//判断上下按钮是否可点击
		if(slideclick==0){
			$(".scrollbox #prev").addClass("disabled");
			$(".scrollbox #next").removeClass("disabled");
		}else if(slideclick==picnumber){
			$(".scrollbox #prev").removeClass("disabled");
			$(".scrollbox #next").addClass("disabled");
		}else{
			$(".scrollbox #prev").removeClass("disabled");
			$(".scrollbox #next").removeClass("disabled");
		}
	});
	//鼠标在小图上悬停时,相关移动
	$(".scrollpic li").mouseover(function(){		
		var slidebtn_hover_chi = $(".scrollpic li").index($(this));
		$(".scrollpic li").removeClass("current");
		$(this).addClass("current");		
		$(".focuspic").animate({"marginLeft":slidebtn_hover_chi*-622},{duration:animate_time,queue:false});
		if(slidebtn_hover_chi!=slideclick);
		slideclick=slidebtn_hover_chi;
		//判断上下按钮是否可点击
		if(slideclick==0){
			$(".scrollbox #prev").addClass("disabled");
			$(".scrollbox #next").removeClass("disabled");
		}else if(slideclick==picnumber){
			$(".scrollbox #prev").removeClass("disabled");
			$(".scrollbox #next").addClass("disabled");
		}else{
			$(".scrollbox #prev").removeClass("disabled");
			$(".scrollbox #next").removeClass("disabled");
		}
	});	
	//点击向上按钮时
	$(".scrollbox #prev").click(function(){
		slideclick=slideclick-1;
		if(slideclick<0){
			slideclick=0;
		}		
		$(".scrollpic li").eq(slideclick).trigger("dblclick");
	});
	//点击向下按钮时
	$(".scrollbox #next").click(function(){
		slideclick=slideclick+1;
		if(slideclick<=picnumber){
			slideclick=picnumber;
			$(".scrollpic li").eq(slideclick).trigger("dblclick");
			$(".scrollpic ul").animate({"marginLeft":(slideclick-2)*-188},{duration:animate_time,queue:false});// 缩略图最后滚动的左侧距离位置 正好4张缩略图显示
		}else{
			$(".scrollpic li").eq(0).trigger("dblclick");
			slideclick = 0
		}
		$(".scrollpic li").eq(slideclick).trigger("dblclick");
	});
});
</script>
<div class="focus">
	<div class="focuspic">
		<div class="indexbanner"><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息"><img width="620" height="340" alt="jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息" src="images/c4a109ba30e5ad520220859b9a9380b9.jpg"></a></div>
		<div class="indexbanner"><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息"><img width="620" height="340" alt="jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息" src="images/be959f01665246fc4828281158aba316.jpg"></a></div>
		<div class="indexbanner"><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示"><img width="620" height="340" alt="jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示" src="images/df2a7d77f20d55bca26a8328bd8647ae.jpg"></a></div>
		<div class="indexbanner"><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效"><img width="620" height="340" alt="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效" src="images/3a1184db401138d6443a1b5f42cb289b.jpg"></a></div>
		<div class="indexbanner"><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本"><img width="620" height="340" alt="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本" src="images/939eec7e10f99c541febcef39202b308.jpg"></a></div>
		<div class="indexbanner"><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动"><img width="620" height="340" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/99c04eb3c2092522c82fda8a5e9245b5.jpg"></a></div>
	</div><!--focuspic end-->  
	<div class="scrollbox">
		<div id="prev" class="f-l scrollbtn disabled"></div>
		<div class="f-l scrollpic">
			<ul>
				<li class="current"><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息"><img width="150" height="150" alt="jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息" src="images/smallc4a109ba30e5ad520220859b9a9380b9.jpg"><span>jquery 弹出层插件</span></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息"><img width="150" height="150" alt="jquery 图片提示 交互式图片滑过与点击提示更多文字信息和弹出层信息" src="images/smallbe959f01665246fc4828281158aba316.jpg"><span>jquery 图片提示</span></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示"><img width="150" height="150" alt="jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示" src="images/smalldf2a7d77f20d55bca26a8328bd8647ae.jpg"><span>jquery 滚动条插件</span></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效"><img width="150" height="150" alt="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效" src="images/small3a1184db401138d6443a1b5f42cb289b.jpg"><span>jquery 图片特效</span></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本"><img width="150" height="150" alt="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本" src="images/small939eec7e10f99c541febcef39202b308.jpg"><span>jquery 信息提示框</span></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动"><img width="150" height="150" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/small99c04eb3c2092522c82fda8a5e9245b5.jpg"><span>jquery 文字滚动大全</span></a></li>
			</ul>
		</div>
		<div id="next" class="f-r scrollbtn"></div>
	</div><!--scrollbox end-->
</div><!--focus end-->



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


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 切换按钮 表单 焦点图 幻灯片 图片轮播 带缩略图的幻灯片 图片切换 图片轮播 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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