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

推荐答案 2018-08-10

åèä»£ç ï¼

<!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: 1000px;height: 800px;margin: auto;">
    <div style="width: 700px;height: 500px;margin: auto;">
        <div style="width: 50px;height: 400px;float: left;text-align: center;">
            <span class="btn" onclick="change_img('last')"><</span>
        </div>
        <img id="1" src="image/fj1.jpg" class="img">
        <div style="width: 50px;height: 400px;float: left;text-align: center;">
            <span class="btn" onclick="change_img('next')">></span>
        </div>
        <div style="width: 700px;height: 100px;text-align: center;">
            <span>å¾çä»ç»ï¼</span>
            <span id="text">é£æ¯å¾ç1</span>
        </div>
    </div>
    <div id="info" style="width: 700px;height: 200px;margin: auto;text-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>

ææï¼