鍍金池/ 問(wèn)答/HTML/ 我自己想寫(xiě)一個(gè) slider，有沒(méi)有人可以指教？

我自己想寫(xiě)一個(gè) slider，有沒(méi)有人可以指教？

我在網(wǎng)上查了好多 product slider 的範(fàn)兒，感覺(jué)大部分的設(shè)定都太多了
我只是想要單純的讓商品可以向左或向右，手機(jī)也支持的功能

clipboard.png

這種的原理是什麼？
從哪裡開(kāi)始會(huì)比較好？如果用 jquery 的話？
或是真的有什麼簡(jiǎn)單基本的插件可以讓我改？

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

還有這種下面也會(huì)有小預(yù)覽的，一樣可以左右滑動(dòng)

clipboard.png
.]

這到底是什麼原理做的啊？我頭疼老半天啦

回答
編輯回答
不舍棄

提供一種簡(jiǎn)單的思路
<!DOCTYPE html>
<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="#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;//對(duì)鏈接數(shù)量進(jìn)行統(tǒng)計(jì)
            if(tp&&ljsl){
                for(var i=0;i<ljsl;i+=1){
                    lj[i].onclick=function(){
                        var index=Number(this.href.replace(/.*#/g,""))||1;
                        //上面一行，判斷當(dāng)前鏈接與點(diǎn)擊的鏈接是否相等，如果不相等，則移動(dòng)圖片
                        tp.style.marginLeft=(1-index)*200+"px";

// return false;

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

</html>

2017年12月28日 02:56