<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>

完整代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>图片轮播演示</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  7. <style type="text/css">
  8. * {
  9. margin: 0px;
  10. padding: 0px;
  11. font-size: 14px;
  12. }
  13. div.LunBo {
  14. position: relative;
  15. list-style-type: none;
  16. height: 170px;
  17. width: 490px;
  18. }
  19. div.LunBo ul li {
  20. position: absolute;
  21. height: 170px;
  22. width: 490px;
  23. left: 0px;
  24. top: 0px;
  25. display: none;
  26. }
  27. div.LunBo ul li.CurrentPic {
  28. display: block;
  29. }
  30. div.LunBo div.LunBoNum {
  31. position: absolute;
  32. left: 374px;
  33. bottom: 11px;
  34. width: 83px;
  35. text-align: right;
  36. background-color: #;
  37. padding-left: 10px;
  38. }
  39. div.LunBo div.LunBoNum span {
  40. height: 20px;
  41. width: 15px;
  42. display: block;
  43. line-height: 20px;
  44. text-align: center;
  45. margin-top: 5px;
  46. margin-bottom: 5px;
  47. float: left;
  48. cursor: pointer;
  49. }
  50. div.LunBo div.LunBoNum span.CurrentNum {
  51. background-color: #3F6;
  52. }
  53. </style>
  54. </head>
  55.  
  56. <body>
  57. <div class="LunBo">
  58. <ul>
  59. <li class="CurrentPic"><img src="data:images/1.png" width="" height=""></li>
  60. <li><img src="data:images/2.jpg" width="" height=""></li>
  61. <li><img src="data:images/3.jpg" width="" height=""></li>
  62. <li><img src="data:images/4.jpg" width="" height=""></li>
  63. <li><img src="data:images/5.png" width="" height=""></li>
  64. </ul>
  65. <div class="LunBoNum">
  66. <span class="CurrentNum"></span>
  67. <span></span>
  68. <span></span>
  69. <span></span>
  70. <span></span>
  71. </div>
  72. </div>
  73. <script type="text/javascript" language="javascript">
  74. var PicTotal = ;
  75. var CurrentIndex;
  76. var ToDisplayPicNumber = ;
  77. $("div.LunBo div.LunBoNum span").click(DisplayPic);
  78. function DisplayPic() {
  79. // 测试是父亲的第几个儿子
  80. CurrentIndex = $(this).index();
  81. // 删除所有同级兄弟的类属性
  82. $(this).parent().children().removeClass("CurrentNum")
  83. // 为当前元素添加类
  84. $(this).addClass("CurrentNum");
  85. // 隐藏全部图片
  86. var Pic = $(this).parent().parent().children("ul");
  87. $(Pic).children().hide();
  88. // 显示指定图片
  89. $(Pic).children("li").eq(CurrentIndex).show();
  90. }
  91. function PicNumClick() {
  92. $("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
  93. ToDisplayPicNumber = (ToDisplayPicNumber + ) % PicTotal;
  94. setTimeout("PicNumClick()",);
  95. }
  96. setTimeout("PicNumClick()",);
  97. </script>
  98. </body>
  99. </html>

简单代码：

  1. <script src="{staticurl action="jquery.js" type="js"}"></script>
  2. <style type="text/css">
  3.  
  4. .LunBo ul li {
  5.  list-style-type :none;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10.  
  11.  <div class="LunBo">
  12. <ul>
  13. <li class="CurrentPic" >图片0</li>
  14. <li>图片1</li>
  15. <li>图片2</li>
  16. <li>图片3</li>
  17. <li>图片4</li>
  18. </ul>
  19.  
  20. <div class="LunBoNum">
  21. <span class="CurrentNum"></span>
  22. <span></span>
  23. <span></span>
  24. <span></span>
  25. <span></span>
  26. </div>
  27. </div>
  28. </body>
  29.  
  30. <script type="text/javascript" language="javascript">
  31. var PicTotal = ;// 控制显示当前图片总数
  32. var CurrentIndex;// 当前鼠标点击图片索引s
  33. var ToDisplayPicNumber = ;// 自动播放时的图片索引
  34. $("div.LunBo div.LunBoNum span").click(DisplayPic);
  35. function DisplayPic() {
  36. // 测试是父亲的第几个儿子
  37. CurrentIndex = $(this).index();
  38. // 删除所有同级兄弟的类属性
  39. $(this).parent().children().removeClass("CurrentNum")
  40. // 为当前元素添加类
  41. $(this).addClass("CurrentNum");
  42. // 隐藏全部图片
  43. var Pic = $(this).parent().parent().children("ul");
  44. $(Pic).children().hide();
  45. // 显示指定图片
  46. $(Pic).children("li").eq(CurrentIndex).show();
  47. }
  48. function PicNumClick() {
  49. $("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
  50. ToDisplayPicNumber = (ToDisplayPicNumber + ) % PicTotal;
  51. setTimeout("PicNumClick()",);
  52. }
  53. setTimeout("PicNumClick()",);
  54. </script>

JQ图片轮播的更多相关文章

  1. 2019.11.15 JQ图片轮播

    <div class="three"> <div class="bjtp"> <img class="bjpic b1& ...

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

    来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  3. html+jq实现简单的图片轮播

    今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...

  4. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  5. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  6. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  7. jQuery编写的一款兼容IE6的图片轮播幻灯片

    jQuery编写的一款兼容IE6的图片轮播幻灯片,很不错的一款jquery特效.大家可以下载下来研究研究. 每隔几秒就自动切换一波图片,此效果兼容性还做的不错,适合居多的浏览器. 适用浏览器:IE6. ...

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

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. js/jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

随机推荐

  1. c# 调用c++DLL方法及注意事项

    引用命名空间 using System.Runtime.InteropServices 调用方法: 一.静态加载 用DllImprot方式来加载c++DLL.如下格式: //对应c++方法 //voi ...

  2. PyCharm3.0默认快捷键(翻译的)

    PyCharm3.0默认快捷键(翻译的) PyCharm Default Keymap 1.编辑(Editing) Ctrl + Space    基本的代码完成(类.方法.属性)Ctrl + Alt ...

  3. CRC32算法

    unsigned ] = { 0x00000000, 0x77073096, 0xEE0E612C, 0x990951BA, 0x076DC419, 0x706AF48F, 0xE963A535, 0 ...

  4. 20145208《信息安全系统设计基础》实验五 简单嵌入式WEB 服务器实验

    20145208<信息安全系统设计基础>实验五 简单嵌入式WEB 服务器实验 20145208<信息安全系统设计基础>实验五 简单嵌入式WEB 服务器实验

  5. Ceph RGW 和 niginx 配置要点

    cat /etc/nginx/sites-enabled/rgw.conf server { listen 80 default; #server_name .com .com.cn .net .cn ...

  6. 微信跳转浏览器来下载不同系统的app

    在微信里面,是不能通过应用宝以外的方式去直接下载app的,但是却可以通过跳转到浏览器去下载app,因此如果刚好各位公司有刚刚上线的app,来不及放到微信应用宝那里,可以试试这种办法. 实现思路: 1. ...

  7. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

  8. 使用matlab进行空间拟合

    假设有这么一组数据, x=[4 5 6 7 8 4 8 10]'; y=[56 56 56 56 56 60 60 60]';z=[6 6 6 9 6 19 6 6]'; 要求出其平面方程z=C+Ax ...

  9. Ubuntu 14.10安装手记

    1. Ubuntu系统安装 按照 www.linuxidc.com/Linux/2014-04/100369.htm 的安装方法即可. 配置文件有两个需要注意的地方.一.搞清楚电脑的分区表,c盘是hd ...

  10. inference和learning

    一开始对于机器学习,主要是有监督学习,我的看法是: 假定一个算法模型,然后它有一些超参数,通过喂多组数据,每次喂数据后计算一下这些超参数.最后,数据喂完了,参数取值也就得到了.这组参数取值+这个算法, ...