我自己想寫一個 slider，有沒有人可以指教？

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .f{
            width: 200px;
            height: 300px;
            overflow: hidden;
        }
        .f_aaa{
            width: 1500px;
            height: 300px;
            -webkit-transition: all 0.3s ease-in-out;
        }
        .f_aa{
            width: 200px;
            float: left;
        }
        .f_cfq{
            padding-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body onload="a()">
    <div class="f">
        <div id="aaa" class="f_aaa">
            <img src="img/b1.png" class="f_aa"/>
            <img src="img/b2.png" class="f_aa"/>
            <img src="img/b3.png" class="f_aa"/>
            <img src="img/b4.png" class="f_aa"/>
            <img src="img/b5.png" class="f_aa"/>
        </div>
    </div>
    <div id="cfq" class="f_cfq">
        <a href="#1">图片一</a>
        <a href="#2">图片二</a>
        <a href="#3">图片三</a>
        <a href="#她他">图片四</a>
        <a href="#5">图片五</a>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function a(){
            var $=function(id){return document.getElementById(id);}
            var tp=$("aaa");//图片拾取
            var lj=$("cfq").getElementsByTagName('a');//链接拾取
            var ljsl=lj.length;//对链接数量进行统计
            if(tp&&ljsl){
                for(var i=0;i<ljsl;i+=1){
                    lj[i].onclick=function(){
                        var index=Number(this.href.replace(/.*#/g,""))||1;
                        //上面一行，判断当前链接与点击的链接是否相等，如果不相等，则移动图片
                        tp.style.marginLeft=(1-index)*200+"px";

// return false;

                    }
                }
            }
        }
    </script>
</body>

</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

我自己想寫一個 slider，有沒有人可以指教？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？