代码：
<!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>搜狗输入法官方网站3D立体图片切换焦点图</title>
<link href="<%=strWebPhyPath%>/CodeThemes/v309/css/slowx.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="<%=jQuery%>"></script>
<script type="text/javascript" language="javascript" src="<%=strWebPhyPath%>/jsresult.aspx?id=328"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".btn").show();
$(".btn a:first").addClass("active");
$().gallery({
current: [".show_images_1",".show_images_1_img"],
left: [".show_images_2",".show_images_2_img"],
right: [".show_images_3",".show_images_3_img"],
none: [".show_images_4",".show_images_4_img"],
duration: 500,
start: function() {
$(".header_text").fadeOut(150);
},
end: function() {
$(".header_text").fadeIn(150);
},
autoChange : true,
changeTimeout: 3000,
stopTarget : ".header_stage"
});
});
</script>
</head>
<body>
<div id="wrapper">
<ul class="lanrenzhijia">
<li class="lanrenzhijia_li show_images_1"><a href="<%=strWebPhyPath%>/"
target="_blank">
<img class="show_images_1_img" src="http://web.slowx.net/Res/Img/2015/201502/p3/img1.png" alt="" /></a></li>
<li class="lanrenzhijia_li show_images_2"><a href="<%=strWebPhyPath%>/"
target="_blank">
<img class="show_images_2_img" src="http://web.slowx.net/Res/Img/2015/201502/p3/img2.png" alt="" /></a></li>
<li class="lanrenzhijia_li show_images_3"><a href="<%=strWebPhyPath%>/"
target="_blank">
<img class="show_images_3_img" src="http://web.slowx.net/Res/Img/2015/201502/p3/img3.png" alt="" /></a></li>
<li class="lanrenzhijia_li show_images_4"><a href="<%=strWebPhyPath%>/"
target="_blank">
<img class="show_images_4_img" src="http://web.slowx.net/Res/Img/2015/201502/p3/img4.png" alt="" /></a></li>
</ul>
<div class="header_text" id="belt">
</div>
<div class="btn">
<a class="btn1" rel="1"></a><a class="btn2" rel="2"></a><a class="btn3" rel="3">
</a><a class="btn4" rel="4"></a>
</div>
</div>
</body>
</html>
CSS样式：
@charset "utf-8";
* {
margin:0;
padding:0;
list-style-type:none;
}
a, img {
border:0;
}
body {
font:12px/180% Arial, Helvetica, sans-serif, "宋体";
padding-top:20px;
}
#wrapper {
width:1000px;
margin:auto;
position:relative;
}
.lanrenzhijia_li {
position:absolute;
cursor:pointer;
vertical-align:bottom;
display:block;
}
.show_images_1 {
z-index:15;
top:1px;
left:200px;
}
.show_images_1 img {
width:599px;
height:353px;
}
.show_images_2 {
z-index:10;
top:20px;
left:0px;
}
.show_images_2 img {
width:527px;
height:310px;
}
.show_images_3 {
z-index:5;
top:20px;
left:459px;
}
.show_images_3 img {
width:527px;
height:310px;
}
.show_images_4 {
z-index:0;
top:20px;
left:200px;
}
.show_images_4 img {
width:527px;
height:310px;
}
#belt {
display:block;
height:122px;
left:200px;
line-height:99em;
overflow:hidden;
position:absolute;
top:1px;
width:149px;
z-index:100;
}
.btn {
width:101px;
height:25px;
margin:auto;
position:relative;
padding-top:350px;
z-index:999;
}
.btn a {
width:17px;
height:15px;
overflow:none;
display:block;
background:url(http://web.slowx.net/Res/Img/2015/201502/p3/img5.jpg) no-repeat;
cursor:pointer;
float:left;
}
.btn a.active {
background-position:-17px 0;
}
JS代码：
var time=new Date();
time=time.getTime();
var userAgent = navigator.userAgent.toLowerCase();
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
safari: /webkit/.test(userAgent),
//opera: /opera/.test(userAgent),
msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
//mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent),
chrome: /chrome/.test(userAgent)
};
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.fn.gallery = function(config) {
var _self = this;
var defaults = {};
var opts = $.extend(defaults, config);
var clickable = true;
var changing = false;
var interval;
var no_click;
var positions = {
current: {zIndex: 100, top: "1px", left: "200px" },
left: {zIndex: 50, top: "20px", left: "0" },
right: {zIndex: 25, top: "20px", left: "459px" },
none: {zIndex: 0, top: "20px", left: "200px" }
};
var currentD = {width:"599px",height:"353px" };
var backD = { width:"527px", height:"310px" };
var $current = {
li: $(config.current[0]),
img: $(config.current[1])
};
var $left = {
li: $(config.left[0]),
img: $(config.left[1])
};
var $right = {
li: $(config.right[0]),
img: $(config.right[1])
};
var $none = {
li: $(config.none[0]),
img: $(config.none[1])
};
var go = function(target, jqueryCssJson, callback) {
setTimeout(function() {
if(jqueryCssJson.zIndex) {
target.css("z-index", jqueryCssJson.zIndex+1);
}
}, config.duration/4 * 2);
setTimeout(function() {
target.animate(jqueryCssJson, config.duration || 1000, callback);
}, config.actionTime || 50);
};
var setBlur = function(target) {
var src = target.img.attr("src");
if(src.indexOf("blur") != -1) {
return;
}
src = src.substr(0, src.lastIndexOf("."));
src+=".png"+"?version="+time;
target.img.attr("src", src);
};
var setClear = function(target) {
var src = target.img.attr("src");
if(src.indexOf("blur") == -1) {
return;
}
src = src.substr(0, src.lastIndexOf("_"));
src+=".jpg"+"?version="+time;
target.img.attr("src", src);
};
var toLeft = function(callback) {
$active = $('.btn a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.btn a:first'); //go back to first
//alert($active.length);
}
$(".btn a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
if(!clickable) return;
clickable = false;
go($left.li, positions.none);
go($none.li, positions.right);
go($right.li, positions.current);
go($current.li, positions.left);
go($current.img, backD, function() {
setBlur($current);
});
go($left.img, backD, function() {
setBlur($left);
});
go($none.img, backD, function() {
setBlur($none);
});
go($right.img, currentD, function() {
setClear($right);
$temp = $none;
$none = $left;
$left = $current ;
$current = $right;
$right = $temp;
callback();
clickable = true;
});
};
var toRight = function(callback) {
$active1 = $('.btn a.active').prev();
if ( $active1.length === 0) { //If paging reaches the end...
$active1 = $('.btn a:last'); //go back to first
}
$(".btn a").removeClass('active'); //Remove all active class
$active1.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
if(!clickable) return;
clickable = false;
go($current.li, positions.right);
go($right.li, positions.none);
go($none.li, positions.left);
go($left.li, positions.current);
go($current.img, backD, function() {
setBlur($current);
});
go($right.img, backD, function() {
setBlur($current);
});
go($none.img, backD, function() {
setBlur($current);
});
go($left.img, currentD, function() {
setClear($left);
$temp = $current;
$current = $left;
$left = $none;
$none = $right;
$right = $temp;
callback();
clickable = true;
});
};
var clearEvents = function() {
$current.img.unbind("click");
$left.img.unbind("click");
$right.img.unbind("click");
$none.img.unbind("click");
$(".btn1").unbind("click");
$(".btn2").unbind("click");
$(".btn3").unbind("click");
$(".btn4").unbind("click");
};
function start(){
interval = autoGo();
}
function is_start(){
if(no_click){
clearTimeout(no_click);
no_click = setTimeout(start, 1000);
}else{
no_click = setTimeout(start, 1000);
}
}
var bindEvent = function() {
$left.img.bind("click", function(){
stopAutoGo();
if(config.start) {
config.start();
}
clearEvents();
toRight(function() {
bindEvent();
});
if(config.end) {
setTimeout(config.end, config.duration || 1000);
}
is_start();
});
$right.img.bind("click", function() {
stopAutoGo();
if(config.start) {
config.start();
}
clearEvents();
toLeft(function() {
bindEvent();
});
if(config.end) {
setTimeout(config.end, config.duration || 1000);
}
is_start();
})
function Rightmove(){
if(config.start) {
config.start();
}
toLeft(function() {
clearEvents();
// setTimeout(bindEvent, 350);
// bindEvent();
});
if(config.end) {
setTimeout(config.end, 2);
}
}
function Leftmove(){
if(config.start) {
config.start();
}
toRight(function() {
clearEvents();
// setTimeout(bindEvent, 350);
// bindEvent();
});
if(config.end) {
setTimeout(config.end, 2);
}
}
function Rightmove1(){
if(config.start) {
config.start();
}
toLeft(function() {
clearEvents();
// setTimeout(bindEvent, 350);
bindEvent();
});
if(config.end) {
setTimeout(config.end, 2);
}
is_start();
}
function Leftmove1(){
if(config.start) {
config.start();
}
toRight(function() {
clearEvents();
// setTimeout(bindEvent, 350);
bindEvent();
});
if(config.end) {
setTimeout(config.end, 2);
}
is_start();
}
function is_bind(){
if($(".btn2").data("events")["click"] ){
}
}
$(".btn1").bind("click",function(){
stopAutoGo();
// is_bind();
$active = $('.btn a.active');
var leg = $active.attr("rel")-1;
if(leg==1){
Leftmove1();
}else if(leg==2){
clearEvents();
Leftmove();
setTimeout(Leftmove1, 700);
}else if(leg ==3){
Rightmove1();
}
})
$(".btn2").bind("click",function(){
stopAutoGo();
$active = $('.btn a.active');
var leg = $active.attr("rel");
if(leg==3){
Leftmove1();
}else if(leg==4){
clearEvents();
Leftmove();
setTimeout(Leftmove1, 700);
}else if(leg==1){
Rightmove1();
}
})
$(".btn3").bind("click",function(){
stopAutoGo();
$active = $('.btn a.active');
var leg = $active.attr("rel");
if(leg==2){
Rightmove1();
}else if(leg== 1){
clearEvents();
Rightmove();
setTimeout(Rightmove1, 700);
}else if(leg ==4){
Leftmove1();
}
})
$(".btn4").bind("click",function(){
stopAutoGo();
$active = $('.btn a.active');
var leg = $active.attr("rel");
if(leg==3){
Rightmove1();
}else if(leg== 2){
clearEvents();
Rightmove();
setTimeout(Rightmove1, 700);
}else if(leg == 1){
Leftmove1();
}
})
};
bindEvent();
var autoGo = function(callback) {
if(changing) return;
changing = true;
interval = setInterval(function() {
if(config.start) {
config.start();
}
toLeft(function() {
clearEvents();
bindEvent();
});
if(config.end) {
setTimeout(config.end, config.duration || 1000);
}
}, config.changeTimeout || 3000);
if(callback) callback();
return interval;
};
function stopAutoGo() {
if(interval) {
clearInterval(interval);
}
$current.img.unbind("mouseover");
changing = false;
}
if(config.autoChange) {
$(config.stopTarget).bind("mouseenter", function(e) {
stopAutoGo();
});
$(config.stopTarget).bind("mouseleave", function(e) {
interval = autoGo();
});
interval = autoGo();
}
};