I want to write a slider, myself. Is there anyone who can give me some advice?

I have looked up a lot of product slider ranges on the website, and I feel that most of the settings are too many
I just want separate functions that allow products to go to the left or right, and functions that are also supported by the mobile phone

.

clipboard.png


jquery

https://www.spectacles.com/sh...

clipboard.png
.]

what on earth is this made of? I"ve been in pain for a long time

Apr.02,2021

provides a simple way of thinking

< html >

<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="-sharp1"></a>
        <a href="-sharp2"></a>
        <a href="-sharp3"></a>
        <a href="-sharp"></a>
        <a href="-sharp5"></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(/.*-sharp/g,""))||1;
                        //
                        tp.style.marginLeft=(1-index)*200+"px";

/ / return false;

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

< / html >

Menu