仿麦包包首页table轮换图jQuery

仿麦包包首页table轮换图jQuery
前几天,天外飞仙闲着无意打开麦包包，看到简洁的焦点图，觉得有意思，试试自己练手下。
刚开始，做的有些问题，里面有个样式，我是直接.bks的，不管如何都无法渲染该样式
在蓝色理想上发了帖子，很快有朋友帮忙改了
在该class前加个标签li.bks就可以实现
经过百度谷歌的帮助下，对css优先级有认识

<!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>

<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>

<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>

　　

再次感谢帮助我的朋友 泥巴巴
在线效果DEMO

posted @ 2012-03-19 20:25  遗失的天空  阅读(878)  评论(1)  编辑  收藏  举报