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



364 1453 485



特效描述: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-->



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


热门标签: 导航切换 图片头像上传 带标题的焦点图 文件上传 带缩略图的幻灯片 带简介的焦点图 图片切换 文本框 图片轮播 文字切换 下拉框 自动滚动图片轮播 背景切换 复选 马赛克幻灯片 手风琴 单选 全屏焦点图 选项卡自动切换 登录框 视频切换 注册框 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 切换按钮 form表单 焦点图幻灯片

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

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

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