JQ图片轮播

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>

完整代码：

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

随机推荐

[译]React Context
欢迎各位指导与讨论 : ) 前言由于笔者英语和技术水平有限,有不足的地方恳请各位指出.我会及时修正的 O(∩_∩)O 当前React版本 15.0.1 时间 2016/4/25 正文 React一个 ...
Convertion of grey code and binary 格雷码和二进制数之间的转换
以下转换代码摘自维基百科 Wikipedia: /* The purpose of this function is to convert an unsigned binary number to r ...
CSS3-3D制作案例分析实战
一.前言上一节,介绍了基础的CSS3 3D动画原理实现,也举了一个小小的例子来演示,但是有朋友跟我私信说想看看一些关于CSS3 3D的实例,所以在这里为了满足一下大家的需求,同时也为了以后能够更好的 ...
在VS中用正则表达式查找或替换
2005VS和2008VS正则替换规则如下(2013VS不适合,不需要的同学可以直接跳到2013VS的操作办法): Example: 查找#incldue中带有gl开头的头文件的,用include.+ ...
Learning to rank 特征抽取
http://blog.csdn.net/puqutogether/article/details/42124491 http://www.microsoft.com/en-us/research/p ...
Internet网
Internet网是世界上最大的基于IP的网络.它是世界上所有计算机使用IP相互对话的一个无组织的集合.Internet上每台计算机都至少有一个IP地址来标识该计算机. 节点与主机连接到Intern ...
Matlab2015基本语句语法04
1. 输入.输出.格式化输出 1) 读入数据:input >>number: num=input('Give me your number: '); >>string: str ...
Matlab2015入门学习01
1. 两个命令: clear: 清除内存中变量的值(在workspace中可以看到) clc: 清除Command Window中的输出 2. 脚本编辑器: matlab脚本扩展名为*.m 在Comm ...
教你一招：在PowerPoint中自定义可输入文本的占位符
日常生活中,当我们设计多媒体课件时,默认的版式其实已经够用了.但是,很多时候,我们需要更加个性一点,所以,我们需要自定义很多东西.本文介绍在PowerPoint中自定义可输入文本的占位符. 一.占位符 ...
Python学习笔记之函数
函数函数式编程最重要的是增强代码的重用性和可读性定义和使用 def 函数名(参数): ... 函数体 ... 返回值函数的定义主要有如下要点: def:表示函数的关键字函数名:函数的名称,日 ...

JQ图片轮播

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

随机推荐

热门专题