脚本宝典收集整理的这篇文章主要介绍了js实例教程-用原生JS编写的类似轮播图特效（代码教程），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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;

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-用原生JS编写的类似轮播图特效（代码教程）全部内容，希望文章能够帮你解决js实例教程-用原生JS编写的类似轮播图特效（代码教程）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。