js实现图片滚动以及点击切换效果

最新推荐文章于 2025-04-09 15:48:38 发布

敲代码神器

最新推荐文章于 2025-04-09 15:48:38 发布

阅读量2.8k

点赞数 3

文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/weixin_52657749/article/details/115838284

版权

本文介绍了一种使用JavaScript实现的图片自动滚动效果，鼠标悬停时滚动暂停，点击图片可以切换展示并放大显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js可以实现多张图片自动滚动的效果，且鼠标移上去则会停止移动，鼠标移开则会继续滚动，点击滚动中的某一张图片则会实现从另外一个地方显示（放大，且鼠标移上去会放大）的效果。

点击链接查看效果：http://www.1833233.com/effect/picture/InterestHobby.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z4hk3Bke-1618745784345)(http://www.1833233.com/wp-content/uploads/2021/04/image-14-1024x681.png)]

点击图中“查看图片”按钮，则会出现按钮下方的一张图片的显示，点击右侧滚动的图片则可以将中心显示的图片换掉。

html主要代码：

div class="interest clearfix">
<span class="checkPic"> 
        <input type="button" value="查看图片" class="input Js-pic">
</span>
 <span class="image Js-img"><img src="images/qiqi.jpg" alt="" class="mainImg"></span>
</div>
    <div class="animation">
        <ul class="Js-pic-right">
            <li class="boniu"><img src="images/boniu.jpg" alt=""></li>
            <li class="duolaAmeng"><img src="images/duolaAmeng.jpg" alt=""></li>
            <li class="haimianbaby"><img src="images/haimianbaby.jpg" alt=""></li>
            <li class="qiqi"><img src="images/qiqi.jpg" alt=""></li>
        </ul>
    </div>
    <script src="js/drawpicture.js"></script>

这一段则是图片的显示代码。

js实现滚动及点击切换代码如下：

var picNode = document.querySelector(".Js-pic");
var imgNode = document.querySelector(".Js-img");
var animationNode = document.querySelector(".animation");
var ulNode = animationNode.querySelector(".Js-pic-right");
var lisNode = animationNode.getElementsByTagName('li'); //动态
//var lisNode = animationNode.querySelectorAll("li");//静态
var mainImgNode = document.querySelector('.mainImg');
var boniu = document.querySelector('.boniu');
var duolaAmeng = document.querySelector('.duolaAmeng');
var haimianbaby = document.querySelector('.haimianbaby');
var qiqi = document.querySelector('.qiqi');
var moveDo;
var moveNum;
var count = 0;
picNode.onclick = function() { //判断按钮点击次数，奇数次为显示图片，偶数次为关闭图片显示
    if ((count + 2) % 2 == 0) {
        imgNode.style.display = 'block';
        //ulNode.style.display = 'block';
        count++;
    } else {
        imgNode.style.display = 'none';
        count++;

    }
    //	picNode.disabled=true;
}
boniu.onclick = function() { //点击右侧滚动的图片时，进行中心图片的调换
    mainImgNode.src = 'images/boniu.jpg';
    mainImgNode.style.marginTop = "5px";
}
duolaAmeng.onclick = function() {
    mainImgNode.src = 'images/duolaAmeng.jpg';
    mainImgNode.style.marginTop = "5px";
}
haimianbaby.onclick = function() {
    mainImgNode.src = 'images/haimianbaby.jpg';
    mainImgNode.style.marginTop = "5px";
}
qiqi.onclick = function() {
    mainImgNode.src = 'images/qiqi.jpg';
    mainImgNode.style.marginTop = "190px";
}

function animationFun(num) { //实现滚动的函数
    num += 2;
    if (num <= 180) { //180px为第一张图片部与第二张图上部的距离
        lisNode[0].style.marginTop = (0 - num) + "px";
        moveNum = num; //记录此时的num，鼠标悬停之后再次开始滚动的num
        moveDo = window.setTimeout(function() {
            animationFun(num);
        }, 10);
    } else { //如果第一张图片滚动到刚好看不到的位置，那就把第一张图片放到最后，并且将其上边距为0px
        ulNode.appendChild(lisNode[0]); //appendChild方法是向ulNode节点的子节点末尾添加lisNode[0]节点
        //由于，该节点已经在ulNode的子节点中存在，则原来存在的lisNode[0]节点会被删掉
        lisNode[lisNode.length - 1].style.marginTop = "0px";
        // console.log(lisNode.length);
        animationFun(0);
    }
}
animationFun(0);
animationNode.onmouseover = function() { //暂停，其实是清掉了延迟触发方法
    clearTimeout(moveDo);
}
animationNode.onmouseout = function() { //在记录的移动位置再次触发移动
    animationFun(moveNum);
}

鼠标移入中心图片放大效果，则是通过css实现：

.image img:hover {
    transform: scale(1.1);
}