轮播图理解并应用

Posted 邹少聪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播图理解并应用相关的知识,希望对你有一定的参考价值。

技术分享图片
 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>无标题文档</title>
 6         <script type="text/javascript" src="lunbotu.js"></script>
 7     </head>
 8 
 9     <body>
10     <div>
11         <button onclick="up()">上一张</button>
12         <img src="../1.12/xiangmu/image/b1.jpg" onMouseOut="start()" onMouseMove="stop()" id="img1">
13         <button onClick="next()">下一张</button>
14     </div>
15     </body>
16     <script type="text/javascript">
17             var p1=document.getElementById("img1"),//定义一个变量 获取所需元素
18                 n=0,//随便定义一个下标
19                 arr=[../1.12/xiangmu/image/b1.jpg,../1.12/xiangmu/image/b2.jpg];//将要轮播的图片存入
20             function next(){//建立方法 点击下一张的设置
21                 img1.setAttribute("src",arr[n]);//设置图片属性
22                 n++;
23                 if(n>1){//判断下标的情况
24                     n=0;
25                 }
26             }
27             function up(){//建立方法 点击上一张的设置
28                 img1.setAttribute("src",arr[n]);//同样设置图片属性
29                 n--;
30                 if(n<0){//判断下标
31                     n=1;
32                 }
33             }
34         var aaa="";//定义一个变量为空
35         window.onload=function(){//加载完后的操作
36             aaa=setInterval(next(),1000);//定时器的设置 1s
37         }
38         function stop(){//鼠标移上图的时候停止的操作
39             clearInterval(aaa);//
40         }
41         function start(){//鼠标移出图的时候停止的操作
42             aaa=setInterval(next(),1000);//1s
43         }
44     </script>
45 </html>
46     
简易轮播图

 

以上是关于轮播图理解并应用的主要内容,如果未能解决你的问题,请参考以下文章

未学习JS也可以通过bootstrap做出轮播图的实际应用

写jquery插件轮播图历程

原生js简单轮播图 代码

原生Js写轮播图代码

Flutter 中轮播图详解[Flutter专题31]#yyds干货盘点#

织梦DEDE轮播代码,从几个网站复制了几段轮播代码过来,轮播图有图,但不轮播,为啥?没用CSS和JS