仿麦包包首页table轮换图jQuery
仿麦包包首页table轮换图jQuery
前几天,天外飞仙闲着无意打开麦包包，看到简洁的焦点图，觉得有意思，试试自己练手下。
刚开始，做的有些问题，里面有个样式，我是直接.bks的，不管如何都无法渲染该样式
在蓝色理想上发了帖子，很快有朋友帮忙改了
在该class前加个标签li.bks就可以实现
经过百度谷歌的帮助下，对css优先级有认识
再次感谢帮助我的朋友 泥巴巴
在线效果DEMO
<!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>
<meta name="keywords" content="jQuery切换,table切换,简洁轮换效果,自动切换" >
<meta name="description" content="jQuery吧,Write Less, Do More,重注前端开发,web前端开发">
<style type="text/css">
body,div,ul,li,a,img,h1{margin:0;padding:0}
img{border:none}
ul,li{list-style-type:none}
body{margin:20px auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#373737;background:#fff}
.boxx{width:698px;height:338px;margin:0 auto;position:relative;border:1px #ccc solid}
.boxx_con{width:100%;position:absolute;z-index:10}
.boxx_title{width:250px;height:50px;position:absolute;top:313px;left:545px;z-index:100;}
.boxx_title li{width:15px;height:15px;float:left;margin-left:10px;display:inline;cursor:pointer;line-height:15px;text-align:center;background:#f7f6f2;color:#373737}
li.bks{color:#fff;background:#ce2329;}<!--css优先级,慎用直接.bks-->
</style>
</head>
<body><div style="margin:0 auto;text-align:center"><script type="text/javascript">/*DEMO728*90，创建于2012-5-15*/ var cpro_id = 'u897038';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div><div style="margin:0 auto;text-align:center"><script type="text/javascript">/*468*60，创建于2012-5-7*/ var cpro_id = 'u883919';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div>
<h1><a href="http://jqueryba.com/" target="_blank" title="jQuery吧,前端开发,web前端,web前端开发,前端开发工程师,前端开发攻城师,设计,前端资源,html+CSS,JavaScript,Ajax,jQuery学习,html5,css3,浏览器兼容,网页布局制作">jQuery吧</a></h1>
<h2><a href="http://jqueryba.com/jquery/mbaobao/mbaobao.html" target="_blank">仿麦包包首页图片切换效果jquery版本</a></h2>
<div class="boxx">
<ul class="boxx_con" id="boxx_con">
<li><a href=""><img src="images/1.jpg"/></a></li>
<li style="display:none"><a href=""><img src="images/2.jpg"/></a></li>
<li style="display:none"><a href=""><img src="images/3.jpg"/></a></li>
<li style="display:none"><a href=""><img src="images/4.jpg"/></a></li>
<li style="display:none"><a href=""><img src="images/5.jpg"/></a></li>
</ul>
<ul class="boxx_title" id="boxx_title">
<li class="bks">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><div style="width:100%;height:600px;margin:0 auto"></div><script type="text/javascript">/*DEOM120*270，创建于2012-5-12*/ var cpro_id = 'u893319';</script><script src="http://cpro.baidu.com/cpro/ui/f.js" type="text/javascript"></script><script type="text/javascript">/*DEMO728*15，创建于2012-5-15*/ var cpro_id = 'u897027';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var p=0;
var timeInterval=3000;
var $bli=$("#boxx_con li");
var $pli=$("#boxx_title li");
$bli.hide();
$($bli[0]).show();
function play(){
p<$bli.length-1?p++:p=0;
$bli.eq(p).show().siblings().hide();
$pli.eq(p).addClass("bks").siblings().removeClass("bks");
}
set = window.setInterval(play,timeInterval);
$pli.mouseover(function(){
window.clearInterval(set);
p=$(this).index();
$bli.eq(p).show().siblings().hide();
$pli.eq(p).addClass("bks").siblings().removeClass("bks");
set = window.setInterval(play,timeInterval);
});
})
</script>
</body>
</html>