JQ图片轮播
<script src="{staticurl action="jquery.js" type="js"}"></script>
<style type="test/css">
div.LunBo {
position: relative;
list-style-type: none;
height: 170px;
width: 490px;
}
div.LunBo ul{
list-style:none;
}
div.LunBo ul li {
position: absolute;
height: 170px;
width: 490px;
left: 0px;
top: 0px;
list-style:none;
}
div.LunBo ul li.CurrentPic {
display: block;
}
div.LunBo div.LunBoNum {
position: absolute;
left: 374px;
bottom: 11px;
width: 83px;
text-align: right;
background-color: #999;
padding-left: 10px;
}
div.LunBo div.LunBoNum span {
height: 20px;
width: 15px;
display: block;
line-height: 20px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
float: left;
cursor: pointer;
}
div.LunBo div.LunBoNum span.CurrentNum {
background-color: #3F6;
</style>
<div class="LunBo">
<ul>
<li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
<div class="LunBoNum">
<span class="CurrentNum">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<script type="text/javascript" language="javascript">
var PicTotal = 5;// 当前图片总数
var CurrentIndex;// 当前鼠标点击图片索引
var ToDisplayPicNumber = 0;// 自动播放时的图片索引
$("div.LunBo div.LunBoNum span").click(DisplayPic);
function DisplayPic() {
// 测试是父亲的第几个儿子
CurrentIndex = $(this).index();
// 删除所有同级兄弟的类属性
$(this).parent().children().removeClass("CurrentNum")
// 为当前元素添加类
$(this).addClass("CurrentNum");
// 隐藏全部图片
var Pic = $(this).parent().parent().children("ul");
$(Pic).children().hide();
// 显示指定图片
$(Pic).children("li").eq(CurrentIndex).show();
}
function PicNumClick() {
$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
setTimeout("PicNumClick()",1000);
}
setTimeout("PicNumClick()",1000);
</script>
<script type="text/javascript">
$(function(){
})
</script>
完整代码：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>图片轮播演示</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 14px; } div.LunBo { position: relative; list-style-type: none; height: 170px; width: 490px; } div.LunBo ul li { position: absolute; height: 170px; width: 490px; left: 0px; top: 0px; display: none; } div.LunBo ul li.CurrentPic { display: block; } div.LunBo div.LunBoNum { position: absolute; left: 374px; bottom: 11px; width: 83px; text-align: right; background-color: #999; padding-left: 10px; } div.LunBo div.LunBoNum span { height: 20px; width: 15px; display: block; line-height: 20px; text-align: center; margin-top: 5px; margin-bottom: 5px; float: left; cursor: pointer; } div.LunBo div.LunBoNum span.CurrentNum { background-color: #3F6; } </style> </head> <body> <div class="LunBo"> <ul> <li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li> <li><img src="images/2.jpg" width="490" height="170"></li> <li><img src="images/3.jpg" width="490" height="170"></li> <li><img src="images/4.jpg" width="490" height="170"></li> <li><img src="images/5.png" width="490" height="170"></li> </ul> <div class="LunBoNum"> <span class="CurrentNum">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script type="text/javascript" language="javascript"> var PicTotal = 5; var CurrentIndex; var ToDisplayPicNumber = 0; $("div.LunBo div.LunBoNum span").click(DisplayPic); function DisplayPic() { // 测试是父亲的第几个儿子 CurrentIndex = $(this).index(); // 删除所有同级兄弟的类属性 $(this).parent().children().removeClass("CurrentNum") // 为当前元素添加类 $(this).addClass("CurrentNum"); // 隐藏全部图片 var Pic = $(this).parent().parent().children("ul"); $(Pic).children().hide(); // 显示指定图片 $(Pic).children("li").eq(CurrentIndex).show(); } function PicNumClick() { $("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click"); ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal; setTimeout("PicNumClick()",1000); } setTimeout("PicNumClick()",1000); </script> </body> </html>
简单代码：
<script src="{staticurl action="jquery.js" type="js"}"></script> <style type="text/css"> .LunBo ul li { list-style-type :none; } </style> </head> <body> <div class="LunBo"> <ul> <li class="CurrentPic" >图片0</li> <li>图片1</li> <li>图片2</li> <li>图片3</li> <li>图片4</li> </ul> <div class="LunBoNum"> <span class="CurrentNum"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> <script type="text/javascript" language="javascript"> var PicTotal = 5;// 控制显示当前图片总数 var CurrentIndex;// 当前鼠标点击图片索引s var ToDisplayPicNumber = 0;// 自动播放时的图片索引 $("div.LunBo div.LunBoNum span").click(DisplayPic); function DisplayPic() { // 测试是父亲的第几个儿子 CurrentIndex = $(this).index(); // 删除所有同级兄弟的类属性 $(this).parent().children().removeClass("CurrentNum") // 为当前元素添加类 $(this).addClass("CurrentNum"); // 隐藏全部图片 var Pic = $(this).parent().parent().children("ul"); $(Pic).children().hide(); // 显示指定图片 $(Pic).children("li").eq(CurrentIndex).show(); } function PicNumClick() { $("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click"); ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal; setTimeout("PicNumClick()",1000); } setTimeout("PicNumClick()",1000); </script>
