javascript实现点击图片切换功能

本文实例为大家分享了javascript实现点击图片切换的具体代码，供大家参考，具体内容如下

实现效果：图片点击切换

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../reset.css">
    <style>
        .img-list{
            width: 480px;
            height: 850px;
            margin: 0 auto;
            /* 为a提供参照 */
            position:relative;
        }
        img{
            width: 480px;
            height: 850px;
            object-fit: cover;
        }
        .img-list li{
            /* 开启绝对定位使之可以设置 z-index */
            position: absolute;
        }
        .img-list li:nth-child(3){
            z-index: 1;
        }
        .pointer{
            /* 开启绝对定位放在上面 */
            position: absolute;
            z-index: 999;
            bottom: 40px;
            margin-left: 140px;
        }
        .pointer a{
            /* display: block; */
            /* 横向排列 */
            float: left;
            width: 20px;
            height: 20px;
            background-color: salmon;
            margin-left: 20px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);

            /*默认情况下background-color的颜色是会延伸到边框下面的，如果我们不想要延申，需要设置 */
            background-clip: content-box;
            border:2px solid transparent;
        }
        .pointer a.active,
        .pointer a:hover
        {
            background-color: #fff;
            border:3px solid rgba(0, 0, 0, 0.3);

        }

    </style>
    <script>
        window.onload =function(){
            var imgArray = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.png","./img/5.jpg"];
            var allA =  document.getElementsByTagName("a");
            var img = document.getElementsByTagName("img")[0];

            for(var i =0 ;i<allA.length;i++){
                allA[i].num = i;
                allA[i].onclick=function(){
                    // 使用this.name,！！不能使用allA[i].name,因为i此时已经等于5了。
                    var index = this.num;
                    img.src=imgArray[index];

                     for(var j =0 ;j<allA.length;j++){
                         allA[j].className="";
                     }
                    this.className = "active";
                }
            }
        }
    </script>

</head>
<body>
    <ul class="img-list">
        <li><img src="./img/1.jpg" alt=""></li>
        <!-- <li><a href="javascript:;"><img src="./img/2.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/3.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/4.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/5.jpg" alt=""></a></li> -->

        <div class="pointer">
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

  • JavaScript实现图片切换效果

    JavaScript实现图片切换效果

    本文实例为大家分享了JavaScript实现图片切换效果,自定义属性的应用  供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换实例</title> <style> body{ background-color: #A9A9A9; margin:0px; } ul{ padding: 0; margi

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

  • JS实现图片切换效果

    JS实现图片切换效果

    本文实例为大家分享了JS实现图片切换效果的具体代码,供大家参考,具体内容如下 <body> <button id="btn1">ON</button> <button id="btn2">OFF</button><br> <img src="images/0.jpg" alt="" id="pic"> <script

  • javascript实现图片切换的幻灯片效果源代码

    网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享 废话少说,看代码 复制代码 代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div

  • 简单的实现点击箭头图片切换的js代码

    简单的实现点击箭头图片切换的js代码

    步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I

  • css图片切换效果代码[不用js]

    css图片切换效果代码[不用js]

    纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • 纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: [加载图片慢点请等会] www.jb51.net 我们 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relativ

随机推荐