- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章JavaScript实现循环轮播图由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
本文实例为大家分享了JavaScript实现循环轮播图的具体代码,供大家参考,具体内容如下 。
1.点击下面图标,图片进行轮播 2.图片轮播完,接着轮播到第一张 (代码内部具有详细解释) 。
HTML代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>图片轮播示例</
title
>
<
link
rel
=
"stylesheet"
href
=
"css/lunbo.css"
/>
<
script
src
=
"js/tools.js"
></
script
>
<
script
src
=
"js/lunbo.js"
></
script
>
</
head
>
<
body
>
<!-- 外部容器 -->
<
div
id
=
"outer"
>
<!-- 图片列表 -->
<
ul
id
=
"img-list"
>
<
li
><
img
src
=
"img/1.jpg"
/></
li
>
<
li
><
img
src
=
"img/2.jpg"
/></
li
>
<
li
><
img
src
=
"img/3.jpg"
/></
li
>
<
li
><
img
src
=
"img/4.jpg"
/></
li
>
<
li
><
img
src
=
"img/5.jpg"
/></
li
>
<!-- 重复显示第一张图片,便于切入下一轮循环。 -->
<
li
><
img
src
=
"img/1.jpg"
/></
li
>
</
ul
>
<!-- 导航按钮 -->
<
div
id
=
"nav-btns"
>
<
a
href
=
"javascript:;"
></
a
>
<
a
href
=
"javascript:;"
></
a
>
<
a
href
=
"javascript:;"
></
a
>
<
a
href
=
"javascript:;"
></
a
>
<
a
href
=
"javascript:;"
></
a
>
</
div
>
</
div
>
</
body
>
</
html
>
|
css代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
* {
margin
:
0
;
padding
:
0
;
}
/*
* 设置outer的样式
*/
#outer {
/*设置宽和高*/
width
:
520px
;
height
:
333px
;
/*居中*/
margin
:
50px
auto
;
/*设置背景颜色*/
background-color
: orange;
/*设置padding*/
padding
:
10px
0
;
/*开启相对定位*/
position
:
relative
;
/*裁剪溢出的内容*/
overflow
:
hidden
;
}
/*设置图片列表*/
#img-list {
/*去除项目符号*/
list-style
:
none
;
/*设置ul的宽度*/
/*width: 2600px;*/
/*开启绝对定位*/
position
:
absolute
;
/*设置偏移量(每向左移动520px,就会显示到下一张图片)*/
left
:
0px
;
}
/*设置图片中的li*/
#img-list li {
/*设置浮动*/
float
:
left
;
/*设置左右外边距*/
margin
:
0
10px
;
}
/*设置导航按钮*/
#nav-btns {
/*开启绝对定位*/
position
:
absolute
;
/*设置位置*/
bottom
:
15px
;
}
#nav-btns a {
/*设置超链接浮动*/
float
:
left
;
/*设置超链接的宽和高*/
width
:
15px
;
height
:
15px
;
/*设置背景颜色*/
background-color
:
red
;
/*设置左右外边距*/
margin
:
0
5px
;
/*设置透明*/
opacity:
0.5
;
/*兼容IE8透明*/
filter: alpha(opacity=
50
);
}
/*设置鼠标移入的效果*/
#nav-btns a:hover {
background-color
:
black
;
}
|
lunbo.js代码 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
window.onload =
function
() {
// 获取图片列表
var
imgList = document.getElementById(
"img-list"
);
// 获取页面中所有的img标签
var
imgArr = document.getElementsByTagName(
"img"
);
// 设置imgList的宽度
imgList.style.width = 520 * imgArr.length +
"px"
;
// 设置导航按钮居中
// 获取导航按钮
var
navBtns = document.getElementById(
"nav-btns"
);
// 获取outer
var
outer = document.getElementById(
"outer"
);
// 设置navBtns的left值
navBtns.style.left = (outer.offsetWidth - navBtns.offsetWidth) / 2 +
"px"
;
// 默认显示图片的索引
var
index = 0;
// 获取所有的a
var
allA = document.getElementsByTagName(
"a"
);
// 设置默认选中的效果
allA[index].style.backgroundColor =
"black"
;
/*
* 点击超链接切换到指定的图片
* 点击第一个超链接,显示第一个图片
* 点击第二个超链接,显示第二个图片
* */
// 为所有的超链接都绑定单击响应函数
for
(
var
i = 0; i < allA.length; i++) {
// 为每一个超链接都添加一个num属性
allA[i].num = i;
// 为超链接绑定单击响应函数
allA[i].onclick =
function
() {
// 关闭自动切换的定时器
clearInterval(timer);
// 获取点击超链接的索引,并将其设置为index
index =
this
.num;
// 设置选中的a
setA();
// 使用move函数来切换图片
move(imgList,
"left"
, -520 * index, 20,
function
() {
// 动画执行完毕,开启自动切换
autoChange();
});
};
}
// 开启自动切换图片
autoChange();
// 设置选中的a
function
setA() {
// 判断当前索引是否是最后一张图片
if
(index >= imgArr.length - 1) {
// 则将index设置为0
index = 0;
// 此时显示的最后一张图片,而最后一张图片和第一张是一摸一样
// 通过CSS将最后一张切换成第一张
imgList.style.left = 0;
}
// 遍历所有a,并将它们的背景颜色设置为红色
for
(
var
i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor =
""
;
}
// 将选中的a设置为黑色
allA[index].style.backgroundColor =
"black"
;
};
// 定义一个自动切换的定时器的标识
var
timer;
// 创建一个函数,用来开启自动切换图片
function
autoChange() {
// 开启一个定时器,用来定时去切换图片
timer = setInterval(
function
() {
// 使索引自增
index++;
// 判断index的值
index %= imgArr.length;
// 执行动画,切换图片
move(imgList,
"left"
, -520 * index, 20,
function
() {
// 修改导航按钮
setA();
});
}, 3000);
}
};
|
tool.js代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
/*
* 创建一个可以执行简单动画的函数
* 参数:
* obj:要执行动画的对象
* attr:要执行动画的样式,比如:left top width height
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动,负数向左移动)
* callback:回调函数,这个函数将会在动画执行完毕以后执行
*/
function
move(obj, attr, target, speed, callback) {
// 关闭上一个定时器
clearInterval(obj.timer);
// 获取元素目前的位置
var
current = parseInt(getStyle(obj, attr));
// 判断速度的正负值
// 如果从0 向 800移动,则speed为正
// 如果从800向0移动,则speed为负
if
(current > target) {
//此时速度应为负值
speed = -speed;
}
// 开启一个定时器,用来执行动画效果
// 向执行动画的对象中添加一个timer属性,用来保存它自己的定时器的标识
obj.timer = setInterval(
function
() {
// 获取box1的原来的left值
var
oldValue = parseInt(getStyle(obj, attr));
// 在旧值的基础上增加
var
newValue = oldValue + speed;
// 判断newValue是否大于800
// 从800 向 0移动
// 向左移动时,需要判断newValue是否小于target
// 向右移动时,需要判断newValue是否大于target
if
((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值设置给box1
obj.style[attr] = newValue +
"px"
;
// 当元素移动到0px时,使其停止执行动画
if
(newValue == target) {
// 达到目标,关闭定时器
clearInterval(obj.timer);
// 动画执行完毕,调用回调函数
callback && callback();
}
}, 30);
}
/*
* 定义一个函数,用来获取指定元素的当前的样式
* 参数:
* obj 要获取样式的元素
* name 要获取的样式名
*/
function
getStyle(obj, name) {
if
(window.getComputedStyle) {
// 正常浏览器的方式,具有getComputedStyle()方法
return
getComputedStyle(obj,
null
)[name];
}
else
{
// IE8的方式,没有getComputedStyle()方法
return
obj.currentStyle[name];
}
}
/*
* 定义一个函数,用来向一个元素中添加指定的class属性值
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
*/
function
addClass(obj, cn) {
// 检查obj中是否含有cn
if
(!hasClass(obj, cn)) {
obj.className +=
" "
+ cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值,
* 如果有该class,则返回true,没有则返回false。
*/
function
hasClass(obj, cn) {
// 判断obj中有没有cn class
// 创建一个正则表达式
var
reg =
new
RegExp(
"\\b"
+ cn +
"\\b"
);
return
reg.test(obj.className);
}
/*
* 删除一个元素中的指定的class属性
*/
function
removeClass(obj, cn) {
// 创建一个正则表达式
var
reg =
new
RegExp(
"\\b"
+ cn +
"\\b"
);
// 删除class
obj.className = obj.className.replace(reg,
""
);
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类,则删除
* 如果元素中没有该类,则添加
*/
function
toggleClass(obj, cn) {
//判断obj中是否含有cn
if
(hasClass(obj, cn)) {
//有,则删除
removeClass(obj, cn);
}
else
{
//没有,则添加
addClass(obj, cn);
}
}
|
图片资源下面:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.
原文链接:https://blog.csdn.net/qq_42881159/article/details/115549528 。
最后此篇关于JavaScript实现循环轮播图的文章就讲到这里了,如果你想了解更多关于JavaScript实现循环轮播图的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我想填充 3D 等高线图 (contour3(X,Y,Z)),就像 2D 等高线填充图 (contourf(X,Y,Z))。但我无法弄清楚如何实现这一目标。 contour3 和 surf 的组合不是
我有一个 c3.js 折线图,表示 2 个值的演变。我需要折线图的工具提示是饼图(工具提示 = 另一个 c3.js 图形)。 这是我成功的: http://jsfiddle.net/owhxgaqm/
我有具有结构的 Pandas 数据框: A B 0 1 1 1 2 1 2 3 4 3 3 7 4 6 8 如何生成 Seaborn Violin 图,每列作为其自己的单独
我正在使用 D3DXSPRITE 方法将我的 map 图 block 绘制到屏幕上,我刚刚添加了一个缩放功能,当您按住向上箭头时会放大,但注意到您现在可以看到图 block 之间的间隙,这是一些屏幕截
1、系统环境如下图: 2、为该系统添加一块新的虚拟硬盘,添加后需重启虚拟机,否则系统不识别;如下图,/dev/sdc 是新添加的硬盘; 3、fdisk /dev/sdc为新硬盘创建分区:
1、nagios简介 nagios是一款开源的电脑系统和网络监视工具,能有效监控windows、linux和unix的主机状态,交换机路由器等网络设置,打印机等。在系统或服务状态异常时发
越来越多人开始习惯用手机上网,浏览网页、查看邮件···移动化已经成为互联网发展必然趋势,包括facebook在内的很多互联网公司都将移动广告作为下一个淘金地
1.图片处理 1.圆角图片 复制代码 代码如下: /** * 转换成圆角 * &n
Microsoft SQL Server Management Studio是SQL SERVER的客户端工具,相信大家都知道。我不知道大伙使用导入数据的情况怎么样,反正我最近是遇到过。主要是因为没
debian6系统: 首先先安装mysql吧: 打开终端(root)用户登入 apt-get purge mysql-server-5.5 安装完成后: 默认情况下Mysql只允许本地登录
fedora16英文环境下支持中文输入法的方法 fedora16英文环境下支持FCITX的中文输入法: $ im-chooser 就会出现选择界面,选择第二个就行了。
Net预编译命令 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_compiler.exe -? 显示说明 我们需要选择的命令为&n
有的时候电脑出现一些故障有的时候通过将其修改bios设置的方法来解决故障,那么在bios上设置能不能将电脑恢复出厂设置呢?其实也是可以的。方法也很简单的,只要会进入电脑的bios懂的上面英文的意思就
笔者曾介绍过Deepin 将对龙芯进行全面支持,打造最优美龙芯电脑桌面。现在Deepin团队移植工作取得了突破性的成果,Deepin桌面已经在龙芯3A和龙芯3B电脑上成功运行起来了。 以下为龙芯3
在安装一些软件之后,我们的电脑总是会发生一点小变化,不是桌面上多了几个网址图标,就是IE浏览器的默认主页被篡改成乱七八糟的网址。最可气的是,在IE设置中将默认主页改回来后,下次启动Win7后又变了回
“注册表编辑器怎么打开”虽说不是很难的问题,但是对于对电脑常识不是很擅长的网民来说,当电脑出现问题或需要更改设置时,着实还是件头疼的问题。因为需要打开注册表进行操作解决。那么如何打开注册表编辑器呢?
这篇文章重点介绍10个重要的WordPress安全插件和技巧,用来保护WordPress网站或者博客。 1. WP Security 人工帮助你修复被黑客入侵的网站,只要按照他们网站上的联系电话
其实运用object和javascript调用外部文件,也能实现不同栏目调用不同友情链接,即相当于调用不同栏目友情链接文件, {dede:field.typeid/}来获取当前栏目的ID。
我有一个复值矩阵。 如果我发出命令: plot(myMatrix) 然后它在图形设备上显示一种散点图,X 轴标记为 Re(myMatrix),Y 轴标记为 Im(myMatrix)。这显示了我正在寻找
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
我是一名优秀的程序员,十分优秀!