事件概念和事件监听
事件監聽主要是
使用返回值改變HTML元素的默認行為
常見的事件類型
鼠標事件 如經過、點擊前后、松開鼠標等
還有HTML事件和鍵盤事件
通過這次可以完成 輪播圖的制作
<script type="text/javascript">
?? ?//將路徑封裝到數組中
?? ?var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];
?? ?//定義下標
?? ?var index=0;
?? ?//定義圖片元素
?? ?var img;
?? ?//定義定時器變量
?? ?var timer;
?? ?window.οnlοad=function(){
?? ??? ?img=document.getElementById("pic");
?? ??? ?//設置定時器
?? ??? ?timer=window.setInterval(next,2000);
?? ??? ?//當鼠標移動img停止監聽
?? ??? ?img.οnmοuseοver=stop;
?? ??? ?img.οnmοuseοut=start;
?? ?}
?? ?function change(node){
?? ??? ?//獲取按鈕元素value值計算下標
?? ??? ? index=node.value-1;
?? ??? ?//將圖片路徑傳給下標地址
?? ??? ?img.src=arr[index];
?? ??? ?
?? ?}
?? ?//下一張
?? ?function next(){
?? ??? ?if(index==arr.length-1){
?? ??? ??? ?index=0;
?? ??? ??? ?
?? ??? ?}else{
?? ??? ??? ?index++;
?? ??? ?}
?? ??? ?img.src=arr[index];
?? ?}
?? ?function up(){
?? ??? ?if(index==0){
?? ??? ??? ?index=arr.length-1;
?? ??? ??? ?
?? ??? ?}else{
?? ??? ??? ?index--;
?? ??? ?}
?? ??? ?img.src=arr[index];
?? ?}
?? ?//取消定時器
?? ?function stop(){
?? ??? ?window.clearInterval(timer);
?? ?}
?? ?//開始定時
?? ?function start(){
?? ??? ?timer=window.setInterval(next,2000);
?? ?}
?? ?</script>
</head>
<body>
<img src="img/1.jpg" id="pic">
<input type="button" value="上一張"? onClick="up()">
<input type="button" value="1" onClick="change(this)">
<input type="button" value="2" onClick="change(this)">
<input type="button" value="3" onClick="change(this)">
<input type="button" value="4" onClick="change(this)">
<input type="button" value="5" onClick="change(this)">
<input type="button" value="6" onClick="change(this)" >
<input type="button" value="7" onClick="change(this)">
<input type="button" value="8" onClick="change(this)">
<input type="button" value="下一張" onClick="next()">
</body>
?
轉載于:https://www.cnblogs.com/sy130908/p/11189842.html
總結
- 上一篇： P1832 A+B Problem（再升
- 下一篇： c#利用反射+特性实现简单的实体映射数据