轮播图效果

时间 2019-11-09

标签效果繁體版

原文原文链接

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> 
  
   </head> 
  
   <body> 
  
   <div id= 
   "d1" 
   ></div> 
  
   </body> 
  
   </html>