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="data: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: #;
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="data:images/1.png" width="" height=""></li>
<li><img src="data:images/2.jpg" width="" height=""></li>
<li><img src="data:images/3.jpg" width="" height=""></li>
<li><img src="data:images/4.jpg" width="" height=""></li>
<li><img src="data:images/5.png" width="" height=""></li>
</ul>
<div class="LunBoNum">
<span class="CurrentNum"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript" language="javascript">
var PicTotal = ;
var CurrentIndex;
var ToDisplayPicNumber = ;
$("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 + ) % PicTotal;
setTimeout("PicNumClick()",);
}
setTimeout("PicNumClick()",);
</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 = ;// 控制显示当前图片总数
var CurrentIndex;// 当前鼠标点击图片索引s
var ToDisplayPicNumber = ;// 自动播放时的图片索引
$("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 + ) % PicTotal;
setTimeout("PicNumClick()",);
}
setTimeout("PicNumClick()",);
</script>
JQ图片轮播的更多相关文章
- 2019.11.15 JQ图片轮播
<div class="three"> <div class="bjtp"> <img class="bjpic b1& ...
- jq实现图片轮播:圆形焦点+左右控制+自动轮播
来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...
- html+jq实现简单的图片轮播
今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- jQuery编写的一款兼容IE6的图片轮播幻灯片
jQuery编写的一款兼容IE6的图片轮播幻灯片,很不错的一款jquery特效.大家可以下载下来研究研究. 每隔几秒就自动切换一波图片,此效果兼容性还做的不错,适合居多的浏览器. 适用浏览器:IE6. ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
随机推荐
- C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - .NET商业化成品成熟各种数据权限的需求对应例子代码
还是我上次提出的那个问题问题:假设一个订单表,1.角色A可以看自己的2.角色B可以看工作组的3.角色C可以看金额是1000元以下的(自定义条件是否可行?如果可以,请详细说明)4.角色D可以看整个部门的 ...
- 可能是史上最强大的js图表库——ECharts带你入门
PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?&g ...
- 6款程序员不得不爱的bootstrap模板
Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大 部分jQuery插件.Bootstrap中包含了丰富的 ...
- 反序列化问题的研究之java篇
博客园很早就开通了,当时下决心要把自己的经验心得记录上去,但是却没有做到,因为一直觉得自己搞得东西可能还是比较的初级,感觉拿不出手,所以也就是只是把它记录在在印象笔记上面(三年下来,还是整理和收藏了一 ...
- 发布ASP.NET Core网站到IIS
打开VS2015,新建项目: 选择模板,取消身份验证: 项目加载完成后就可以运行了: 下面要发布到IIS: 需要安装从IIS到Kestrel server的反向代理,下载地址:.NET Core Wi ...
- sokect编程进阶
IO模型 什么是IO? IO:input和output的缩写,即输入/输出端口.每个设备都会有一个专用的I/O地址,用来处理自己的输入输出信息 同步.异步.阻塞.非阻塞 同步和异步的概念描述的是用户线 ...
- C#安全性记录
安全性一直是开发中,重中之重的问题.不过平时用的不算特别多,基本上用个MD5,SSL也就到这了.再次记录一下,以免忘记. MD5多次加密 MD5算法是不可逆算法.应用于密码验证,完整性验证这种特征.这 ...
- Day3-python基础3
本次学习内容 元组 字典 集合 字符编码 文件处理 一.元组 定义:与列表类似,定义是使用() 特性: 1.可存放多个值 2.元组里的元素是不可变的 3.有序,下标从0开始从左往右的顺序访问 元组常用 ...
- 转-ArcGIS Engine中的License设置
AE开发中的License有两种方法进行设置,一种是通过LicenseControl控件,另一种是通过IAoInitialize接口设置.整个应用程序中只能有一种方式存在,如果进行了两种License ...
- Ｃ＃+ AE 注意问题汇总（不断更新）
1.AE的COM对象释放问题尤其是IFeatureCursor 建议用 ESRI.ArcGIS.ADF.ComReleaser.ReleaseCOMObject(pObj); 或者 int iRefs ...