原生js解决图片点击左右切换（简单轮播图）的简单示例
人气：629 时间：2018-09-26
这篇文章主要为大家详细介绍了原生js解决图片点击左右切换（简单轮播图）的简单示例，具有一定的参考价值，可以用来参考一下。
想写一个综合性的小案例，主要会运用到数组和判断以及我前面几篇博客所复习到的js的知识。今天案例想要实现的效果图如下图所示：
效果是：点击“循环切换”按钮，那么“一号”位置的文案就要写入“图片可以循环”，而下面的左右箭头在点击过程中可以循环点击，并且“二号”和“三号”要响应切换到相对应的数字和文字内容；否则，点击“顺序切换”按钮，那么“一号”位置的文案就要写入“图片是顺序播放”除了“二号”和“三号”要响应切换到相对应的数字和文字内容之外，无论是第一张还是最后一张都不能继续往下点击了。好的具体来看代码。
先来简单的看一下布局和样式： CSS代码如下：
<style>
body{text-align: center}
#box{width:400px;height:400px;border:5px solid #e5e5e5;margin:20px auto;position:relative;}
#img{width:100%;height:100%;}
#text1{width:100%;height:30px;position:absolute;left:0;top:0;background: #000;text-align:center; line-height:30px;color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8;}
#text2{width:100%;height:30px;position:absolute;left:0;bottom:0;background: #000;text-align:center; line-height:30px; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8;}
a{width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }
a:hover { filter:alpha(opacity:30); opacity:0.3; }
#prev {left:10px;}
#next {right:10px;}
</style>
/*** 来自四海网 （www.q1010.com）***/
<body>
<input id="btn1" type="button" value="循环切换">
<input id="btn2" type="button" value="顺序切换">
<p id="p1">图片可以循环</p>
<div id="box">
<img id="img" />
<p id="text1"></p>
<p id="text2">图片文字加载中……</p>
<a id="prev" href="javascript:void(0)"><</a>
<a id="next" href="javascript:void(0)">></a>
</div>
</body>
<!-- 来自 四海网 （www.q1010.com）-->
/**
* 解决图片点击左右切换
*
* @param
* @arrange (512.笔记) www.q1010.com
**/
<script>
window.onload= function(){
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oBox=document.getElementById("box");
var oImg=document.getElementById("img");
var oText1=document.getElementById("text1");
var p1=document.getElementById("p1");
var oText2=document.getElementById("text2");
var oPrev=document.getElementById("prev");
var oNext=document.getElementById("next");
var arrSrc=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];
var arrTxt=["文案1","文案2","文案3","文案4"];
var num=0;
var onOff=true; //true 循环 false 走顺序
function fn(){ //开始先定义一个公共函数方便下面调用
oImg.src = arrSrc[num]; //图片的显示路径
oText1.innerHTML= num+1 +"/" + arrTxt.length; //图中二号位置的数字显示
oText2.innerHTML=arrTxt[num]; //图中三号位置的文字显示
}
fn();/*切记，定义之后，这里一定要调用一下*/
//循环按钮
oBtn1.onclick=function(){
onOff=true;
p1.innerHTML="图片会循环"
};
//顺序按钮
oBtn2.onclick=function(){
onOff=false;
p1.innerHTML = "图片按顺序走"
};
oPrev.onclick = function(){
num--; //点击左边的箭头那么就是num--
if(onOff){ //onOff默认是true所以就是走循环了
if(num==-1){ //在一直减的过程中，数组里最小的就是0，所以等于-1的时候要循环下去所以让它显示最后一张
num=arrSrc.length-1;
}
}else{ //否则onOff是false所以就是走顺序了
if(num==-1){ //在一直减的过程中，数组里最小的就是0，所以等于-1的时候没有数据走了，所以让它显示第一张不能点击了
num=0;
alert("已经是第一张了")
}
}
fn();//判断好之后记得调用函数
};
//相反下面就是点击左边的箭头所做出的判断，道理同上
oNext.onclick = function(){
num++;
if(onOff){
if(num==arrTxt.length){
num=0;
}
}else{
if(num==arrTxt.length){
num=arrSrc.length-1;
alert("已经是最后一张了")
}
}
fn();
}
}
</script>本文来自：http://www.q1010.com/174/1738-0.html
注：关于原生js解决图片点击左右切换（简单轮播图）的简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。
关键词：原生js