转自：http://www.codefans.net/jscss/code/4896.shtml
- 百度校园 频道的JS焦点图代码 带缩略图，鼠标只需放在缩略图上就可以切换大图片，上面显示大图片，下面显示缩略图，是一种比较经典的图片切换特效，来自百度官方的图片特效，基于jquery1.6.2插件，期待前端开发者一同参考研究。
-
<!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>
<title>
百度校园jQuery焦点图
</title>
<script type="text/javaScript" src="/ajaxjs/jquery-1.6.2.min.js">
</script>
<style>
html, form, h1, h2, h3, h4, h5, h6, p{margin:0; padding:0;} body { margin:0;
padding:0; border:none; font-size:12px; line-height:150%; color:#676767;
background:#fff; font-family:Arial, Helvetica, sans-serif; /*font-family:'\5FAE\8F6F\96C5\9ED1';*/
font-family:'\5B8B\4F53'; } img{ margin:0; padding:0; border:none;} ol,
ul, li, dl, dt, dd{ margin:0; padding:0; list-style: none; } .fl{ float:left;}
.fr{ float:right;} a{ color:#0068CC; text-decoration:none;} a:hover{ color:#0151A7;
text-decoration:underline;} .w1003{ width:800px; margin:0 auto;} .w733{
width:733px; overflow:hidden;} .w256{ width:256px; overflow:hidden;} .highlight_tip{
padding:7px 0 0; z-index:10; position:relative; position:absolute; left:0;
bottom:0; width:733px; height:57px;} .highlight_tip ul li{ position:absolute;
z-index:20; top:10px; cursor:pointer;} ul li.tab1{ left:8px} ul li.tab2{
left:110px} ul li.tab3{ left:212px} ul li.tab4{ left:316px} ul li.tab5{
left:419px} ul li.tab6{ left:524px} ul li.tab7{ left:628px} .v_content_list
ul{ position:absolute} .v_content_list ul li{ width:733px; float:left;
overflow:hidden; position:relative} li.navigation img{width:95px;border:
1px #fff solid;position:absolute;opacity:0.5;-moz-opacity:0.5;-webkit-opacity:0.5;
filter:alpha(opacity=50);} li.current img{border: 2px #0076A8 solid;opacity:1;-moz-opacity:1;-webkit-opacity:1;filter:alpha(opacity=100)}
#slider_container_2 { float: left; margin: 0 0 0 -15px; padding: 15px;
width: 700px; background: url(../img/bg.png) no-repeat 0 0; } .SliderName_2
{ float: left; height: 337px; overflow: hidden; } .SliderNamePrev_2 { background:
url(../img/left.png) no-repeat left center; width: 50px; height: 450px;
display: block; position: absolute; top: 0; left: 0; text-decoration: none;
} .SliderNameNext_2 { background: url(../img/right.png) no-repeat right
center; width: 50px; height: 450px; display: block; position: absolute;
top: 0; right: 0; text-decoration: none; } .SliderName_2Description { padding:
10px; font-family: Tahoma,Arial,Helvetica; font-size: 14px; line-height:
30px; letter-spacing: 1px; text-align: center; color: #ffffff; text-shadow:
0 1px 3px #000000; } #SliderNameNavigation_2 { margin: 0; padding: 0; text-align:
center; position: absolute;bottom: 0px;z-index: 100;left:9px; } #SliderNameNavigation_2
a:link, #SliderNameNavigation_2 a:active, #SliderNameNavigation_2 a:visited,
#SliderNameNavigation_2 a:hover{ margin: 0; padding: 0; font-size: 0; line-height:
0; text-decoration: none; } #SliderNameNavigation_2 a img { border: 1px
#fff solid; width: 95px; opacity:0.5; -moz-opacity:0.5; -webkit-opacity:0.5;
filter:alpha(opacity=50); height: 44px; } #SliderNameNavigation_2 a.active
img { border: 2px #0076A8 solid; opacity:1; -moz-opacity:1; -webkit-opacity:1;
filter:alpha(opacity=100); } div.w733{ position:relative;left:0px;top:0px;}
</style>
</head>
<body>
<div class="w1003 main">
<div class="boxa" style="margin-top:10px;">
<script type="text/javascript">
$(document).ready(function() {
var picWidth = $(".v_content_list").width(); //获取显示焦点图的宽度
var len = $(".v_content_list ul li").length; //获取焦点图个数
var img_container = $(".v_content_list ul"); //定义变量
var button_container = $(".highlight_tip li"); //定义变量
var index = 0; //初始化index=0
//设置tab按钮的背景透明度为0.5
//$(".highlight_bg").css("opacity","0.5")
//为tab按钮添加鼠标滑入事件，以显示相应的内容
button_container.mouseenter(function() {
index = button_container.index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//计算出外围ul元素的宽度
img_container.css("width", picWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$(".v_content_list").hover(function() {
clearInterval(picTimer);
},
function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if (index == len) {
index = 0;
}
},
4000); //4000代表自动播放的间隔，单位：毫秒，1秒=1000毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //默认效果
var nowLeft = -index * picWidth; //根据index值计算ul元素的left值
//alert(nowLeft);
img_container.stop(true, false).animate({
"left": nowLeft
},
300); //通过animate()调整ul元素滚动到计算出的position
button_container.eq(index).addClass("current").siblings().removeClass("current"); //为当前的tab按钮添加class="current"
//button_container.eq(index).stop(true).animate({"opacity":"1","top":-5+"px"},300).siblings().stop(true).animate({"opacity":"0.6","top":10+"px"},300); //为当前的tab按钮添加选中的效果
}
})
</script>
<div class="w733 fl" style="height:337px;">
<div class="highlight_tip">
<ul class="tab clear">
<li class="tab1 navigation">
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_5281c48354ddb.jpg" width="99" height="48"
/>
</a>
</li>
<li class="tab2 navigation">
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_529707516da03.jpg" width="99" height="48"
/>
</a>
</li>
<li class="tab3 navigation">
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_5289cedae6005.png" width="99" height="48"
/>
</a>
</li>
<li class="tab4 navigation">
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_52689f01d614e.jpg" width="99" height="48"
/>
</a>
</li>
<li class="tab5 navigation">
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_529703723c8d7.jpg" width="99" height="48"
/>
</a>
</li>
<li class="tab6 navigation">
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_50594c1f97227.jpg" width="99" height="48"
/>
</a>
</li>
<li class="tab7 navigation">
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_514fc23184f3d.jpg" width="99" height="48"
/>
</a>
</li>
</ul>
</div>
<div class="v_content_list">
<ul class="clear">
<li>
</a>
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_5281c48354ddb.jpg" width="733" height="337"
/>
</a>
</li>
<li>
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_529707516da03.jpg" width="733" height="337"
/>
</a>
</li>
<li>
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_5289cedae6005.png" width="733" height="337"
/>
</a>
</li>
<li>
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_52689f01d614e.jpg" width="733" height="337"
/>
</a>
</li>
<li>
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_529703723c8d7.jpg" width="733" height="337"
/>
</a>
</li>
<li>
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_50594c1f97227.jpg" width="733" height="337"
/>
</a>
</li>
<li>
<a href="/" target="_blank">
<img src="/jscss/demoimg/201402/up_514fc23184f3d.jpg" width="733" height="337"
/>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
2181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
