jquery 图片轮播
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片自动切换</title>
<script language="javascript" src="http://www.vihchina.net/Public/Js/jQuery/jQuery.js"></script>
<style type="text/css">
*{ margin:0; padding:0; border:0; list-style:none}
img{ display:block; border:0}
body{ padding:50px;}
.switch{ width:320px; height:280px; border:1px #CCCCCC solid; padding:3px;}
.switch .pic_box{width:320px; height:255px; position:relative;}
.switch .pic_box li{ width:320px; height:255px; float:left; position:absolute}
.switch .pic_box li .pic{ width:320px; height:255px;}
.switch .pic_box li .pic img{ width:320px; height:230px;}
.switch .pic_box li .txt{ display:block; width:320px; height:25px; font-size:13px; overflow:hidden; line-height:25px; text-align:center; overflow:hidden; color:#666666}
.switch .btn_box{ width:320px; height:25px; float:right; background:#2B2B2B}
.switch .btn_box li{ border:1px solid #333333; width:23px; height:23px; float:left; background:#CCCCCC; cursor:pointer; line-height:25px; overflow:hidden; text-align:center; font-weight:700}
</style>
</head>
<body>
<div class="switch">
<ul class="pic_box">
<li ).eq(i).text()).fadeIn(800);
}
</script>
来源www.vihchina.net
- 上一篇 »css实现图片轮播
- 下一篇 »CSS3 实现简单轮播图 - 橙zz