js实现轮播图(点击小图片切换大图片+自动切换)

最新推荐文章于 2024-06-27 12:49:37 发布
最新推荐文章于 2024-06-27 12:49:37 发布
阅读量6.9k 收藏 82
点赞数 6
分类专栏： demo 文章标签： js js 轮播图 轮播图 js 轮播 消息轮播 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xue_LOR/article/details/107105062
版权

js实现轮播图(点击小图片切换大图片+自动切换)

实现效果如下：
点击小图可切换大图

点击小图切换大图和轮播标题，点击左右按钮大小图和轮播标题切换，鼠标进入清除定时器，鼠标移出恢复轮播

html代码如下：

<div class="switch fl" id="jsSwitch">
        <div class="switch-bottom">
            <div class="switch-l" >
                <img class="switch-img" id="jsSwitchL" src="images/lunbo-left.png" alt="">
            </div>
            <ul class="switch-list" id="jsSwitchList">
                <li class="switch-item active"><img class="switch-min" src="images/lunbo-1-min.png "></li>
                <li class="switch-item"><img class="switch-min" src="images/lunbo-2.png"></li>
                <li class="switch-item"><img class="switch-min" src="images/lunbo-3.png"></li>
                <li class="switch-item"><img class="switch-min" src="images/lunbo-4.png"></li>
                <li class="switch-item"><img class="switch-min" src="images/lunbo-5.png"></li>
            </ul>
            <div class="switch-r fr" >
                <img class="switch-img" id="jsSwitchR" src="images/lunbo-right.png"></img>
            </div>
        </div>
        <div class="switch-title">
            <p class="switch-info" id="jsSwitchInfo">北京市人民检察院第十五次代表大会召开</p>
        </div>
    </div>

关键部分，js代码：

var num = 0;
var arrUrl = ['images/lunbo-1.png', 'images/lunbo-2-max.png', 'images/lunbo-3-max.png', 'images/lunbo-4-max.png', 'images/lunbo-5-max.png'];
var img = document.getElementById('jsSwitch');
var li = document.getElementById('jsSwitchList').children;
var left = document.getElementById('jsSwitchL');
var right = document.getElementById('jsSwitchR');
var info = document.getElementById('jsSwitchInfo');
var timer = null;

//左右按钮
left.onclick = function(){
    num--;
    if (num == -1) {
        num = arrUrl.length - 1;
    }
    changeImg();
}
right.onclick = function(){
    num++;
    if (num == arrUrl.length) {
        num =  0;
    }
    changeImg();
}

setTimeout(autoplay(),1000);

//鼠标进入清除定时器，鼠标离开恢复
img.onmouseover = function(ev){
    clearInterval(timer);
};
img.onmouseout = autoplay;

//点击小图片 换大图片
for (var i = 0; i < li.length; i++){
    li[i].index = i;
    li[i].onclick = function (ev) {
        num = this.index;
        changeImg();
    }
}

//图片切换
function changeImg() {
    for (var i = 0; i < li.length; i++) {
    	//判断当前li是否包含active类
        if(li[i].classList.contains('active')){
            li[i].classList.remove('active');
        }
    }
    //修改小图背景
    li[num].classList.add('active');
    //修改大图
    var currentImg = arrUrl[num];
    img.style.background = "url("+currentImg+") no-repeat center";
    //修改轮播标题
    info.innerText = arrInfo[num];
}
//定时器
function autoplay() {
    timer = setInterval(function () {
        num++;
        num %= arrUrl.length;
        changeImg();
    },2000);
}

