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=gb2312">
<title>带缩略图预览的jQuery焦点幻灯片代码</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript" src="code.js"></script>
</head>
<body>
<div id="wrapper">
        <div id="main">

            <ul class="nav">
                <li><a href="#1"><p>1</p></a></li>
                <li><a href="#2"><p>2</p></a></li>
                <li><a href="#3"><p>3</p></a></li>
            </ul>

            <div id="1">

                    <div id="tabdivimg">
                    <img src="images/1.jpg" width="415" height="284" />
                    </div>
             
          </div><!--/popular-->
            
            <div id="2">
                    <div id="tabdivimg">
                    <img src="images/2.jpg" width="415" height="284" /></a>
                    </div>
            </div><!--/recent-->
            
            <div id="3">
            
                    <div id="tabdivimg">
                    <img src="images/3.jpg" width="415" height="284" />
                    </div>
            </div><!--featured-->

</div><!--/widget-->
</div>
</body>
</html>

JS代码(code.js):

$(document).ready(function(){
	$('#main > ul').tabs({
	fx:{
	height:'fadeOut',opacity:'toggle'}
}
);
	$(function(){
	//Set the position of small popup imagevar offsetX = -20;
	var offsetY = -100;
	//Select the element of navigation$('ul.nav li:first').hover(function(e){
	//Insert image$('<img id="popimg" src="images/11.png" alt="big image" />')//Set css property to #popimage using .css.css('top',e.pageY + offsetY).css('left',e.pageX + offsetX).appendTo('body');
}
,function(){
	//Hide Popup when mouseout$('#popimg').remove();
}
);
	$('ul.nav li:first').mousemove(function(e){
	$("#popimg").css('top',e.pageY + offsetY).css('left',e.pageX + offsetX);
}
);
}
);
	$(function(){
	var offsetX = -20;
	var offsetY = -100;
	$('ul.nav li:nth-child(2)').hover(function(e){
	$('<img id="popimg" src="images/22.png" alt="big image" />').css('top',e.pageY + offsetY).css('left',e.pageX + offsetX).appendTo('body');
}
,function(){
	$('#popimg').remove();
}
);
	$('ul.nav li:nth-child(2)').mousemove(function(e){
	$("#popimg").css('top',e.pageY + offsetY).css('left',e.pageX + offsetX);
}
);
}
);
	$(function(){
	var offsetX = -20;
	var offsetY = -100;
	$('ul.nav li:last').hover(function(e){
	$('<img id="popimg" src="images/33.png" alt="big image" />').css('top',e.pageY + offsetY).css('left',e.pageX + offsetX).appendTo('body');
}
,function(){
	$('#popimg').remove();
}
);
	$('ul.nav li:last').mousemove(function(e){
	$("#largeImage").css('top',e.pageY + offsetY).css('left',e.pageX + offsetX);
}
);
}
);
}
);

CSS代码(style.css):

*{margin:0;padding:0;}
body{font-size:75%;color:#222;background:#ffffff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.6em;}
/* Which hides the inactive content slide */
.ui-tabs-hide{display:none;}
a{text-decoration:none;}
#wrapper{width:800px;height:370px;margin-left:auto;margin-right:auto;margin-top:30px;}
#main{width:721px;height:354px;background-image:url(images/bg.png);background-repeat:no-repeat;position:absolute;}
#tabcontent{position:absolute;bottom:30px;left:30px;z-index:100;text-align:center;line-height:30px;border:1px solid #000;background-color:#fff;border:1px solid #000;}
ul.nav{width:93px;height:32px;position:absolute;bottom:30px;left:30px;}
ul.nav li{width:31px;height:32px;background-image:url(images/nav.png);background-repeat:no-repeat;float:left;}
.nav li{text-decoration:none;list-style-type:none;}
.nav li p{padding-left:10px;padding-top:5px;text-decoration:none;color:#FFF;font-size:16px;}
#intabdiv{float:left;width:200px;height:350px;padding-left:30px;padding-top:40px;}
#intabdiv h2{font-size:20px;color:#FFF;margin-bottom:20px;}
#intabdiv p{font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#CCC;}
#intabdiv a{text-decoration:underline;color:#F00;}
#tabdivimg{float:right;width:430px;height:350px;padding-top:35px;padding-right:20px;padding-bottom:0px;padding-left:40px;}
#popimg{width:100px;height:70px;position:absolute;}

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