javaScript实现图片动态轮流展示

来源：互联网发布：双色球历史数据库下载编辑：程序博客网时间：2024/06/08 20:11

今天学到了用javaScript来实现几张图片轮流展示，并且可以用html5中ul列表来管理图片，选择查看图片
代码部分：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>动态图片</title><style type="text/css">    *{        padding:0px;        margin:0px;    }    div#advDiv{        width:550px;        margin:80px auto;        border:10px solid gray;        padding:15px 0px 15px 15px;    }    div#advDiv ul{        float:right;    }    div#advDiv li{        list-style: none;        border:1px solid;        width:20px;        text-align: center;        margin-bottom:8px;        margin-right:15px;    }    .numLabel{    background-color:orange;    }</style><script type="text/javascript">    function $(eleStr){        //为了区分，不刚的取对象方式，以加前缀的方式来区分        //id加#，class加".",name 加"_" ,tagname不加前缀        switch(eleStr.substr(0,1)){        case "#":            return document.getElementById(eleStr.substr(1));            break;        case ".":            return document.getElementsByClassName(eleStr.substr(1));            break;        case "_":            return document.getElementsByName(eleStr.substr(1));            break;        default:            return document.getElementsByTagName(eleStr);        break;        }    }    var blasts = new Array("image/blast1.png","image/blast2.png","image/blast3.png");    var index = 0;    function hitKing(){        setTimeout(function(){            $("#bullet").src = blasts[index];            if(++index != blasts.length){                hitKing();            }        },500);    }    onload = function(){        //鼠标放上停止        $("#advPic").onmouseover = function(){            clearInterval(moveAdv);        }        //鼠标移开继续开启        $("#advPic").onmouseout = function(){            moveAdv=setInterval(moveAdvPic,1000);        }        //在函数中定义不带var的变量也是全局变量        moveAdv=setInterval(moveAdvPic,1000);        for (var i = 0; i < 6; i++) {            $("li")[i].onmouseover = function(){                moveAdvPic(this.innerText);            }        }    }    var index=1;//图片的下标    //动态广告图片    function moveAdvPic(){        if(arguments.length){  //处理选中数字label时，显示对应的图片            clearInterval(moveAdv);            index = arguments[0];        }else{            index = index % 6 + 1; //1-6, ++index %6 0-5        }        $("#advPic").src = "image/dd_scroll_"+index+".jpg"        for (var i = 0; i < 6; i++) {            $("li")[i].className = "none";        }        $("li")[index - 1].className="numLabel";    }</script></head><body>    <div id = "advDiv">    <img src="image/dd_scroll_1.jpg" id="advPic">        <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        </ul>    </div></body></html>

这里写图片描述

右边的列表可以手动地去选择看那一张图片，不用手动时，图片也可以自动的跳转展示。

0 0