jQuery红色标签焦点图片轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery红色标签焦点图片轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery红色标签焦点图片切换</title>
<link href="images/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="images/jquery.1.4.2-min.js"></script>
</head>
<body>

<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* myjQuery */
#myjQuery{padding:5px;background:#e51c05;width:488px;position:relative;height:275px;overflow:hidden;margin:60px auto 0 auto;}
#myjQueryContent{border:solid 1px #fff;width:486px;height:224px;overflow:hidden;}
#myjQueryContent div{position:absolute;height:224px;}
#myjQueryContent img{width:486px;height:224px;}
#myjQuery ul{border-top:#ffffff 2px solid;display:block;overflow:hidden;width:488px;height:47px;}
#myjQuery ul li{display:block;float:left;width:122px;cursor:pointer;padding-top:7px;height:40px;text-align:center;}
#myjQuery ul li a{display:block;width:85px;margin:0px auto;height:32px;line-height:16px;overflow:hidden;color:#ffffff;position:relative;z-index:12;text-decoration:none;}
#myjQuery ul li.current a{color:#f6821e;}
#myjQuery #flow{margin-top:-47px;z-index:10;background:url(images/fcurrent.gif);left:5px;width:122px;position:absolute;height:47px;overflow:hidden;}
</style>

<script type="text/javascript" src="images/blockSlide.js"></script>

<div id="myjQuery">
	<div id="myjQueryContent">
		<div style="z-index:9;"><a href="#"><img width="486" height="224" src="images/1.jpg" alt="岁末巨献,牛气冲天！" /></a></div>
		<div><a href="#"><img width="486" height="224" src="images/2.jpg" alt="给闺蜜的礼物,两件新衣80元起" /></a></div>
		<div><a href="#"><img width="486" height="224" src="images/3.jpg" alt="09运动新品,新年8折起！" /></a></div>
		<div><a href="#"><img width="486" height="224" src="images/4.jpg" alt="新年给家人一次,奢华的享受" /></a></div>
	</div>
	<ul>
		<li class="current"><a href="#">岁末巨献<br/>牛气冲天！</a></li>
		<li><a href="#">给闺蜜的礼物<br/>两件新衣80元起</a></li>
		<li><a href="#">09运动新品<br/>新年8折起！</a></li>
		<li><a href="#">新年给家人一次<br/>奢华的享受</a></li>
	</ul>
</div>
	
<script type="text/javascript">
$(document).ready(function(){
	
	$("#myjQuery").blockSlide({
		speed : "normal",
		num : 4,
		timer : 4000,
		flowSpeed :300
	});
	
});
</script>
</body>
</html>

JS代码(blockSlide.js):

/** * @author feiwen */
(function($){
	$.fn.blockSlide = function(settings){
	settings = jQuery.extend({
	speed:"normal",num:4,timer:1000,flowSpeed:300}
,settings);
	return this.each(function(){
	$.fn.blockSlide.scllor( $( this ),settings );
}
);
}
;
	$.fn.blockSlide.scllor=function($this,settings){
	var index=0;
	$('<div id="flow"></div>').appendTo($this);
	var ul = $( "ul:eq(0)",$this );
	var imgScllor = $( "div:eq(0)>div",$this );
	var timerID;
	var li = ul.children();
	//滑动导航改变内容$(li).hover(function(){
	if(MyTime){
	clearInterval(MyTime);
}
index = $(li).index(this);
	MyTime = setTimeout(function(){
	$(imgScllor).stop();
	ShowjQueryFlash(index);
}
,400);
}
,function(){
	clearInterval(MyTime);
	MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	index++;
	if(index==settings.num)index=0;
}
,settings.timer);
}
);
	//滑入 停止动画，滑出开始动画.$(imgScllor).hover(function(){
	if(MyTime){
	clearInterval(MyTime);
}
}
,function(){
	MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	index++;
	if(index==settings.num)index=0;
}
,settings.timer);
}
);
	//自动播放var MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	//alert(index);
	index++;
	if(index==settings.num)index=0;
}
,settings.timer);
	var ShowjQueryFlash=function (i){
	$(imgScllor).eq(i).animate({
	opacity:1}
,settings.speed).css({
	"z-index":"1"}
).siblings().animate({
	opacity:0}
,settings.speed).css({
	"z-index":"0"}
);
	$("#flow").animate({
	left:i*122+5 +"px"}
,settings.flowSpeed );
	//滑块滑动$(li).eq(i).addClass("current").siblings().removeClass("current");
}
}
}
)(jQuery);

CSS代码(style.css):

@charset "utf-8";/* reset */
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}
/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
label{cursor:pointer;}
img{vertical-align:middle;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;}
h2,h3,h4{font-size:14px;}
h5,h6{font-size:12px;}
abbr,acronym{border:0;font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* shortcut */
.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
*html,*html body /* 修正IE6振动bug */
{background-image:url(about:blank);background-attachment:fixed;}
*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}
.shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}
.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.shortcut a:hover{background:#fff;}
.shortcut span.right{float:right;}
.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}
.headeline{height:40px;overflow:hidden;}
.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
.adv728x90{width:728px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}

附件:下载该文件资源,减少时间成本(增值服务)