原⽣js解决图⽚点击左右切换（简单轮播图）
想写⼀个综合性的⼩案例，主要会运⽤到数组和判断以及我前⾯⼏篇博客所复习到的js的知识。今天案例想要实现的效果图如下图所⽰：
效果是：点击“循环切换”按钮，那么“⼀号”位置的⽂案就要写⼊“图⽚可以循环”，⽽下⾯的左右箭头在点击过程中可以循环点击，并且“⼆号”和“三号”要响应切换到相对应的数字和⽂字内容；否则，点击“顺序切换”按钮，那么“⼀号”位置的⽂案就要写⼊“图⽚是顺序播放”除了“⼆号”和“三号”要响应切换到相对应的数字和⽂字内容之外，⽆论是第⼀张还是最后⼀张都不能继续往下点击了。好的具体来看代码。
先来简单的看⼀下布局和样式：
1<style>
2 body{text-align: center}
3 #box{width:400px;height:400px;border:5px solid #e5e5e5;margin:20px auto;position:relative;}
4 #img{width:100%;height:100%;}
5 #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;}
6 #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;}
7 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; }
8 a:hover { filter:alpha(opacity:30); opacity:0.3; }
9 #prev {left:10px;}
10 #next {right:10px;}
11</style>
1<body>
2<input id="btn1" type="button" value="循环切换">
3<input id="btn2" type="button" value="顺序切换">
4<p id="p1">图⽚可以循环</p>
5<div id="box">
6<img id="img"/>
7<p id="text1"></p>
8<p id="text2">图⽚⽂字加载中……</p>
9<a id="prev" href="javascript:void(0)"><</a>
10<a id="next" href="javascript:void(0)">></a>
11</div>
12</body>
接下来就是最重要的js的写法了，因为是原⽣的写法，所以只能先获取到所有能⽤到的id，然后再去写具体的效果：
1 <script>
2 load= function(){
3var ElementById("btn1");
4var ElementById("btn2");
5var ElementById("box");
6var ElementById("img");
7var ElementById("text1");
8var ElementById("p1");
9var ElementById("text2");
10var ElementById("prev");
js简易轮播图代码11var ElementById("next");
12var arrSrc=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];
13var arrTxt=["⽂案1","⽂案2","⽂案3","⽂案4"];
14var num=0;
15var onOff=true; //true 循环 false ⾛顺序
16
17function fn(){ //开始先定义⼀个公共函数⽅便下⾯调⽤
18 oImg.src = arrSrc[num]; //图⽚的显⽰路径
19 oText1.innerHTML= num+1 +"/" + arrTxt.length; //图中⼆号位置的数字显⽰
20 oText2.innerHTML=arrTxt[num]; //图中三号位置的⽂字显⽰
21 }
22 fn();/*切记，定义之后，这⾥⼀定要调⽤⼀下*/
23
24//循环按钮
25 lick=function(){
26 onOff=true;
27 p1.innerHTML="图⽚会循环"
28
29 };
30//顺序按钮
31 lick=function(){
32 onOff=false;
33 p1.innerHTML = "图⽚按顺序⾛"
34
35 };
36 lick = function(){
37 num--; //点击左边的箭头那么就是num--
38if(onOff){ //onOff默认是true所以就是⾛循环了
39if(num==-1){ //在⼀直减的过程中，数组⾥最⼩的就是0，所以等于-1的时候要循环下去所以让它显⽰最后⼀张
40 num=arrSrc.length-1;
41 }
42
43 }else{ //否则onOff是false所以就是⾛顺序了
44if(num==-1){ //在⼀直减的过程中，数组⾥最⼩的就是0，所以等于-1的时候没有数据⾛了，所以让它显⽰第⼀张不能点击了
45 num=0;
46 alert("已经是第⼀张了")
47 }
48 }
49 fn();//判断好之后记得调⽤函数
50 };
51//相反下⾯就是点击左边的箭头所做出的判断，道理同上
52 lick = function(){
53 num++;
54if(onOff){
55if(num==arrTxt.length){
56 num=0;
57 }
58 }else{
59if(num==arrTxt.length){
60 num=arrSrc.length-1;
61 alert("已经是最后⼀张了")
62 }
63 }
64 fn();
65 }
66 }
67 </script>
好了，以上就是这个案例所有代码了，这⾥⾯牵涉到两层逻辑关系就是点击最上⾯的循环和顺序的按钮
时，下⾯的图⽚所对应到相应的效果，第⼆个逻辑就是当确定好是循环或者是顺序播放的其中⼀个之后，下⾯的图⽚在点击切换的时候是判断循环的⼀定要可以让它⼀直点击下去，⽽顺序的就是点击到最后⼀张就不能⾛下去了，要显⽰已经到头了，其实这些明⽩之后就好说了。好了，今天就到这⾥了，明天继续！
发表评论