<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>西山居首页jQuery焦点图代码</title>
<link rel="stylesheet" href="css/jb51.css" />
<script src="js/jquery.js" ></script>
<script src="js/jquery.easing.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var kv_num = 0;
function nextKv(){
$(".control").attr("style","pointer-events:none");
kv_num++;
if(kv_num==4){kv_num=0;}
$(".kv_pic").animate({ left:-1000*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){
$(".control").attr("style","pointer-events:auto");
}});
$(".kv_word>ul").stop().animate({ left:-340*kv_num},{ easing: 'easeInOutQuad', duration: 800, complete: function(){}});
$(".kv_dot ul li").removeClass("action").eq(kv_num).addClass("action");
}
function prevKv(){
$(".control").attr("style","pointer-events:none");
kv_num--;
if(kv_num==-1){kv_num=3;}
$(".kv_pic").animate({ left:-1000*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){
$(".control").attr("style","pointer-events:auto");
}});
$(".kv_word>ul").stop().animate({ left:-340*kv_num},{ easing: 'easeInOutQuad', duration: 800, complete: function(){}});
}
$(".control .next").on("click",nextKv);
$(".control .prev").on("click",prevKv);
// 自动轮播
setInterval(nextKv,3500);
var top = $(".footer").offset().top;
if((top+80)<=$(window).height()){
$(".footer").attr("style","position:fixed; bottom:0;");
}
});
</script>
</head>
<body>
<div style="height:10px;width:100%;"></div>
<div class="main">
<div class="kv">
<ul class="kv_pic">
<li><img src="images/index_kv1.jpg" alt="" /></li>
<li><img src="images/index_kv2.jpg" alt="" /></li>
<li><img src="images/index_kv3.jpg" alt="" /></li>
<li><img src="images/index_kv4.jpg" alt="" /></li>
</ul>
<div class="kv_word">
<ul>
<li>
<h3 class="tit1">家属开放日</h3>
<h3 class="tit2">感谢有你 一路同行</h3>
<p>为感谢家人们对居士们的默默支持与理解，西山居会在每一年邀请家属们参加一年一度的家属开放日，感受西山居的环境文化和办公氛围。</p>
</li>
<li>
<h3 class="tit1">2014神觅会</h3>
<h3 class="tit2">玩转创意 游戏穿越</h3>
<p>是否幻想过把游戏场景搬到现实生活中？是否憧憬过穿越进游戏里当一回英雄侠士驰骋江湖？西山居士玩转创意，将梦想中的世界在你我身边呈现。我们在办公中游戏，在游戏中办公！！</p>
</li>
<li>
<h3 class="tit1">西山居俱乐部</h3>
<h3 class="tit2">Hello，西山居俱乐部！</h3>
<p>在这里，我们为你寻找志同道合的朋友；在这里，我们为你丰富枯燥的业余生活。摄影、羽毛球、乒乓球、足球、游泳、篮球……准备好加入我们了吗？</p>
</li>
<li>
<h3 class="tit1">2015西山居年会</h3>
<h3 class="tit2">纵情聚·变 同享盛事</h3>
<p>每一年总有一晚，我们把酒言欢，共叙期许；每一年总有一刻，我们拥抱佳绩，共聚一堂。这是一个大家庭，这是一个大江湖，各路英雄豪杰共进西山居年夜饭，满载而归结束一年的辛劳。</p>
</li>
</ul>
</div>
<div class="control">
<div class="prev"><img src="images/icons_move_left.jpg" alt="" /></div>
<div class="next"><img src="images/icons_move_right.jpg" alt="" /></div>
</div>
<div class="kv_dot">
<ul>
<li class="action"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div style="text-align:center;margin:-200px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
jQuery实现的西山居首页焦点图幻灯特效源码.zip
版权申诉
58 浏览量
2022-11-07
23:58:33
上传
评论
收藏 733KB ZIP 举报
jQuery实现的西山居首页焦点图幻灯特效源码.zip （12个子文件） 
132686875813776506 css 
jb51.css 3KB images 
index_kv1.jpg 167KB
icons_dot1.png 1KB index_kv3.jpg 136KB index_kv4.jpg 130KB icons_move_right.jpg 2KB icons_move_left.jpg 1KB icons_dot2.png 1KB index_kv2.jpg 228KB
index.html 4KB js jquery.js 262KB jquery.easing.js 8KB资源评论
