怎么用jquery做轮播图效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用jquery做轮播图效果相关的知识，希望对你有一定的参考价值。
参考技术A http://www.jb51.net/article/41308.htm一看就会 参考技术B >
<span>5</span>
</div>
</div>
在网页的<head></head>代码间加入jQuery框架链接<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
编写JS代码如下
<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>
链接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;
制作完成，保存浏览效果如下
最后附上全部代码
<!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>
以上代码保存为html文件后可直接运行。
swiper轮播图自动播放速度太快
一个页面上有多个swiper轮播组件,就自动播放的这个轮播图闪的特别快
以上是关于怎么用jquery做轮播图效果的主要内容，如果未能解决你的问题，请参考以下文章