jquery手动自动图片切换特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jquery手动自动图片切换特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery手动自动图片切换</title>
<script src="js/jquery.min.js"></script>
<style>
ul li{list-style:none;}
/*demo css*/
.i_box{position:relative;overflow:hidden;width:700px;height:350px}
.i_imglist{width:700px;height:350px;z-index:0 }
.i_imglist li img{width:700px;height:350px;display: block}

.i_nav{position:absolute;left:20px;bottom:0;overflow:hidden;width:660px;height:30px;z-index:2}
.i_nav ul li{float:left;_display:inline;width:163px;height:30px;margin:0 1px;background-color:#000;opacity:0.5;filter:alpha(opacity=50);text-align:center;line-height:30px;cursor:pointer}
.i_nav ul li.hover{background-color:#fff;opacity:0.8;filter:alpha(opacity=80)}
.i_nav ul li a{color:#fff;text-decoration: none}
.i_nav ul li a:hover{text-decoration: underline}
.i_nav ul li.hover a{color:#000}
.i_prev a,.i_next a{position:absolute;overflow:hidden;width:19px;height:30px;background-color:#000;color:#fff;text-align: center;font-weight: bold;opacity:0.9;filter:alpha(opacity=90);text-decoration: none;line-height: 30px}
.i_prev a{left:0;bottom:0}
.i_next a{right:0;bottom:0}
.i_prev a:hover,.i_next a:hover{background-color:#fff;opacity:0.8;filter:alpha(opacity=80);color: #000}
</style>
</head>
<body>
<center>
<div id="barload"></div>
<div class="content">
<!--DEMO start-->
<div id="demo">
<div class="i_box">
<div class="i_imglist">
<ul id="J_imgList">
<li><a href="#"><img src="images/a358be24367a5ea9dec7aa61a7527a7ab16009b9_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/8a37e5af175db41e06004dc098e9c173aee70116_m.jpg" alt="" title="" /></a></li>

<li><a href="#"><img src="images/61f4d9a7eb72c52d84b7d86abe75a85b96b52da8_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/b74aaf555eb970c3a1fdd6e7b2b5dd2a7a971286_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/156c2157ea31033cd8d2ae8431be8497387e5db0_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/4dc9209aafd33affd86dd6c5b21b9f013ae06b88_m.jpg" alt="" title="" /></a></li>

<li><a href="#"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/8a37e5af175db41e06004dc098e9c173aee70116_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/61f4d9a7eb72c52d84b7d86abe75a85b96b52da8_m.jpg" alt="" title="" /></a></li>

<li><a href="#"><img src="images/156c2157ea31033cd8d2ae8431be8497387e5db0_m.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="images/4dc9209aafd33affd86dd6c5b21b9f013ae06b88_m.jpg" alt="" title="" /></a></li>
</ul>
</div>
<!--切换大图-->
<div class="i_nav">
<div class="i_navlist" >
<ul id="J_navList">
<li><a href="#">11阳光真温暖</a></li>
<li><a href="#">一直照进我心里</a></li>
<li><a href="#">往事已遥远</a></li>
<li><a href="#">一年又一年</a></li>

<li><a href="#">22风吹起的青色衣衫</a></li>
<li><a href="#">夕阳里的温暖容颜</a></li>
<li><a href="#">你比以前更加美丽</a></li>
<li><a href="#">像盛开的花</a></li>

<li><a href="#">33阳光真温暖</a></li>
<li><a href="#">一直照进我心里</a></li>
<li><a href="#">往事已遥远</a></li>
<li><a href="#">一年又一年</a></li>

<li><a href="#">44风吹起的青色衣衫</a></li>
<li><a href="#">夕阳里的温暖容颜</a></li>
</ul>

</div>
</div>
<!--图片导航-->
<div class="i_prev" id="J_prev"><a href="javascript:void(0)">&lt;&nbsp;</a></div>
<div class="i_next" id="J_next"><a href="javascript:void(0)">&nbsp;&gt;</a></div>

</div>
</div> 
<script>
/*******************************
* @author Mr.Think
* @author blog http://mrthink.net/
* @2011.11.05
* @可自由转载及使用,但请注明版权归属
*******************************/
$( function() {
var imgField=$('#J_imgList');
var imgList=$('#J_imgList>li');
var navField=$('#J_navList');
var navList=$('#J_navList>li');
var btnPrev=$('#J_prev');
var btnNext=$('#J_next');
var turnPage=4;//每屏显示数
var T=5000;//切换间隔时间
var turnT=300;//animate时间
var N=0;//图片初始索引
var P=1;//屏初始索引

var goFun=null;
var hoverFun=null;
var triggerFun=null;
var delayFun=null
var navListW=navList.outerWidth(true);
var turnPages=Math.ceil(navList.size()/turnPage);
//初始图片区域高度与标题区域宽度
imgField.height(imgList.size()*imgList.height());
navField.width(navList.size()*navListW);
//初始自动切换
GO();
//自动切换
function GO() {
imgField.stop().animate({
marginTop:-N*(imgList.height())
},turnT);
navList.eq(N).addClass('hover').siblings().removeClass('hover');
if(N%turnPage==0) {
navField.stop().animate({
marginLeft:-N*navListW+'px'
},turnT);
}
N++;
//console.log(N)
N= N>=imgList.size()?0:N;
P=Math.ceil(N/turnPage);
goFun=setTimeout(GO,T);
}

//停止切换
function STOP() {
clearTimeout(goFun);
}

//标题划过移出
navList.hover( function() {
clearTimeout(delayFun);
STOP();
N=navList.index(this);
imgField.stop().animate({
marginTop:-N*(imgList.height())
},turnT);
$(this).addClass('hover').siblings().removeClass('hover');
}, function() {
N++;
delayFun=setTimeout(GO,T)
});
//图片划过移出
imgList.hover( function() {
N=imgList.index(this);
navList.eq(N).trigger('mouseover');
}, function() {
navList.eq(N).trigger('mouseleave');
});
//左切换
btnPrev.click( function() {
if(P==1) {
navField.animate({
marginLeft:-turnPage*navListW*(turnPages-1)+'px'
},turnT);
P=turnPages;
} else {
STOP();
P--;
navField.animate({
marginLeft:-turnPage*navListW*(P-1)+'px'
},turnT);
}
navList.eq((P-1)*turnPage).trigger('mouseover');
GO();
});
//右切换
btnNext.click( function() {
if(P==turnPages) {
navField.animate({
marginLeft:0
},turnT);
P=1;
} else {
STOP();
P++;
navField.animate({
marginLeft:-turnPage*navListW*P+'px'
});
}
navList.eq((P-1)*turnPage).trigger('mouseover');
GO();
});
});
</script>
<!--DEMO end-->
</div>
</center>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)