正文
java轮播图效果代码 js实现最简单轮播图效果代码
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
图片轮播的代码
titlejavascript图片轮换/title
style type="text/css"
#album{
position:relative;
width:400px;
height:300px;
border:10px solid #EFEFDA;
overflow:hidden;
}
#album dt {
margin:0;
padding:0;
width:400px;
height:300px;
overflow:hidden;
}
#album img {
border:2px solid #000;
}
#album dd {
position:absolute;
right:0px;
bottom:10px;
}
#album a {
display:block;
float:left;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:#808080;
background:transparent url(/jscss/demoimg/200910/o_button.gif) no-repeat -15px 0;
}
#album a:hover ,#album a.hover{
color:#F8F8F8;
background-position:0 0;
}
/styledl id="album"
dt
img id="index1" alt=余秋java轮播图效果代码的黄昏" src="/jscss/demoimg/wall3.jpg" /
img id="index2" alt="美丽欧洲" src="/jscss/demoimg/wall4.jpg" /
img id="index3" alt="巨石阵java轮播图效果代码的神秘" src="/jscss/demoimg/wall5.jpg" /
/dt
dd
a href="#index1"1/aa href="#index2"2/aa href="#index3"3/a
/dd
/dl
script type="text/javascript"
function imageRotater(id){
var cases = "",
album = document.getElementById(id),
images = album.getElementsByTagName("img"),
links = album.getElementsByTagName("a"),
dt = album.getElementsByTagName("dt")[0],
length = images.length,
aIndex = 1,
aBefore = length;
for(var i=0;i length;i++){
cases += images[i].id + ':"'+images[i].getAttribute("src")+'",'
}
images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片位置错误
var tip = document.createElement("dd");
tip.style.cssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
album.insertBefore(tip,dt.nextSibling);
if(!+"\v1"){
tip.style.color = "#369";
tip.style.filter = "alpha(opacity=67)"
}else{
tip.style.cssText += "background: rgba(164, 173, 183, .65);"
}
cases = eval("({"+cases.replace(/,$/,"")+"})");
for(var i=0;ilength;i++){
links[i].onclick = function(e){
e =e || window.event;
var index = this.toString().split("#")[1];
aIndex = index.charAt(index.length-1);//☆☆☆☆
images[0].src = cases[index];
tip.innerHTML = images[aIndex -1].getAttribute("alt");
!+"\v1" ?(e.returnValue = false) :(e.preventDefault());
}
}
var prefix = images[0].id.substr(0,images[0].id.length -1);
(function(){
setTimeout(function(){
if(aIndex length){
aIndex = 1;
}
images[0].src = cases[prefix+aIndex];
tip.innerHTML = images[aIndex -1].getAttribute("alt");
tip.style.bottom = "-40px";
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
aIndex++;
move(tip);
setTimeout(arguments.callee,1500)
},1500)
})()
var move = function(el){
var begin = parseFloat(el.style.bottom),
speed = 1;
el.bottom = begin;
(function(){
setTimeout(function(){
el.style.bottom = el.bottom + speed + "px";
el.bottom += speed;
speed *= 1.5;//下一次移动java轮播图效果代码的距离
if(el.bottom = 0){
el.style.bottom = "0px";
}else{
setTimeout(arguments.callee,23);
}
},25)
})()
}
}
window.onload = function(){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
imageRotater("album");
}
/script
vs2012中怎么制作轮播图
一.轮播图制作思路：
就是通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为1，显示出来；而其它的设为0，不显示。从而实现一种图片轮流播放的效果。
思路比较简单：
1.首先让一组图片绝对定位，让其重叠在一起，
2.通过js获取相应的标签,为后面的步骤做铺垫
3、然后制作手动轮播：点击小方块按钮，显示相应图片。
（1）通过设置图片的透明度变化来控制图片的显示效果。（更简单的效果是直接修改display属性，用display:block让该图片显示出来,而设置display:none就可以把其他的图片隐藏起来，这两种方法原理相同。）
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
4、点击左右箭头，实现向前向后轮播图片。
二.具体代码实现
首先来看Html结构代码：
div class="box"
ul id="boxul"
liimg src="images/f1.jpg" alt=""/li
liimg src="images/f2.jpg" alt=""/li
liimg src="images/f3.jpg" alt=""/li
liimg src="images/f4.jpg" alt=""/li
liimg src="images/f5.jpg" alt=""/li
/ul
ol id="boxol"
li class="current"1/li
li2/li
li3/li
li4/li
li5/li
/ol
div class="prev" id="prev"prev/div
div class="next" id="next"next/div
/div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
对其进行样式调整之后，图片都在同一个位置，可以先给第一图片设置为显示，其它的图片设为不显示。
下面来看js的代码：
*{
padding: 0;
margin: 0;
}
/* 长按标签会有蓝色背景 */
*::selection {
background: none;
}
li{
list-style: none;
}
/* 子绝父相 */
.box{
width: 800px;
height: 500px;
margin: 50px auto;
position: relative;
}
/* 设置所有的图片不显示 */
.box ul li {
width: 800px;
height: 500px;
position: absolute;
opacity: 0;
/* 过度显示图片 */
transition: all .8s;
}
/* 设置第一张图片可见 */
.box ul li:first-child {
opacity: 1;
}
/*左右箭头*/
.prev,
.next {
width: 80px;
height: 40px;
position: absolute;
/* 背景色 */
background-color: rgba(0, 0, 0, .7);
/* 文字设置 */
color: white;
text-align: center;
line-height: 40px;
/* 位置 */
top: 50%;
margin-top: -20px;
/* 鼠标移上去的效果 */
cursor: pointer;
}
.next{
right: 0;
}
.prev:active,
.next:active {
background-color: rgba(0, 0, 0, .5);
}
.prev:hover,
.next:hover{
background-color: rgba(0, 0, 0, .6);
}
/* 小方块的位置 */
.box ol{
position: absolute;
right: 50px;
bottom: 20px;
}
.box ol li {
width: 20px;
height: 20px;
border: 1px solid #ccc;
float: left;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.current{
background-color: yellow;
}
img{
width: 800px;
height: 500px;
}
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
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
js的具体代码如下：
//1.1获取ul元素
var boxul = document.getElementById("boxul")
var lis = boxul.querySelectorAll("li")
console.log(lis.length);
//1.2获取ol
var boxol = document.getElementById("boxol")
//获取Ol下面的li
var ol_lis = boxol.querySelectorAll("li")
//console.log(ol_lis);
//获得箭头
var prev = document.getElementById("prev")
var next = document.getElementById("next")
//给ol的li添加点击事件
for(var i = 0 ;iol_lis.length;i++){
// console.log(i);
//给oll的i设置index
ol_lis[i].setAttribute("index",i)
ol_lis[i].onclick = function(){
for(var i = 0 ;iol_lis.length;i++){
ol_lis[i].className = ""
lis[i].style.opacity = 0
}
this.className = "current"
var index = parseInt(this.getAttribute("index"))
lis[index].style.opacity = 1
}
}
//console.log(ol_lis);
//2.给next按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
var index = 0;
var old_li = lis[0]
var new_li
next.onclick = function(){
index++
// 到5时，切到第一张图
if(index == lis.length){
index = 0
}
old_li.style.opacity = 0
new_li = lis[index]
new_li.style.opacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0;ilis.length;i++){
ol_lis[i].className = ""
}
ol_lis[index].className = "current"
}
//3.给上一个按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
// console.log(index);
// old_li.style.opacity =0
// new_li = lis[index]
// new_li.style.opacity = 1
prev.onclick = function(){
// 从第一张图到下标为4的图
if(index == 0){
index = lis.length
}
index--
old_li.style.opacity = 0
new_li = lis[index]
new_li.style.opacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0;ilis.length;i++){
ol_lis[i].className = ""
}
ol_lis[index].className = "current"
}
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
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
这里面实现的时候结合了css3的transition属性，让图片的切换有一个过渡效果
三、相关知识点。
1、获取DOM元素：
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）document.getElementsByClassName()：通过class属性获取对象。
（3）document.getElementsByTagName()：通过标签名获取对象。
（4）document.querySelectorAll():可通过所有获取。
2、(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；
3、onclick():单击事件。
java图形界面实现图片自动轮播
现在没空帮你写代码了，给你个思路自己写吧！轮播肯定是要切换图片的，并且一般切换的时候是从左到右或从右到左慢慢切的，所以你定义一个图片地址数组，再定义两个jlabel用来显示图片，一个JLabel显示当前图片，另一个显示最新图片！好了，现在你定义一个timer定时器来切换，每隔两秒，就判断一下最新的图片是哪个jlabel，然后将另一个jlabel填充新的图片，然后setlocation()来移动图片，x坐标每次向左几个像素，直至移动完成！这样就是一次轮播，当然你需要将两个jlabel放到一个panel中，免得会出现第二个图片多出一截在慢慢移动的情况
关于java轮播图效果代码和js实现最简单轮播图效果代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