以下是轮播全部代码，加上css代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,html {
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
            font-family: "microsoft yahei";
            font-weight: normal;
        }
        ol, ul, li {
            list-style: none;
        }
        a {
            text-decoration: none;
            color: #fff;
        }
        img {
            display: block;
            border: none;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .switch {
            position: absolute;
            width: 566px;
            height: 302px;
            left: -283px;
            margin-top: 100px;
            margin-left: 50%;
            background: url(images/lunbo-1.png) no-repeat;
            background-size: 566px 302px;
        }
        .switch-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 66px;
            background: rgba(0,0,0,0.65);
        }
        .switch-l,
        .switch-r {
            width: 45px;
            height: 66px;
            display: table-cell;
            vertical-align: middle;
        }
        .switch-r {
            margin-top: -46px;
        }
        .switch-img {
            margin-left: 16px;
            cursor: pointer;
        }
        .switch-img {
            margin-left: 10px;
            cursor: pointer;
        }
        .switch-list {
            float: left;
            width: 475px;
            height: 66px;
            margin-top: -66px;
            margin-left: 45px;
        }
        .switch-item {
            float: left;
            width: 95px;
            height: 66px;
        }
        .active {
            background-color: #fff;
        }
        .switch-min {
            margin: 5px;
            cursor: pointer;
        }
        .switch-title {
            position: absolute;
            bottom: 66px;
            width: 100%;
            height: 36px;
            background: rgba(0,0,0,0.4);
        }
        .switch-info {
            margin-top: 10px;
            margin-left: 8px;
            font-size: 16px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="switch fl" id="jsSwitch">
        <div class="switch-bottom">
            <div class="switch-l" >
                <img class="switch-img" id="jsSwitchL" src="images/lunbo-left.png" alt="">
            </div>
            <ul class="switch-list" id="jsSwitchList">
                <li class="switch-item active"><img class="switch-min" src="images/lunbo-1-min.png "></li>
                <li class="switch-item"><img class="switch-min" src="images/lunbo-2.png"></li>
                <li class="switch-item"><img class="switch-min" src="images/lunbo-3.png"></li>
                <li class="switch-item"><img class="switch-min" src="images/lunbo-4.png"></li>
                <li class="switch-item"><img class="switch-min" src="images/lunbo-5.png"></li>
            </ul>
            <div class="switch-r fr" >
                <img class="switch-img" id="jsSwitchR" src="images/lunbo-right.png"></img>
            </div>
        </div>
        <div class="switch-title">
            <p class="switch-info" id="jsSwitchInfo">北京市人民检察院第十五次代表大会召开</p>
        </div>
    </div>

    <script src="jQuery.v1.11.1.min.js"></script>
    <script>
        var num = 0;
        var arrUrl = ['images/lunbo-1.png', 'images/lunbo-2-max.png', 'images/lunbo-3-max.png', 'images/lunbo-4-max.png', 'images/lunbo-5-max.png'];
        var arrInfo = ['北京市人民检察院第十五次代表大会召开','北京市人民检察院','北京市人民会召开','十五次代表大会召开','北京市人民大会召开']
        var img = document.getElementById('jsSwitch');
        var li = document.getElementById('jsSwitchList').children;
        var left = document.getElementById('jsSwitchL');
        var right = document.getElementById('jsSwitchR');
        var info = document.getElementById('jsSwitchInfo');
        var timer = null;

        //左右按钮
        left.onclick = function(){
            num--;
            if (num == -1) {
                num = arrUrl.length - 1;
            }
            changeImg();
        }
        right.onclick = function(){
            num++;
            if (num == arrUrl.length) {
                num =  0;
            }
            changeImg();
        }

        setTimeout(autoplay(),1000);

        //鼠标进入清除定时器，鼠标离开恢复
        img.onmouseover = function(ev){
            clearInterval(timer);
        };
        img.onmouseout = autoplay;

        //点击小图片 换大图片
        for (var i = 0; i < li.length; i++){
            li[i].index = i;
            li[i].onclick = function (ev) {
                num = this.index;
                changeImg();
            }
        }

        //图片切换
        function changeImg() {
            for (var i = 0; i < li.length; i++) {
                //判断当前li是否包含active类
                if(li[i].classList.contains('active')){
                    li[i].classList.remove('active');
                }
            }
            //修改小图背景
            li[num].classList.add('active');
            //修改大图
            var currentImg = arrUrl[num];
            img.style.background = "url("+currentImg+") no-repeat center";
            //修改轮播标题
            info.innerText = arrInfo[num];
        }
        //定时器
        function autoplay() {
            timer = setInterval(function () {
                num++;
                num %= arrUrl.length;
                changeImg();
            },2000);
        }
    </script>
</body>
</html>
雪儿姐姐
关注
  • 6
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jquery小图片左右滚动点击小图切换显示上面大图
12-10
jquery小图片左右滚动点击小图切换显示大图
jquery小图片左右滚动点击小图切换显示大图
06-09
在网页设计中，jQuery是一种广泛使用的...以上就是“jquery小图片左右滚动点击小图切换显示大图”项目所涉及的主要技术点，通过实践这个项目，开发者不仅可以深化对jQuery的理解，还能提升网页动态效果的实现能力。
Jquery 点击图片在弹出层显示大图
热门推荐
wongwaidah的专栏
06-04 2万+
使用jquery， 实现点击图片在弹出层显示大图，再次点击关闭，加入图片高宽和窗口高宽的大小判断。
JavaScript的学习之图片的切换
最新发布
人生苦短
06-27 830
这节的JS图片切换的学习就告一段落！添加JS代码，让它实现图片切换的功能。点击按钮可以切换上一张和下一张。随便去网上找几张图片素材。
用js实现点击切换+自动切换的轮播图
Free_Ya的博客
02-15 6788
用js实现点击切换+自动切换的轮播图 之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能。那么这些功能用js该如何实现呢？我们一起来看下吧！ (ps:博主在用js写轮播图的过程中,在网上查阅了很多篇文章,但是没有一篇是博主能彻底理解的[笨蛋QAQ]，所以这篇博客用来帮助像博主一样没有头绪,看不懂网上部分教程的伙伴)。 首先我们要明白轮播图的滑动原理,假设我们有装着3张图片的大盒子pic,那么我们可以采用定位或者浮动让这3张图片横向排成一排,那么大家想一想我们是不是
javascript 实现图片轮播和点击切换功能
dianliao7817的博客
11-07 1820
图片轮播是网页上一个比较常见的功能，下面我们来实现他吧 原理很简单： 1：固定的区域，所有的图片重叠，一次只能显示一张图片 2：通过改变图片的zIndex属性改变显示的图片，就可以达到切换的效果了 <!-- cycle_pic.html --> <!DOCTYPE html> <html> <head> <...
js实现图片轮播，以及鼠标悬浮到图片时图片放大
W_SSNY的博客
08-14 5319
图片轮播： HTML代码： &lt;!-- 图片轮播 --&gt; &lt;div class="h-img"&gt; &lt;ul class="pic"&gt; &lt;li&gt;&lt;img class="bg" src="images/h1.jpg"&gt;&lt;/li&gt;
点击小图对应的大图在上面展示图片轮播效果
11-13
为了实现点击小图显示大图的效果，我们需要用到JavaScript或者jQuery。当用户点击某个缩略图时，触发事件监听器，更新大图的源（src）属性为对应的大图URL，并可能调整其显示样式，如显示隐藏的过渡效果。同时，可能...
JS特效实现图片自动播放并可控的效果
10-23
这意味着图片轮播器不仅可以在设定的时间间隔内自动切换显示图片，而且用户可以通过交互操作，如点击按钮或鼠标悬停来控制图片的播放。 首先，我们要了解实现图片自动播放并可控的效果，需要用到的基本技术有HTML、...
基于JavaScript实现带缩略图的轮播效果
10-20
轮播图的切换，通常是通过改变图片元素的`src`属性来实现的，从而达到图片切换的效果。对于缩略图部分，点击不同的缩略图时，需要将对应的主要图片切换到可视状态，并且更新轮播图的标题。这通常涉及到在JavaScript...
jQuery点击小图控制大图切换代码
04-08
本项目“jQuery点击小图控制大图切换代码”是针对图片展示的一个功能实现，特别适用于产品展示或者相册浏览等场景。下面将详细阐述这个功能的核心知识点及其工作原理。 1. **jQuery基础**： - jQuery库简化了...
jquery实现点击图片在弹出层显示大图
09-28
jquery实现点击图片在弹出层显示大图,再次点击还原图片真实大小
js实现点击图片在屏幕中间弹出放大效果
10-16
主要介绍了js实现点击图片在屏幕中间弹出放大效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
点击图片弹出大图
12-17
JS点击图片弹出大图,JS弹出图片 非常好用
原生js图片画廊组件之点击小图弹出大图并可左右切换
06-07
原生js写的点击小图列表中的任意小图可弹出对应的大图，并支持点击左右按钮切换大图，也支持设置是否显示大图的分页控件。
jQuery实现点击小图弹出全屏预览大图效果
11-26
jQuery实现点击小图弹出全屏预览大图效果，超强例子，超级简单。
js实现点击预览放大图片
百变鹏仔工作室
01-25 2330
然后，将该元素添加到文档中，并设置其最大宽度为 100%，以实现图片的放大效果。同时，还添加了一个窗口的。应替换为实际的图片路径。另外，这只是一个简单的示例，具体实现可能需要根据你的项目需求进行调整。在 JavaScript 中，要实现点击预览放大图片的效果，首先需要确保你的。事件监听器，以便在窗口大小改变时自动调整放大图片的大小。中已经包含了图片元素，并且为其添加了唯一的。元素，并将其src 属性设置为被点击图片的。上述代码中，当点击图片时，会创建一个新的。请注意，上述示例中的。
纯JS写的轮播图！（有自动轮播，手动左右点击，点击小点切换图片）
qq_36205941的博客
12-05 1393
图片宽为340px，高为490px，，，当时写的时候把代码写死了，只支持这个的大小的图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
JS实现小图放大轮播效果
weixin_33885253的博客
12-14 1153
JS实现小图放大轮播页面效果入下（图片为优行商旅页面照片）： 实现效果：图片自动轮播，鼠标移入停止，移出继续轮播点击下方小图可以实现切换 步骤一：建立HTML布局，具体如下： <body> <div id="carousel" class="carousel" onmouseover="stop()" onmouseout="again()"&gt...
js实现轮播图条件为：1、自动切换 图片 2、鼠标移入右侧的图片 左边切换到对应的图片 鼠标移出 以当前的图片 自动继续切换图片 3、当前显示的小图片 透明度为1 其他没有显示的保证透明度为0.5
07-14
你可以使用JavaScript来实现这个轮播图的条件。首先，你需要一个包含要轮播的图片的数组，然后使用定时器来自动切换图片。你还需要为右侧的图片添加鼠标移入和移出事件，以便在鼠标移入时切换到对应的图片，并在鼠标移出时恢复自动切换。最后，你需要设置当前显示的小图片的透明度为1，其他没有显示的小图片的透明度为0.5。 以下是一个示例的JavaScript代码实现： ```javascript // 获取图片元素和小图片元素 var images = document.querySelectorAll('.slideshow img'); var thumbs = document.querySelectorAll('.thumbnail img'); // 初始化索引和定时器 var currentIndex = 0; var timer; // 自动切换图片 function autoSlide() { // 切换到下一张图片 currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); } // 显示指定索引的图片 function showImage(index) { // 隐藏所有图片和小图片 for (var i = 0; i < images.length; i++) { images[i].style.display = 'none'; thumbs[i].style.opacity = '0.5'; } // 显示当前图片和小图片 images[index].style.display = 'block'; thumbs[index].style.opacity = '1'; } // 鼠标移入右侧的图片时切换到对应的图片 for (var i = 0; i < thumbs.length; i++) { thumbs[i].addEventListener('mouseover', function(e) { // 获取当前图片的索引 var targetIndex = Array.from(thumbs).indexOf(e.target); showImage(targetIndex); }); } // 鼠标移出时恢复自动切换 for (var i = 0; i < thumbs.length; i++) { thumbs[i].addEventListener('mouseout', function() { startAutoSlide(); }); } // 开始自动切换 function startAutoSlide() { timer = setInterval(autoSlide, 2000); } // 初始化轮播图 startAutoSlide(); ``` 在上述代码中，你需要将 `.slideshow` 替换为包含轮播图片的容器的选择器，将 `.thumbnail` 替换为包含小图片的容器的选择器。此外，你还需要确保HTML中正确引入了JavaScript文件，并在页面加载时执行初始化轮播图的代码。 希望这能帮到你！如果你有任何其他问题，请随时问我。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值