zhe_qiu 2019-04-12 09:58 采纳率: 100%
浏览 1036
已采纳

js怎么实现多个位置的微信号和微信二维码图片相对应的轮播

我在html中想实现微信号和二维码图片相对应的轮播,就是展示的微信号和展示的二维码图片相对应，而且二维码图片有三个位置 其中两个使用的是相同图片.这种效果怎么实现，我目前能实现4个位置的微信号展示同一个 但是3个位置的位置的二维码图片不行，就是其中两个位置使用相同二维码图片的也没办法对应起来. 只能实现它们刷新展示新的图片，但是不能把展示的二维码图片与微信号进行对应起来, 在网上搜的是把微信号和图片放到一个对象里图片说明

这种不算太懂，麻烦各位的帮助，请附加清晰的代码

  • 写回答

2条回答 默认 最新

  • 氪精大佬 2019-04-13 15:02
    关注

    你这个问题和我的课堂练习有些相似，我用的原理是，将图片路径放在一个数组下，然后你那个微信号放在几个span标记中，然后id与数组对应
    说也不怎么好说，上代码吧，我是用jquery写的，你如果要用原生js做的话就自己改吧。
    代码挺简单，这里就不注释了

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <style>
       #div1 {
            margin: 20px auto;
            width: 1024px;
            overflow: hidden;
            position: relative;
        }

        .inner {
            position: relative;
            width: 9999px;
            left: 0;
            top: 0;
        }

        .img {
            float: left;
        }

        .clearfix {
            *zoom: 1;
        }

        .clearfix:after {
            display: block;
            clear: both;
            visibility: hidden;
            content: "";
            height: 0;
        }

        a {
            text-decoration: none;
        }

        #left-arrow {
            position: absolute;
            left: 0;
            top: 40%;
            width: 50px;
            height: 30px;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
            background-color: rgba(255,255, 255, 0.7);
            margin: auto;
        }

        #right-arrow {
            position: absolute;
            right: 0;
            top: 40%;
            width: 50px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            line-height: 20px;
            background-color: rgba(255,255, 255, 0.7);
        }

        #div2 {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }

        #div2 span {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: lightblue ;
            line-height: 30px;
            border-radius: 50%;
            cursor: pointer;
        }

        #div2 .num {
            background-color: lightgreen;
            color: #FFFFFF;
        }
        .what{
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div class="inner clearfix">
            <div class="img"><img src="img/1.jpg"></div>
        </div>
        <div id="div2">
        </div>
        <button id="left-arrow"lt;<tton>
        <button id="right-arrow">&gt;<tton>
    </div>
</body>
<script>
    var $imgUr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpeg']
    function addSpan(){
                 var $i=0;
                 for($i;$i<6;$i++)
                 {
                 var $span='<span class="num" id="'+$i+'"></span>'
                 $('#div2').append($span);
                 }
             }

        $(document).ready(function(){
             addSpan(); 
             var $span=$('.num')
             var $index=0;
             var $img=$('.img img');

             var $it=setInterval(function(){
                 $img.hide()

                if($index==5){$index=0}
                else{$index++}
                $img.fadeOut(1000,function(){$(this).attr("src",$imgUr[$index])})
                $img.fadeIn(1000)
                return $index
             },1000);

            function changeImg(){
                 $img.fadeOut(1000,function(){$(this).attr("src",$imgUr[$index])})
                 $img.fadeIn(1000)
                //  $img.hide(1000)
                //  $img.attr("src",$imgUr[$index]).show(1000)
                 clearInterval($it)
                 return $index
        }
             $span.on('click',function(){
                 var $id=$(this).attr("id")
                     $index=$id;
                 changeImg()
                //  $(this).css({
                //     "background":"lightgreen"
                // }).sliblings().css({
                //     "background":"lightblue"
                // })
        })

            $('#left-arrow').on('click',function(){
                 $img.hide()
                 if($index==0){$index=5}
                 else{$index--}
                 changeImg()
            })
            $('#right-arrow').on('click',function(){
                 $img.hide()
                 if($index==5){$index=0}
                 else{$index++}
                 changeImg()
            })


        })

</script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 关于下拉菜单选项关联的问题
  • ¥15 如何修改pca中的feature函数
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉，不会对a-b<-200mv有影响吗，就是接受时，对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构，轴与轴承是否发生了碰撞？
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法，和Jdk11自带的加密结果会一样吗，不一样的话有什么解决方案，Jdk不能升级的情况
  • ¥15 画两个图 python或R