轮播图效果_html-js-css

概述1.轮播图效果 <!doctype html><html><head><meta charset="utf-8"><title>轮播图效果</title><script type="text/javascript"> var arr=null; var tp = null; var index = 0;

1.轮播图效果
<!DOCTYPE HTML><HTML><head><Meta charset="utf-8"><Title>轮播图效果</Title><script type="text/JavaScript">    var arr=null;    var tp = null;    var index = 0;    //当页面加载完成以后执行    window.onload=function(){        //定义一个一维数组用来存储图片         arr = ["images/d.jpg","images/q.jpg","images/c.jpg","images/b.jpg"];        //获取img元素         tp = document.getElementByID("tp");         start();             }    function change(obj){        //获取用户点击的是哪个按钮        index = obj.value;        tp.src=arr[index];    }    //下一页    function next(){        //如果当前图片是最后一张        if(index==arr.length-1){            index=0;        }else{            index=index+1;        }        tp.src=arr[index];    }        //上一页    function up(){        //如果当前图片是最后一张        if(index==0){            index=arr.length-1;        }else{            index=index-1;        }        tp.src=arr[index];    }    //自动开始轮播    function start(){        var timer = setInterval("next()",3000);    }          </script></head><body>        <img src="images/d.jpg" alt="" ID="tp">    <input type="button" value="上一页" onClick="up()">    <input type="button" value="0" onClick="change(this)">    <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="下一页" onClick="next()"></body></HTML>
2.cursor：pointer（鼠标移动上去变小手）

<!DOCTYPE HTML> <HTML> <head> <Meta charset= "utf-8" > <Title>无标题文档</Title> <style> #d1{ height: 200px; wIDth: 200px; background-color: red; } #d1:hover{ /*鼠标变小手*/ cursor:pointer; } </style> @H_2_404@ </head> <body> <div ID= "d1" ></div> </body> </HTML> 总结

以上是内存溢出为你收集整理的轮播图效果全部内容，希望文章能够帮你解决轮播图效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1081795.html