图片自动轮播及点击图标切换图片

Posted 黑土白云

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片自动轮播及点击图标切换图片相关的知识,希望对你有一定的参考价值。

本案例两个功能:  第一,默认是自动图片轮播; 第二,hover到图片下面的不同数字,切换到数字对应的图片, 鼠标移出数字,动画从当前位置开始继续循环播放

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #d{position: relative;top: -30px;}
        label{margin: -5px;}
        .one{width: 10px;height: 10px;border: 1px solid black; background-color: red;}
    </style>

    <script>
        var n =0;//图片下标 label下标
        var t=0;// 清除动画用

        function init(){
            //1.默认进来自动播放轮播图
            switchImgs();

            //2. 当鼠标移入移出不同的label切换不同的图片.
            var img = document.getElementById("img");
            var labels =document.getElementsByTagName("label");//拿到所有的label标签对象

            for(var i=0;i<labels.length;i++){//给每个label标签注册一个hover事件
                labels[i].onmouseover=function(){
                    clearTimeout(t);//停止动画
                    var b= this.innerText*1;//拿到标签上的数字
                    img.src="images/photo_0"+b+".jpg";//显示对应的图片
                    clearStyle();//清除label上的样式
                    this.className="one";//让当前的label的样式变化
                }

                labels[i].onmouseout=function(){//鼠标移出动画开始,动画从当前的图片开始动画
                    n=this.innerText*1;//获取当前label上的数字并转换成整型
                    switchImgs();
                }
            }

        }

        //默认动画,图片轮播,每个1秒切换
        function switchImgs(){
            n++;
            if(n==7){n=1;}//到达末尾的时候跳转到第一张
            var img = document.getElementById("img");
            img.src="images/photo_0"+n+".jpg";
            clearStyle();//当图片到第二张的时候,要把label1的样式清除,
            document.getElementById("i"+n).className="one";
            t=setTimeout("switchImgs()",1000);
        }

        //清除label的所有的样式
        function clearStyle(){
               var labels= document.getElementsByTagName("label");
                for(var i=0;i<labels.length;i++){
                    labels[i].className="";//让label表的classname置为空
                }
        }

    </script>
</head>
<body onload="init()">
    <div align="center">
        <img src="images/photo_01.jpg" width="400" height="500" id="img">
        <div id="d">
            <label id="i1">&nbsp;1&nbsp;</label>
            <label id="i2">&nbsp;2&nbsp;</label>
            <label id="i3">&nbsp;3&nbsp;</label>
            <label id="i4">&nbsp;4&nbsp;</label>
            <label id="i5">&nbsp;5&nbsp;</label>
            <label id="i6">&nbsp;6&nbsp;</label>
        </div>
    </div>
</body>
</html>

 

以上是关于图片自动轮播及点击图标切换图片的主要内容,如果未能解决你的问题,请参考以下文章

js--1图片切换,定时器,自动轮播,图片显示隐藏

JavaScript实现图片的自动轮播

js如何制作图片轮播

怎么用js实现图片的缩小?

jquery 广告轮播图

Android使用ViewPager实现轮播图(自动和手动)