求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码

JavaScript014

求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码,第1张

参考代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .btn{

            display: block

            margin:135px auto

            width: 30px

            height: 30px

            font-size: 30px

            cursor: pointer

        }

        .btn:hover

 {

            color: gray

            font-size: 35px

            font-weight: bold

        }

        .img

 {

            width: 600px

            height: 400px

            float: left

            transition: all 1s

        }

        .info-img

 {

            width: 100px

            height: 67px

            float: left

            margin-left: 20px

        }

    </style>

</head>

<body>

<div style="width: 1000pxheight: 800pxmargin: auto">

    <div style="width: 700pxheight: 500pxmargin: auto">

        <div style="width: 50pxheight: 400pxfloat: lefttext-align: center">

            <span class="btn" onclick="change_img('last')">&lt</span>

        </div>

        <img id="1" src="image/fj1.jpg" class="img">

        <div style="width: 50pxheight: 400pxfloat: lefttext-align: center">

            <span class="btn" onclick="change_img('next')">&gt</span>

        </div>

        <div style="width: 700pxheight: 100pxtext-align: center">

            <span>图片介绍：</span>

            <span id="text">风景图片1</span>

        </div>

    </div>

    <div id="info" style="width: 700pxheight: 200pxmargin: autotext-align: center">

    </div>

</div>

<script>

    var data = [

        {id:1,src:"image/fj1.jpg",text:"风景图片1"},

        {id:2,src:"image/fj2.jpg",text:"风景图片2"},

        {id:3,src:"image/fj3.jpg",text:"风景图片3"},

        {id:4,src:"image/fj4.jpg",text:"风景图片4"},

        ]

    var info = document.getElementById("info")

    onload = function () {

        let doc=``

        for(d of data)

        {

            doc = doc +  `<div><img src="${d.src}" value="${d.id}" title="${d.text} "> </div>`

        }

        info.innerHTML = doc

    }

    var img = document.getElementsByTagName("img")[0]

    var text = document.getElementById("text")

    function change_img(e) {

        var id = parseInt(img.id)

        if(e == "next")

        {

            id += 1

        }else {

            id -= 1

        }

        if(id>4)

        {

            id=1

        }else if(id<1){

            id=4

        }

        try {

            img.setAttribute("src",data[id-1].src)

            text.innerText = data[id-1].text

            img.id = id

        }catch(e) {

            id = id - 1

        }

    }

</script>

</body>

</html>

效果：

注意：

图片是本地的

样式这些都可以自己定义。

这个在淘宝后台添加商品的时候添加的相册图片，每一个商品添加了几张图片，跳到详情页的时候根据这个商品的id取出相册中的图片并绑定显示。

页面效果需要用js，鼠标经过或者点击小图放大显示