zoukankan      html  css  js  c++  java
  • 2018.07.30js实现轮播图

    javascript实现轮播图

    一、html代码

    <body>
    <center>
    <button onClick="pgup()">上一页</button>
    <img src="../20180728/2.png" alt="" width="450" height="350">
    <button onClick="pgdn()">下一页</button><br>
    <img src="../20180728/3.png" alt="" width="50" height="50">
    <img src="../20180728/4.png" alt="" width="50" height="50">
    <img src="../20180728/5.png" alt="" width="50" height="50" xb="3" onClick="showme(this)">

    </center>
    </body>
    二、javascript代码
    <script>
    //轮播图
    var img=null;//定义图片
    var k=0;//定义下标
    var dsq=null;//定义定时器
    var imgs=['../20180728/2.png','../20180728/3.png','../20180728/4.png','../20180728/5.png'];
    window.onunload=function(){
    }
    //获取图片
    img=document.getElementsByTagName('img')[0];
    //定义鼠标移入和鼠标移出事件
    img.onmouseover=stop;
    img.onmouseout=start;
    //上一页
    function pgup(){
        
        k++;
        if(k>=imgs.length){
            k=0;
        }img.setAttribute("src",imgs[k]);
    }
    //下一页
    function pgdn(){
        k--;
        if(k<=0){
            k=imgs.length-1;
        }img.setAttribute("src",imgs[k]);
    }
    //定时器(连环炸弹)
    dsq=setInterval(function(){
        pgdn();
    },5000);
    //鼠标移出时图片开始轮播
    function start(){
        dsq=setInterval(function(){
        pgdn();
    },5000);
    }
    //鼠标移入时图片停止播放
    function stop(){
        clearInterval(dsq);
    }
    //点击小图时切换图片
    function showme(obj){
        k=+obj.getAttribute('xb');
        img.setAttribute("src",imgs[k]);
    }
    </script>

  • 相关阅读:
    Python基础:Python可变对象和不可变对象
    python内置函数
    python元组和序列
    python模块简单使用
    python循环技巧
    皮尔逊积矩相关系数
    Python基础:Python的变量和对象
    统计学中的自由度
    python 速成指南
    在SQL Server中,SQL语句的Insert支持一次插入多条记录
  • 原文地址:https://www.cnblogs.com/sccwxl/p/9391075.html
Copyright © 2011-2022 走看看