当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 用原生JS编写的类似轮播图特效（代码教程）

用原生JS编写的类似轮播图特效（代码教程）

2018年11月03日  | 移动技术网IT编程  | 我要评论

js部分：

[javascript] view plain copy

 window.onload = function() {  

var obtn1 = document.getelementbyid("btn1");  

var obtn2 = document.getelementbyid("btn2");  

var otitle = document.getelementbyid("title");  

var oimg = document.getelementbyid("img_list");  

var ocon_title = document.getelementbyid("con_title");  

var onum = document.getelementbyid("num");  

var opre = document.getelementbyid("pre");  

var onext = document.getelementbyid("next");  

var imglist=["img/tm-img.jpg","img/tm-img1.jpg","img/tm-img2.jpg","img/tm-img4.jpg"]  

var titlelist = ["忧伤","思念","风景","孤独"];  

onum.innerhtml = 1 + '/' + imglist.length;  

ocon_title.innerhtml = "这是第一张图片";  

var num = 0;  

var onoff = true; //true  顺序播放   false  循环播放  

obtn1.onclick = function() {  

onoff = true;  

otitle.innerhtml = "图片顺序播放";  

};  

obtn2.onclick = function() {  

onoff = false;  

otitle.innerhtml = "图片循环播放";  

};  

opre.onclick = function() {  

num--;  

if(num < 0) {  

if(onoff) { //true  顺序播放  

num = 0;  

alert("已经是第一张啦！");  

} else {  

[html] view plain copy

 num = imglist.length - 1;  

[html] view plain copy

}  

}changeimg(num)};onext.onclick = function() {num++;if(num > imglist.length - 1) {if(onoff) { //true 顺序播放num = imglist.length - 1;alert("已经是最后一张啦！");} else {num = 0;}}changeimg(num);};function changeimg(num) {oimg.src = imglist[num];ocon_title.innerhtml = titlelist[num];onum.innerhtml = num + 1 + '/' + imglist.length;};};

html部分：

[html] view plain copy

<p class="box">  

<p id="btns">  

<input id="btn1" type="button" value="顺序播放" />  

<input id="btn2" type="button" value="循环播放" />  

<p id="title">图片顺序播放</p>  

</p>  

<p id="content">  

<img id="img_list" src="img/tm-img.jpg" alt="">  

<p id="con_title"></p>  

<span id="num"></span>  

</p>  

<p id="changebtn">  

<input id="pre" type="button" value="上一张">  

<input id="next" type="button" value="下一张">  

</p>  

</p>  

css部分：

[css] view plain copy

body,  

p {  

margin: 0px;  

padding: 0px;  

}  

input {  

outline: none;  

border: none;  

padding: 0;  

}  

.box {  

width: 320px;  

height: 320px;  

position: relative;  

margin: 50px auto;  

}  

#img_list {  

width: 320px;  

height: 200px;  

}  

#btns {  

text-align: center;  

}  

#btn1,  

#btn2,  

#pre,  

#next {  

background-color: #727272;

color: #fff;

height: 22px;

width: 70px;

border-radius: 4px;

line-height: 22px;

margin: auto auto;

text-align: center; font-size: 12px; }

background-color: #aeaeae;

#btn1:hover, #btn2:hover { color: #feffa8; }

line-height: 30px;

#btns #title, #num { width: 320px; height: 30px;

}

font-size: 16px; display: block; } #content { width: 320px;

text-align: center;

}

#content #con_title {

width: 320px; height: 30px;

text-align: center;

line-height: 30px; background-color: #000;

position: absolute;

filter: alpha(opacity(40)); opacity: 0.4; top: 223px; color: #fff; }

text-align: center;

#changebtn {

width: 320px;

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网