鼠标滑过+自动播放jQ焦点图轮播滚动切换特效代码

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

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

以下是鼠标滑过+自动播放jQ焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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=gb2312" />
<title>鼠标滑过+自动播放jQuery焦点图</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/promo_v2.js"></script> 
<style>
*{margin:0;padding:0;list-style:none;border:0;}
body{overflow-x:hidden;}
</style>
</head>
<body>
  <div class="promoWD">
       <div id="main_promo">
       <div id="slides">
          <div class="slide"><a href="#" target="_blank"><img src="images/promo09176.jpg"  alt="瓷肌成功约会柳岩" /></a></div>       
          <div class="slide"><a href="#" ><img src="images/promo09171.jpg" alt="瓷肌成功约会柳岩！" ></a></div>          
          <div class="slide"><a href="#" ><img   src="images/promo09172.jpg" alt="喜迎新年！" /></a></div>
          <div class="slide"><a href="#" target="_blank"><img src="images/promo1013.jpg"  alt="年度最佳护肤品牌" /></a></div> 		  
          <div class="slide"><a href="#" ><img src="images/promo09173.jpg" alt="净白无暇五谷焕彩面膜" /></a></div>
          <div class="slide"><a href="#" ><img src="images/promo09174.jpg"  alt="净白无瑕调理精油" /></a></div>
          <div class="slide"><a href="#" target="_blank"><img src="images/promo09175.jpg"  alt="净白无瑕精华霜" /></a></div>
          </div>
          </div>
          <div id="dots">
            <ul>
              <li class="menuItem"><a href="javascript:;"></a></li>
              <li class="menuItem"><a href="javascript:;"></a></li>
              <li class="menuItem"><a href="javascript:;"></a></li>
              <li class="menuItem"><a href="javascript:;"></a></li>
              <li class="menuItem"><a href="javascript:;"></a></li>
              <li class="menuItem"><a href="javascript:;"></a></li>  
              <li class="menuItem"><a href="javascript:;"></a></li>               
            </ul>
          </div>
  </div>
</body>
</html>

JS代码(promo_v2.js):

$(document).ready(function(){
	var totWidth=0;
	var positions = new Array();
	$('#slides .slide').each(function(i){
	positions[i]= totWidth;
	totWidth += $(this).width();
	if(!$(this).width()){
	alert("Please,fill in width & height for all your images!");
	return false;
}
}
);
	$('#slides').width(totWidth);
	$('#dots ul li a').mouseover(function(e,keepScroll){
	$('li.menuItem').removeClass('act').addClass('inact');
	$(this).parent().addClass('act');
	var pos = $(this).parent().prevAll('.menuItem').length;
	$('#slides').stop().animate({
	marginLeft:-positions[pos]+'px'}
,450);
	e.preventDefault();
	if(!keepScroll) clearInterval(itvl);
}
);
	$('#dots ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	var current=1;
	function autoAdvance(){
	if(current==-1) return false;
	$('#dots ul li a').eq(current%$('#dots ul li a').length).trigger('mouseover',[true]);
	current++;
}
var changeEvery = 7;
	var itvl = setInterval(function(){
	autoAdvance()}
,changeEvery*200);
	//�����Զ�����ʱ�䣬Խ��Խ��}
);

CSS代码(zzsc.css):

/*==============焦点图================*/
#main_promo{height:460px;width:1920px;margin-left:-960px;position:relative;top:0;left:50%;overflow:hidden;z-index:0;}
.promoWD{width:1000px;margin:0 auto;position:relative;}
.slide{display:block;float:left;width:1920px;}
#dots{height:13px;position:absolute;bottom:13px;left:429px;z-index:99;}
#dots li{width:23px;height:13px;float:left;}
#dots li a{width:10px;display:block;height:10px;background-color:#7f0705;border:1px solid #FFFFFF;}
#dots li.act a{background-color:#000000;}
/*==============焦点图 end================*/

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