- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章js代码编写无缝轮播图由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
本文实例为大家分享了js编写无缝轮播图的具体代码,供大家参考,具体内容如下 。
前言 。
这个是一个轮播图 。
提示:
请让最后一个img和第一个img是一张图片相同 且 li数目为img数目-1; 。
1、无缝轮播图 。
让第一张和最后一张相同 type:第一张和最后一张相同; 在最后一张向下一张切换时,立刻跳到第一张 然后向第二张正常切换 。
2、使用步骤 。
1.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
34
35
36
37
38
39
|
<
div
class
=
"banner"
>
<
div
class
=
"qh"
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
</
div
>
<
div
class
=
"left"
></
div
>
<
div
class
=
"right"
></
div
>
<
ul
class
=
"banner_img clear"
>
<
li
>
<
img
src
=
"img/1.png"
alt
=
""
>
</
li
>
<
li
>
<
img
src
=
"img/2.png"
alt
=
""
>
</
li
>
<
li
>
<
img
src
=
"img/3.png"
alt
=
""
>
</
li
>
<
li
>
<
img
src
=
"img/4.png"
alt
=
""
>
</
li
>
<
li
>
<
img
src
=
"img/5.png"
alt
=
""
>
</
li
>
<
li
>
<
img
src
=
"img/6.png"
alt
=
""
>
</
li
>
<
li
>
<
img
src
=
"img/7.png"
alt
=
""
>
</
li
>
<
li
>
<
img
src
=
"img/1.png"
alt
=
""
>
</
li
>
</
ul
>
</
div
>
|
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
73
|
*{
margin
:
0
;
padding
:
0
;
}
.banner {
position
:
relative
;
margin
:
auto
;
margin-top
:
20px
;
width
:
1140px
;
height
:
600px
;
border
:
1px
solid
#000
;
overflow
:
hidden
;
}
.banner ul {
position
:
relative
;
width
:
10000px
;
}
.banner ul li {
width
:
1140px
;
height
:
100%
;
float
:
left
;
}
.banner ul img {
width
:
1140px
;
height
:
100%
;
object-fit: cover;
}
.banner>div {
position
:
absolute
;
}
.banner .qh {
position
:
absolute
;
bottom
:
0
;
right
:
0
;
height
:
20px
;
z-index
:
1
;
}
.banner .qh div {
margin-right
:
10px
;
width
:
10px
;
height
:
10px
;
background
:
transparent
;
border
:
1px
solid
#f0f
;
border-radius:
5px
;
float
:
left
;
z-index
:
1
;
}
.
left
{
top
:
0
;
bottom
:
0
;
margin
:
auto
;
height
:
40px
;
width
:
20px
;
background
:
#f0f
;
left
:
0
;
z-index
:
1
;
}
.
right
{
top
:
0
;
bottom
:
0
;
margin
:
auto
;
height
:
40px
;
background
:
#f0f
;
width
:
20px
;
right
:
0
;
z-index
:
1
;
}
|
2.js代码 。
代码如下:
startMove是一个运动框架 缓冲运动;当然你也可以用其他的 。
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
var
odiv = document.querySelector(
".banner"
);
var
oul = document.querySelector(
".banner_img"
);
var
aimg = oul.querySelectorAll(
"img"
);
var
oqh = document.querySelector(
".qh"
)
var
aqh_div = oqh.querySelectorAll(
"div"
);
var
alist = aimg[0].offsetWidth;
var
i=0;
init();
function
init(){
for
(
var
j=0; j<aimg.length-1;j++) {
aqh_div[j].style.background=
"transparent"
;
}
if
(i<aimg.length-1) {
aqh_div[i].style.background=
"#f0f"
;
}
else
{
aqh_div[0].style.background=
"#f0f"
;
}
}
function
next() {
//下一张
i++;
let left =i*(-alist);
if
(left <= -alist * (aimg.length)) {
oul.style.left =
"0px"
;
i=1;
left =-alist*i;
}
startMove(oul, { left: left });
init();
}
function
back() {
//上一张
i--;
let left = i*(-alist);
if
(i<0) {
oul.style.left = (aimg.length-1)* (-alist)+
"px"
;
i=aimg.length-2;
left= i*(-alist);
}
startMove(oul, { left: left });
init();
}
function
move(i) {
//跳到第i张 i从0开始
window.i=i;
left = i* (-alist);
startMove(oul, { left: left });
init();
}
for
(let i
in
aqh_div) {
aqh_div[i].onclick =
function
() {
move(i);
console.log(i);
}
}
//下面是一个移入div暂停计时器 移出打开计时器
odiv.Interval = setInterval(next, 2000);
odiv.onmouseenter =
function
() {
clearInterval(odiv.Interval);
};
odiv.onmouseleave =
function
() {
clearInterval(odiv.Interval);
odiv.Interval = setInterval(next, 2000);
};
//下面是两个左右切换的按钮
var
left_btn=document.querySelector(
".left"
);
var
right_btn=document.querySelector(
".right"
);
left_btn.onclick=
function
(){
back();
}
right_btn.onclick=
function
(){
next();
}
//下面是一个运动框架 第一个参数是运动的对象 第二个为json对象{要改变的属性:值}
// 第三个为运动结束后要做到事情 参数是一个函数
/**
*
* @param obj 运动的对象
* @param json {width:400, height:400}
* @param fnEnd回调
*/
function
startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(
function
() {
var
bStop =
true
;
for
(attr
in
json) {
// 1. 取得当前的值(可以是widht,height,opacity等的值)
var
objAttr = 0;
if
(attr ==
"opacity"
) {
objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
}
else
{
objAttr = parseInt(getStyle(obj, attr));
}
// 2.计算运动速度
var
iSpeed = (json[attr] - objAttr) / 50;
//缓冲运动
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 3. 检测所有运动是否到达目标
if
(objAttr != json[attr]) {
bStop =
false
;
}
if
(attr ==
"opacity"
) {
obj.style.filter =
'alpha(opacity='
+ (objAttr + iSpeed) +
')'
;
obj.style.opacity = (objAttr + iSpeed) / 100;
}
else
{
obj.style[attr] = objAttr + iSpeed +
'px'
;
// 需要又.属性名的形式改成[]
}
}
if
(bStop) {
// 表示所有运动都到达目标值
clearInterval(obj.timer);
if
(fn) {
fn();
}
}
}, 10);
}
/**
* 获取行间/内联/外部样式,无法设置
* @param obj
* @param attr
*/
function
getStyle(obj, attr) {
if
(obj.currentStyle) {
return
obj.currentStyle[attr];
}
else
{
return
getComputedStyle(obj,
false
)[attr];
}
}
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.
原文链接:https://blog.csdn.net/qq_34996079/article/details/108520984 。
最后此篇关于js代码编写无缝轮播图的文章就讲到这里了,如果你想了解更多关于js代码编写无缝轮播图的内容请搜索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
我是一名优秀的程序员,十分优秀!