js制作图片轮换切换

如上图所示，运用js实现4张图片的轮换播放，要求如下：

1.页面加载时4张图片按照顺序依次循环播放；

2.当鼠标移入对应图片序号的标签上时，图片显示为对应序号的图片；

3.当鼠标移除对应序号的标签上时，图片从当前序号开始依次循环播放。

实现以上功能的代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片轮换切换</title>
    <style type="text/css">
        body{
            margin: 0px;
            padding: 0px;
        }
        a{
            width: 14px;
            height: 14px;
            text-align: center;
            display: inline-block;
            line-height: 14px;
            text-decoration: none;
            color: black;
            font-size: 14px;
            background-color: #cccccc;
        }
        img{
            width: 524px;
            height: 190px;
        }
        #div1{
            position: absolute;
            top: 160px;
            left: 100px;
        }
        .demo{
            color: #ff7300;
        }
        #content{
            position: relative;
        }
    </style>
    <script type="text/javascript">
        //获取放置在图片上的<a>标签集合
        var as=document.getElementsByTagName("a");
        var num=1;//控制第几个图片和a标签
        window.onload=function() {
            as[0].className = "demo";
            for (var i = 0; i < as.length; i++) {
                //设置鼠标移入<a>标签上切换图片
                as[i].onmouseover = function () {
                    var img = document.getElementsByTagName("img")[0];
                    img.src = "./img/ad-0" + this.innerHTML + ".jpg";
                    //移除其余a标签的样式
                    for (var j = 0; j < as.length; j++) {
                        as[j].className = "";
                    }
                    //设置当前a标签的样式
                    this.className = "demo";
                    //设置num为当前图片的序号
                    num=parseInt(this.innerHTML);
                    //暂停图片循环播放定时器
                    clearInterval(id);
                }
                //设置鼠标移除时重新启动图片循环播放定时器
                as[i].onmouseout=function(){
                    id=setInterval("tplh()",2000)
                }
            }
            //启动图片循环播放定时器
            id=setInterval("tplh()",2000);
        }
        //设置图片循环播放
        function tplh(){
            var img = document.getElementsByTagName("img")[0];
            img.src="./img/ad-0"+num+".jpg";
            //移除其余a标签的样式
            for(var i=0;i<as.length;i++){
                as[i].className="";
            }
            //设置当前a标签的样式
            as[num-1].className="demo";
            num++;
            if(num>4){
                num=1;
            }
        }
    </script>
</head>
<body>
    <div id="content">
        <img src="./img/ad-01.jpg" />
        <div id="div1">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
        </div>
    </div>
</body>
</html>

关键点在于对js事件的灵活运用，以及一些逻辑处理。

posted @ 2015-05-23 10:28  likelooker  阅读(1647)  评论(0)  编辑  收藏  举报