WEB开发网
开发学院网页设计JavaScript jquery实现仿卖包包flahs焦点图效果 阅读

jquery实现仿卖包包flahs焦点图效果

　2012-05-16 17:31:55　来源：WEB开发网　　　
核心提示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln
<!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>

Tags：jquery 实现 包包

编辑录入：爽爽　[复制链接] [打 印]
更多精彩
赞助商链接

热点阅读
焦点图片
最新推荐
精彩阅读