zoukankan      html  css  js  c++  java
  • 轮播图

    html

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>无标题文档</title>
            <script type="text/javascript" src="lunbotu.js"></script>
            <style>
                
            </style>
        </head>
    
        <body>
          <div style=" 80%; height: 500px; margin: 0 auto;" >
              <img src="../../../../图片/1.jpg" alt="logo"  id="im"  
        width="100%" height="500px" onMouseOver="aa()">
          </div>
          <br>
          <div style=" 30%; height: 100px; margin: 0 auto;">
              <button onClick="shangye()">上一页</button>
              <button onClick="bbtu(0)">1</button>
              <button onClick="bbtu(1)">2</button>
              <button onClick="bbtu(2)">3</button>
              <button onClick="bbtu(3)">4</button>
              <button onClick="xiaye()">下一页</button>
          </div>
        </body>
    </html>

    js部分

    // JavaScript Document
    var im =null; //图片标签对象
    var sum=["../../../../图片/1.jpg","../../../../图片/2.jpg","../../../../图片/3.jpg","../../../../图片/4.jpg"];  //轮播图路径数组
    var n =0;   //轮播图下标
    var IntervalObj = null;   //定时器变量
    window.onload=function(){
        im = document.getElementById("im");
        lunbo(n);
        stop();
        start();
    }
    //轮播
    function lunbo(n){ 
        IntervalObj = setInterval(function(){
            im.src=sum[n];
            n++;
            if(n>=sum.length){
                n=0;
            }
        },1200);
    }
    //移上暂停    
    function stop(){
        im.onmouseover=function(){
            clearInterval(IntervalObj);
            
        }
    }
    //移下继续
    function start(){
        im.onmouseout=function(){
            IntervalObj = setInterval(function(){
                im.src=sum[n];
                n++;
                if(n>=sum.length){
                    n=0;
                }
            },5200);
        }    
    }
    //点击按钮1、2、3、4跳转图片
    function bbtu(nn){
        im.src=sum[nn];
        n=nn+1;
    }
    //点击下一页跳转下一页
    function shangye(){
        n--;
        if(n<= -1){
            n=sum.length-1;
        }
        im.src=sum[n];
    }
    //点击上一页跳转上一页
    function xiaye(){
        n++;
        if(n>= sum.length-1){
            n=0;
        }
        im.src=sum[n];
    }    
  • 相关阅读:
    Oracle 删除某个用户下的对象
    解决11g导出时,空表不能导出问题
    Oracle常用sql
    Oracle 创建表空间和用户
    chapter4.1、函数,参数
    chapter3.6、标准库datetime
    chapter3.5内建函数
    简单选择排序和二元选择排序
    chapter3.4解析式、生成器
    列表解析练习
  • 原文地址:https://www.cnblogs.com/-dashu/p/9284658.html
Copyright © 2011-2022 走看看