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

随机推荐

Tech Websites
1,3D Game Engine Programming 2, 3, 4, 5,
基于Xenomai的实时Linux分析与研究
转自:http://blog.csdn.net/cyberlabs/article/details/6967192 引言随着嵌入式设备的快速发展,嵌入式设备的功能和灵活性要求越来越高,很多嵌入式设 ...
linux源代码安装程序
下载源代码之后 tar zxvf file.tar.gz 解压源代码压缩包 ./configure --prefix=/opt/haha/ 安装到这个路径 make 编译 sudo ma ...
处理 pcap 中的 mac 二进制字节流为可读格式
import struct # 利用 struct 处理字节流中的mac地址适用于小端地址操作系统 def mac2str(bi_mac): mac = "" for i in ...
python基础-牛逼的三层循环，实现想在那里退出，就在那里退出。
#!/usr/bin/env python # -*- coding:utf-8 -*- #Author: nulige tag=True #设置tag控制他,只要一输入Flash就退出整个循环 wh ...
Uninstall from GAC In C# code
How do I uninstall the GAC from my C# application. I am not able to uninstall, the particular exe an ...
【USACO 2.3】Zero Sum（dfs）
按字典序输出所有在123..n之间插入'+','-',' '结果为0的表达式.. http://train.usaco.org/usacoprob2?a=jUh88pMwCSQ&S=zeros ...
Java多线程卖票例子
package com.test; public class SaleTickets implements Runnable { private int ticketCount = 10;// 总的票 ...
windows2003安装证书服务:csp配置不正确、您没有此密钥容器的写访问权限
1.填写CA名称后在生成密钥时提示:csp配置不正确或安装不完整. 原因:可能的原因为CS服务(Crysptographic Service)没有启动 . ps:该服务依赖RPC服务,但RP ...
洛谷P2434 [SDOI2005]区间
题目描述现给定n个闭区间[ai, bi],1<=i<=n.这些区间的并可以表示为一些不相交的闭区间的并.你的任务就是在这些表示方式中找出包含最少区间的方案.你的输出应该按照区间的升序排列 ...

JQ图片轮播

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

随机推荐

热门专题