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>
<script src="js/jquery-1.7.2.min.js"></script>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
</head>
<body>
<br>
<div id="cqh-box">
  <ul>
    <li><a href="#" target="_blank"><img src="images/zzsc1.jpg" /></a></li>
    <li><a href="#" target="_blank"><img src="images/zzsc2.jpg" /></a></li>
    <li><a href="#" target="_blank"><img src="images/zzsc3.jpg" /></a></li>
    <li><a href="#" target="_blank"><img src="images/zzsc4.jpg" /></a></li>
  </ul>
  <div id="cqh-num"></div>
  <div id="cqh-next"></div>
</div>
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>

JS代码(zzsc.js):

var $cqh_width = 400;
	//宽度var $cqh_height = 200;
	//高度var $cqh_speed = 3000;
	//切换速度var $cqh_box = $("#cqh-box");
	var $cqh_li = $("#cqh-box li");
	var $cqh_li_img = $("#cqh-box li img");
	var $cqh_num_box = $("#cqh-num");
	var $cqh_btn = $("#cqh-num span");
	var $cqh_next = $("#cqh-next");
	var $cqh = 0;
	$cqh_li.hide();
	$cqh_li.eq(0).show();
	$cqh_box.width($cqh_width);
	$cqh_box.height($cqh_height);
	$cqh_li.width($cqh_width);
	$cqh_li.height($cqh_height);
	$cqh_li_img.width($cqh_width);
	$cqh_li_img.height($cqh_height);
	var $cqh_num = $cqh_li.size();
	$cqh_num_box.width($cqh_num*20+3);
	var $num_con = '';
	for(i=0;
	i<$cqh_num;
	i++){
	$num_con+= '<span>'+(i+1)+'</span>';
}
$cqh_num_box.html($num_con);
	$("#cqh-num span").eq($cqh).addClass("this");
	$("#cqh-num span").mouseover(function(){
	var $rnd_num = parseInt(Math.random()*3+1);
	$("#cqh-num span").removeClass("this");
	$(this).addClass("this");
	$cqh_li.eq($cqh).hide();
	var $thisnum = parseInt($(this).text());
	$cqh = $thisnum-1;
	if($rnd_num==1){
	$cqh_li.eq($cqh).fadeIn(1000);
}
else if($rnd_num==2){
	$cqh_li.eq($cqh).show(500);
}
else if($rnd_num==3){
	$cqh_li.eq($cqh).slideDown(1000);
}
else{
	$cqh_li.eq($cqh).fadeIn(1000);
}
}
);
	var $autoFun;
	if($cqh_num>1){
	autoNext();
	clearFun($cqh_box);
}
$cqh_next.click(function(){
	if($cqh==$cqh_num-1){
	var $rnd_num = parseInt(Math.random()*3+1);
	$("#cqh-num span").removeClass("this");
	$("#cqh-num span").eq(0).addClass("this");
	$cqh_li.eq($cqh).hide();
	if($rnd_num==1){
	$cqh_li.eq(0).fadeIn(1000);
}
else if($rnd_num==2){
	$cqh_li.eq(0).show(500);
}
else if($rnd_num==3){
	$cqh_li.eq(0).slideDown(1000);
}
else{
	$cqh_li.eq(0).fadeIn(1000);
}
$cqh = 0;
}
else{
	var $rnd_num = parseInt(Math.random()*3+1);
	$("#cqh-num span").removeClass("this");
	$("#cqh-num span").eq($cqh+1).addClass("this");
	$cqh_li.eq($cqh).hide();
	if($rnd_num==1){
	$cqh_li.eq($cqh+1).fadeIn(1000);
}
else if($rnd_num==2){
	$cqh_li.eq($cqh+1).show(500);
}
else if($rnd_num==3){
	$cqh_li.eq($cqh+1).slideDown(1000);
}
else{
	$cqh_li.eq($cqh+1).fadeIn(1000);
}
$cqh = $cqh+1;
}
}
)function autoNext(){
	$cqh_next.trigger('click');
	$autoFun = setTimeout(autoNext,$cqh_speed);
	//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效}
function clearAuto(){
	clearTimeout($autoFun);
}
function clearFun(elem){
	elem.hover(function(){
	clearAuto();
}
,function(){
	autoNext();
}
);
}

CSS代码(zzsc.css):

@charset "utf-8";#cqh-box{background-color:#069;position:relative;border:1px solid #999;overflow:hidden;margin:0 auto;}
#cqh-box ul{margin:0;padding:0;}
#cqh-box li{margin:0;padding:0;list-style:none;float:left;}
#cqh-box img{border:none;}
#cqh-num{width:100%;height:16px;float:right;position:absolute;right:0px;bottom:4px;}
#cqh-num span{display:inline-block;float:left;width:12px;height:14px;border:1px solid #C66;background-color:#C60;color:#FFF;line-height:14px;text-align:center;cursor:pointer;margin:0 3px;font-size:11px;}
#cqh-num span.this{background-color:#FC0;color:#F00;}

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