图片轮播
<!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>无标题文档</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style type="text/css">
#banner {position:relative; 478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; 478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
</style>
</head>
<body>
<div id="banner">
<div id="banner_bg"></div><!--标题背景-->
<div id="banner_info"></div><!--标题-->
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="images/slide1.jpg" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="images/slide2.jpg" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="images/slide3.jpg" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="images/slide4.jpg" alt="橡树小屋的blog"/></a>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var t = n =0, count;
$(document).ready(function(){
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
$("#banner li").click(function() {
var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
n = i;
if (i >= count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto()
{
n = n >=(count -1) ?0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>
引用的jquery-1.10.2.min.js
导航特效
<!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鼠标悬停下拉导航菜单 - 站长素材</title> <link href="css/menu.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/nav.js" type="text/javascript"></script> </head> <body> <div class="rz_bw_nav001_m"> <div class="nav"> <div class="nav_main"> <ul id="nav_all"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a> <ul style="display: none;"> <li style=" 8px;"></li> <li><a href="#">公司简介</a></li> <li><a href="#">企业文化</a></li> <li><a href="#">荣誉资质</a></li> </ul> </li> <li><a href="#">服务项目</a> <ul style="display: none;"> <li style=" 28px;"></li> <li><a href="#">网站建设</a></li> <li><a href="#">微信开发</a></li> <li><a href="#">电商商务</a></li> <li><a href="#">安卓开发</a></li> <li><a href="#">苹果开发</a></li> <li><a href="#">动画制作</a></li> <li><a href="#">艺术设计</a></li> </ul> </li> <li><a href="#"> <div style="_margin-top: 12px;"></div>合作案例</a> <ul style="display: none;"> <li style=" 52px;"></li> <li><a href="#">网站建设</a></li> <li><a href="#">微信开发</a></li> <li><a href="#">电商商务</a></li> <li><a href="#">安卓开发</a></li> <li><a href="#">苹果开发</a></li> <li><a href="#">动画制作</a></li> <li><a href="#">艺术设计</a></li> </ul> </li> <li><a href="#">新闻资讯</a> <ul style="display: none;"> <li style=" 340px;"></li> <li><a href="#">公司动态</a></li> <li><a href="#">行业新闻</a></li> </ul> </li> <li><a href="#">信息收集</a> <ul style="display: none;"> <li style=" 398px;"></li> <li><a href="#">设计欣赏</a></li> <li><a href="#">资源共享</a></li> <li><a href="#">百家杂谈</a></li> </ul> </li> <li><a href="#">养生堂</a> <ul style="display: none;"> <li style=" 260px;"></li> <li><a href="#">开心一刻</a></li> <li><a href="#">美食餐饮</a></li> <li><a href="#">世界之醉</a></li> <li><a href="#">科技之炫</a></li> <li><a href="#">植物之美</a></li> </ul> </li> </ul> <div class="rz_bw_server_tel">服务热线：138-0000-0000</div> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p> </div> </body> </html>
css代码
@charset "utf-8";
body{clear:both;margin:0;}
div, ul, li{margin:0;padding:0;border:0;}
ul, li{list-style-type:none;text-transform:capitalize;}
.rz_bw_nav001_m{clear:both;100%;height:39px;background:url(../rz_bw_images/rz_bw_nav001-bg.png);border-bottom:#639ACA solid 2px;}
.nav{font-size:12px;990px;margin:0px auto 0;border-bottom:#639ACA solid 1px;height:39px;line-height:39px;position:relative;z-index:1;}
.nav a{text-decoration:none;}.
nav_main{height:39px;padding:0 5px;background:#FFF url(../rz_bw_images/rz_bw_nav001-bg.png) repeat-x 0 top;position:relative;}
#nav_all{height:39px;float:left;line-height:39px;position:relative;z-index:222;}
#nav_all li{text-align:center;float:left;}
#nav_all li a{color:#639ACA;display:inline-block;font-size:14px;font-weight:bold;cursor:pointer;padding:0 20px 0 20px;_padding:0 10px;height:39px;line-height:39px;white-space:nowrap;}
#nav_all li a:hover{background:url(../rz_bw_images/bird.png) center 30px no-repeat;height:39px;line-height:39px;border-top:2px solid #639ACA;overflow:hidden;}
#nav_all li ul{display:none;position:absolute;z-index:99;990px;left:-5px;top:40px;}
#nav_all ul li{background-image:none;line-height:32px;height:32px;padding-top:0px;padding:0;}
#nav_all ul li a{background-image:none;padding:0px 10px;margin:0px;height:32px;line-height:32px;color:#fff;font-weight:normal;background:#639ACA;border:none;}
#nav_all ul li a:hover{background-image:none;padding:0px 10px;margin:0px auto;height:30px;line-height:30px;color:#FFF;background:#639ACA;border-top:none;}
.rz_bw_server_tel {font-size:14px;font-family:"微软雅黑", "幼圆", sans-serif;color:#fff;float:right;200px;height:39px;line-height:39px;text-align:center;background-color:#63aACA;}
引用jquery-1.9.1.min.js
js处理代码
$(function () {
var st = 180;
$('#nav_all>li').mouseenter(function () {
$(this).find('ul').stop(false, true).slideDown(st);
}).mouseleave(function () {
$(this).find('ul').stop(false, true).slideUp(st);
});
});