循环切换图片加个淡入淡出效果 求解

[qq_41730597]

下面代码实现了鼠标移入每个img 会 切换成 对应的img，现在我想加入切换时淡出淡出的效果 求解大神



<div class="box">
<img src="images/4.jpg" alt=""class="hoverchange">

</div>
<div class="box">
<img src="images/5.jpg" alt=""class="hoverchange">

</div>
<div class="box">
<img src="images/6.jpg" alt=""class="hoverchange">
</div>
<script>
var cimg = [ "1.jpg","2.jpg","3.jpg"];
var ximg = [ "4.jpg","5.jpg","6.jpg"]

$(".hoverchange").mouseover(function () {
var index = $(".hoverchange").index(this)
$(".hoverchange").eq(index).attr("src",cimg[index])
});
$(".hoverchange").mouseleave(function () {
var index = $(".hoverchange").index(this)
$(".hoverchange").eq(index).attr("src",ximg[index])
});

</script>

[面向百度编程cv]

过度动画。。。。。

[chinaskysun]

直接修改img的src属性无法实现你说的效果 给你一个css版的演示

<style type="text/css">
    .box:hover>.tt {
        opacity: 1
    }

    .box{
        position: relative;
    }

    .box:hover>.tt {
        opacity: 1
    }
    
    .hoverchange {
        width: 100px;
        height: 100px;
        background-color:brown;
    }

    .tt {
        position: absolute;
        top: 0;
        opacity: 0;
        transition: opacity 2s;
        background-color: red;
    }
</style>

<div class="box">
    <div class="hoverchange"></div>
    <div class="hoverchange tt"></div>
</div>
<div class="box">
    <div class="hoverchange"></div>
    <div class="hoverchange tt"></div>
</div>
<div class="box">
    <div class="hoverchange"></div>
    <div class="hoverchange tt"></div>
</div>

[浴火_凤凰]

jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 把你的改一改试试