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>
时间： 2024-10-12 15:31:10

JQ图片轮播的相关文章

自己做的jq图片轮播

新手开始学习js写的一个经常能用到的图片轮播效果 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>图片轮播</title> <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"> <

JQ 图片轮播并封装

利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可. demo:https://github.com/zsqosos/shopweb 具体代码如下: HTML结构: 1 <div class="banner" id="J_bg_ban"> 2 <ul> 3 <li><a href="#"><img src="banner_

jq实现图片轮播:圆形焦点+左右控制+自动轮播

来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"> 3: <head> 4: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5: <title>JQ图片轮播</title> 6:

图片轮播(左右切换)--js原生和jquery实现

图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在

图片轮播效果

今天有点空,写了个图片轮播的效果,使用了jq,直接上代码吧. 效果:http://edwardzhong.github.io/blog/2014/10/31/slidePics.html html如下: <div class="wrap"> <div class="left fl"><</div> <div class="right fr">></div> <div c

js/jquery中实现图片轮播

一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片轮播 jq(左右切换)</title> <style type="text/css">   body,div,ul,li,a,

原生js和jquery实现图片轮播

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

图片轮播(Jquery)

昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用. 经过调整和整合,完成了第一版本的jquery.carousel.js,接下来先简单介绍界面和功能: 1.界面 2.功能 点击切换.向前切换.向后切换.定时切换 3.功能实现 (1).测试代码 $(function () { var data = [ { src: 'Content/home/1.jpg', info: '1.jpg点击图片导航到