js代码炫酷特效模板（鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片）

本文目录

• 鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片
• 求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码

鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片

代码有bug，修改后如下：

需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg    大图片.jpg

效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。

问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!

《!doctype html》
《html》
《head》
《meta charset=utf-8》
《/head》
《body》
你要显示特效的html  
《img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" /》
《div style="width:200px;height:80px;border:1px solide #aaccff;display:none;" id="divHover" 》
大图片显示如下
《img src="大图片.jpg" width="500px" height="300px" id="bigimg" /》
《/div》
《script type="text/javascript"》
let divHover = document.getElementById("divHover");
        function hoverShowDiv() {
        console.log("显示大图片");
            divHover.style.display = "block";
            divHover.style.top = document.getElementById("littleimg").style.top + 10;
            divHover.style.left = document.getElementById("littleimg").style.left + 10;
        }
        function hoverHiddendiv() {
        console.log("显示小图片");
            divHover.style.display = "none";
        }
《/script》
《/body》
《/html》

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

参考代码：

《!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");
    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.src);
            text.innerText = data.text;
            img.id = id;
        }catch(e) {
            id = id - 1;
        }
    }
《/script》
《/body》
《/html》

效果：

注意：

图片是本地的

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