<!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>jQuery左侧Tab切换的图片滑块插件DEMO演示</title>
</head>
<body>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
list-style-type:none;
}
a, img {
border:0;
}
body {
font:12px/180% "微软雅黑", Arial, Helvetica, sans-serif;
}
/* film_focus */
.film_focus {
width:857px;
height:340px;
overflow:hidden;
position:relative;
margin:20px auto;
}
.film_focus .film_focus_imgs_wrap {
background:url(images/load.gif) no-repeat center center;
}
.film_focus ul.film_focus_imgs {
height:340px;
height:9999em;
position:absolute;
right:0;
top:0;
overflow:hidden;
}
.film_focus ul.film_focus_imgs li {
height:340px;
overflow:hidden;
}
.film_focus ul.film_focus_imgs li img {
height:340px;
width:626px;
}
.film_focus .film_focus_desc h3 {
height:45px;
line-height:45px;
overflow:hidden;
position:absolute;
left:232px;
bottom:0;
background:rgba(0, 0, 0, .5);
color:#fff;
width:100%;
padding-left:20px;
z-index:99;
font-size:16px;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#7F000000', endColorstr='#7F000000');
}
.film_focus ul.film_focus_nav {
width:232px;
height:340px;
position:absolute;
left:0;
top:0;
z-index:100;
}
.film_focus ul.film_focus_nav li {
height:47px;
background:#d7d7dc;
margin:0px 0px 5px 0;
padding:0px 18px 0 19px;
position:relative;
width:190px;
cursor: pointer;
cursor: hand;
color:#333;
font-weight:bold;
font-size:14px;
overflow:hidden;
line-height:47px;
}
.film_focus ul.film_focus_nav li.cur {
background:url(images/hd_on.png) no-repeat;
width:190px;
height:132px;
left:0px;
padding:0px 33px 0 25px;
_background:url(images/hd_on.png) no-repeat 0 0;
word-break:break-all;
color:#fff;
font-weight:bold;
font-size:22px;
overflow:hidden;
line-height:30px;
}
.film_focus ul.film_focus_nav li b {
display:none
}
.film_focus ul.film_focus_nav li b span {
display:block
}
.film_focus ul.film_focus_nav li.cur b {
display:block;
vertical-align: middle;
display: table-cell;
height:132px;
}
.film_focus ul.film_focus_nav li.cur span {
display:none
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<!--焦点图-->
<div class="film_focus">
<div class="film_focus_desc">
<h3>标题1</h3>
<ul class="film_focus_nav">
<li class="cur"> <b>长标题1</b><span>短标题1</span> </li>
<li> <b>长标题2</b><span>短标题2</span> </li>
<li> <b>长标题3</b><span>短标题3</span> </li>
<li> <b>长标题4</b><span>短标题4</span> </li>
<li> <b>长标题5</b><span>短标题5</span> </li>
</ul>
</div>
<div class="film_focus_imgs_wrap">
<ul class="film_focus_imgs">
<li><a target="_blank" href="#"><img src="images/a1.jpg" alt="标题1" /></a></li>
<li><a target="_blank" href="#"><img src="images/a2.jpg" alt="标题2" /></a></li>
<li><a target="_blank" href="#"><img src="images/a3.jpg" alt="标题3" /></a></li>
<li><a target="_blank" href="#"><img src="images/a4.jpg" alt="标题4" /></a></li>
<li><a target="_blank" href="#"><img src="images/a5.jpg" alt="标题5" /></a></li>
</ul>
</div>
</div>
<!--焦点图END-->
<script type="text/javascript">
(function(A){
A.fn.th_video_focus=function(E){
var G={
actClass:"cur",
navContainerClass:".focus_pic_preview",
focusContainerClass:".focus_pic",
animTime:600,
delayTime:5000
};
if(E){
A.extend(G,E)
}
var C=G.actClass, D=G.navContainerClass, B=G.focusContainerClass, F=G.animTime, H=G.delayTime, I=null;
return this.each(function(){
var O=A(this), M=A(D+" li",O), P=A(B+" li",O), L=M.length, K=O.height();
function N(R){
var V=K*R*-1;
var U=A(B+" li",O), W=null, T=null;
for(var S=0;S<=R;S++){
W=U.eq(S);
T=W.find('script[type="text/templ"]');
if(T.length>0){
W.html(T.html())
}
}
A(B,O).stop().animate({top:V},F,function(){
var Y=O.find("h3"), X=Y.height();
Y.height(0).html(A(B+" li").eq(R).find("img").attr("alt")).animate({height:X},600)
});
A(D+" li").eq(R).addClass(C).siblings().removeClass(C)
}
function Q(){
if(I){
clearInterval(I)
}
I=setInterval(function(){
var R=A(D+" li."+C).index();
N((R+1)%L)
},H)
}
O.hover(function(){
if(I){
clearInterval(I)
}
},function(){
Q()
});
var J=null;
M.hover(function(){
var R=A(this).index();
if(I){
clearInterval(I)
}
J=setTimeout(function(){
N(R)
},300)
},function(){
if(J){
clearTimeout(J)
}
Q()
}).click(function(T){
var R=A(this).index(), S=P.eq(R).find("a");
if(document.uniqueID||window.opera){
S[0].click();
T.stopPropagation();
T.preventDefault()
}
});
Q()
})
}
})(jQuery);
$(function(){
$(".film_focus").th_video_focus({
navContainerClass:".film_focus_nav",
focusContainerClass:".film_focus_imgs",
delayTime:3000
});
});
</script>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div><br />
</body>
</html>
一款很实用的jQuery左侧Tab切换的图片滑块插件.zip
版权申诉
87 浏览量
2022-11-10
02:18:46
上传
评论
收藏 306KB ZIP 举报
一款很实用的jQuery左侧Tab切换的图片滑块插件.zip （9个子文件） 
132687040599965225 images 
a1.jpg 57KB a2.jpg 58KB a5.jpg 63KB
load.gif 3KB
hd_on.png 1KB a4.jpg 26KB a3.jpg 70KB
index.html 6KB js 
jquery.js 83KB资源评论
毕业_设计
- 粉丝: 1921
- 资源: 1万+
最新资源
- 成都市地图含高新区（高新南区，高新西区），天府新区，东部新区虚拟行政区划
- XILINXFPGA源码XilinxEDK设计试验
- XILINXFPGA源码XilinxEDKMicroBlaze内置USB固件程序
- 基于 django 的视频点播后台管理系统源代码+数据库
- 基于Java的网上医院预约挂号系统的设计与实现(部署视频)-kaic.mp4
- 新建项目opengrok
- XILINXFPGA源码XilinxDDR3最新VHDL代码(通过调试)
- XILINXFPGA源码XilinxDDR2存储器接口调试代码
- 班级事务管理系统设计与实现(部署视频)-kaic.mp4
- excel带下拉框展示（动态展示）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
