Jquery带缩略图轮播图,左右结构,可放大轮播图

最新推荐文章于 2024-06-01 15:21:11 发布
最新推荐文章于 2024-06-01 15:21:11 发布
阅读量319 收藏 2
点赞数 7
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmaqueshibei/article/details/137783470
版权 
<html>
<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Jquery带缩略图轮播图,左右结构,可放大轮播图</title>
</head>
<style type="text/css">
*{padding:0;margin:0;box-sizing:border-box;}
.bannerwarp{position:relative;display:flex;z-index:998;height:auto;text-align:center;justify-content:center;}
#banner{position:relative;width:800px;-ms-flex-negative:0;flex-shrink:0;background:#fff;-ms-flex-negative:0;flex-shrink:0;display:flex;}
.bannerwrap{width:800px;height:800px;overflow:hidden;}
#bannerlist{}
#bannerlist li{width:800px;height:800px;display:flex;align-items:center;justify-content:center;cursor:zoom-in;border:1px solid #ddd;}
#bannerlist li img{max-width:100%;max-height:100%;}
.btnwrap{text-align:center;overflow:hidden;position:relative;padding-right:20px;}
.small_box{width:145px;height:800px;overflow:hidden;}
.small_list{position:relative;width:140px;height:760px;overflow:hidden;}
.small_list ul{height:800px;overflow:hidden;width:140px;}
.small_list ul li{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:8px;width:120px;height:120px;padding:2px;border:1px solid #e6ecf2;cursor:pointer;}
.small_list ul li img{display:block;max-width:100%;max-height:100%;}
.small_list ul li.on{border-color:#ff7519;opacity:1;}
.small_list ul li.on:after{content:"";position:absolute;right:-6px;top:40%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #ff7519;}
.arrow{display:block;width:125px;height:20px;text-align:center;color:#fff;cursor:pointer;position:relative;}
#prev:after{content:'';position:absolute;left:40%;top:6px;width:16px;height:16px;border-right:4px solid #bbb;border-bottom:4px solid #bbb;transform:rotate(225deg);-webkit-transform:rotate(225deg);}
#next:after{content:'';position:absolute;left:40%;right:0;bottom:0;top:-8px;width:16px;height:16px;border-right:4px solid #bbb;border-bottom:4px solid #bbb;transform:rotate(45deg);-webkit-transform:rotate(45deg);}
.bignext,.bigprev{cursor:pointer;}
.bignext:after{content:'';position:absolute;right:80px;top:80px;width:40px;height:40px;border-left:2px solid #fff;border-bottom:2px solid #fff;-webkit-transform:rotate(-135deg);}
.bigprev:after{content:'';position:absolute;left:100px;top:80px;width:40px;height:40px;border-left:2px solid #fff;border-bottom:2px solid #fff;-webkit-transform:rotate(45deg);}
.bannerbigImg{max-width:94%;max-height:94%;}
.bannerbigImgwarp{width:100%;display:flex;align-items:center;justify-content:center;}
.bannerbigImgwarp img{max-width:100%;max-height:100%;}
#smallimg{display:flex;width:100%;margin:20px auto 0 auto;justify-content:center;}
#smallimg li{width:7%!important;height:100px!important;line-height:100px!important;margin-right:1%;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;padding:2px;position:relative;cursor:pointer;background:#fff;}
#smallimg li:last-child{margin-right:0;}
#smallimg li img{max-width:100%;max-height:100%;}
#smallimg li.on{border-color:#ff7519;opacity:1;}
#smallimg li.on:after{content:"";position:absolute;left:45%;top:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ff7519;}
.bannerclose{position:absolute;right:0;top:0;cursor:pointer;width:100px;height:100px;}
.bannerclose::before,.bannerclose::after{content:'';width:40px;height:2px;display:block;background-color:#ffffff;position:absolute;right:0;top:40px;}
.bannerclose::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
.bannerclose::before{transform:rotate(45deg);-webkit-transform:rotate(45deg);}
</style>

<body>
    <div class="bannerwarp" id="bannerwarp">
        <div class="btnwrap small_box">
            <a title="prev" href="javascript:;" id="prev" class="arrow prev" rel="nofollow"></a>
            <div class="small_list">
                <ul id="bannerbtn">
                    <li class="on"><img src="https://s21.ax1x.com/2024/04/15/pFv2daD.jpg" alt="pFv2daD.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2wIe.jpg" alt="pFv2wIe.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2NqK.jpg" alt="pFv2NqK.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2aVO.jpg" alt="pFv2aVO.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2tr6.jpg" alt="pFv2tr6.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2BPH.jpg" alt="pFv2BPH.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2daD.jpg" alt="pFv2daD.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2wIe.jpg" alt="pFv2wIe.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2NqK.jpg" alt="pFv2NqK.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2aVO.jpg" alt="pFv2aVO.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2tr6.jpg" alt="pFv2tr6.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2BPH.jpg" alt="pFv2BPH.jpg"></li>
                </ul>
            </div>
            <a title="next" href="javascript:;" id="next" class="arrow next" rel="nofollow"></a>
        </div>
        <div>
            <div id="banner" class="bannerwrap large_box">
                <ul id="bannerlist" style="left: 0;">
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2daD.jpg" alt="pFv2daD.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2wIe.jpg" alt="pFv2wIe.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2NqK.jpg" alt="pFv2NqK.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2aVO.jpg" alt="pFv2aVO.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2tr6.jpg" alt="pFv2tr6.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2BPH.jpg" alt="pFv2BPH.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2daD.jpg" alt="pFv2daD.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2wIe.jpg" alt="pFv2wIe.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2NqK.jpg" alt="pFv2NqK.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2aVO.jpg" alt="pFv2aVO.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2tr6.jpg" alt="pFv2tr6.jpg"></li>
                    <li><img src="https://s21.ax1x.com/2024/04/15/pFv2BPH.jpg" alt="pFv2BPH.jpg"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="gray" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;z-index:99999;"></div>
    <div class="showImg" style="position:absolute;top:0;left:10%;z-index: 999999;display: none;text-align:center;width:80%;">
        <span class="bigprev" style="position: absolute;left: 0;width: 200px;height: 200px;text-align: center;"></span>
        <span class="bignext" style="position: absolute;right: 0;width: 200px;height: 200px;text-align: center;"></span>
        <span class="bannerclose"></span>
        <div class="bannerbigImgwarp">
            <img src="#" style="border:5px solid #fff;" class="bannerbigImg">
        </div>
        <ul id="smallimg"></ul>
    </div>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
    <script type="text/javascript" src="js/carousel.min.js"></script>
    <script type="text/javascript">
    $(function() {
        //轮播
        $(".bannerwarp").thumbnailImg({
            large_elem: ".bannerwrap",
            small_elem: ".btnwrap",
            left_btn: ".prev",
            right_btn: ".next",
            autoplay: false,
            vis: 6
        });
    });
    //轮播图放大
    $("#bannerlist li").click(function() {
        $(document).scrollTop(0);
        unScroll();
        bannerindex = $(this).index();
        $(".gray").show();
        $(".showImg").show();
        bigSrc = $(this).children().attr("src");


        if ($("#bannerlist li").length > 1) {
            $(".bigprev").show();
            $(".bignext").show();
        } else {
            $(".bigprev").hide();
            $(".bignext").hide();
        }

        $(".showImg .bannerbigImg").attr("src", bigSrc).on('load', function() {
            var windowW = $(window).width();
            var windowH = $(window).height();
            var imgWidth, imgHeight;
            imgWidth = this.width;
            imgHeight = this.height;
            if ($("#bannerlist li").length > 1 && $("#smallimg").children().length < 1) {
                var html = $("#bannerbtn").html();
                $("#smallimg").append(html);
            } else {}
            var w = windowH - 140;

            $(".bannerbigImgwarp").height(w);
            var h = (windowH - w) / 2;
            $(".bigprev").css("top", $(".bannerbigImgwarp").height() / 2 - 50);
            $(".bignext").css("top", $(".bannerbigImgwarp").height() / 2 - 50);

            $(".showImg").css({
                "top": "20px"
            });

        });

    });
    $(".bannerclose").click(function() {
        $(".gray").hide();
        $(".showImg").hide();
        removeUnScroll();
    });
    $(".showImg .bignext").click(function() {
        bannerindex++;
        if (bannerindex > $("#bannerlist li").length - 1) {
            bannerindex = 0;
        }
        bigSrc = $("#bannerlist li").eq(bannerindex).children("img").attr("src");
        $(".showImg .bannerbigImg").attr("src", bigSrc);
        $("#smallimg li").eq(bannerindex).addClass("on");
        $("#smallimg li").eq(bannerindex).siblings().removeClass("on")
    });
    $(".showImg .bigprev").click(function() {
        bannerindex--;
        if (bannerindex < 0) {
            bannerindex = $("#bannerlist li").length - 1;
        }
        bigSrc = $("#bannerlist li").eq(bannerindex).children("img").attr("src");;
        $(".showImg .bannerbigImg").attr("src", bigSrc);
        $("#smallimg li").eq(bannerindex).addClass("on");
        $("#smallimg li").eq(bannerindex).siblings().removeClass("on")

    });
    $("#smallimg").on('click', 'li', function() {
        bannerindex = $(this).index();
        $(this).addClass("on");
        $(this).siblings().removeClass("on")
        bigSrc = $("#bannerlist li").eq(bannerindex).children("img").attr("src");
        $(".showImg .bannerbigImg").attr("src", bigSrc);
    });
    //禁止滚动条滚动
    function unScroll() {
        var top = 0;
        $(document).on('scroll.unable', function(e) {
            $(document).scrollTop(top);
        })
    }
    //移除禁止滚动条滚动
    function removeUnScroll() {
        $(document).unbind("scroll.unable");
    }
    </script>
</body>

</html>

效果图

carousel.min.js下载

链接: carousel.min.js 提取码: nhzz

masque0229
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
轮播图 带有缩略图
seb_lin666的博客
02-25 2423
设计给了个图 要求轮播带有 缩略图 选样式还要放大 如下图 在网上找了下没有有相似的 但还是与设计图有些差距 无奈 找了原来的代码 以此为基础 改呗 主要的还是缩略图的点击 放大 缩小 以及大于5时选中第5个小图时 整体滚动就是个小的轮播 无论是点击上一个、下一个、还是缩略图 当选中的缩略图为 第一个或第五个时（下图选中放大的为第三个） 做判断 第一个：获取当前元素前面有几个兄弟元素 如果大于等于...
图片轮播带缩略图
05-20
图片轮播 带缩略图
swiper缩略图轮播
最新发布
2401_83127745的博客
06-01 208
使用vue3+ts完成swiper缩略图的效果，起初以为这个swiper是一个组件就可以完成，但现实是两个swiper做了属性互调，官网上没有描述清楚缩略图是否可以轮播，导致走了很多弯路（获取上图的实例然后操作swiper使其完成走马灯的效果）2.在main.ts中引入他的css文件。3.在你所需的页面中引入。注：自己写的自动轮播效果。
html轮播带缩略图,基于JavaScript实现带缩略图的轮播效果
weixin_42508215的博客
06-20 694
先瞄一眼js轮播效果图代码：*{padding:0;margin:0;}#content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;}#title, #bottom{position:absolute;width:400px;...
漂亮带缩略图的图片轮播
weixin_30731287的博客
02-09 213
<style> BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; COLOR: #f6f6ee; MARGIN-RIGHT: auto; PADDING-TOP: 0px...
android 图片轮播带缩略图,轮播图 带有缩略图
weixin_29371981的博客
06-04 347
设计给了个图 要求轮播带有 缩略图 选样式还要放大 如下图在网上找了下没有有相似的 但还是与设计图有些差距 无奈找了原来的代码 以此为基础 改呗主要的还是缩略图的点击 放大 缩小 以及大于5时选中第5个小图时 整体滚动就是个小的轮播无论是点击上一个、下一个、还是缩略图 当选中的缩略图为 第一个或第五个时(下图选中放大的为第三个) 做判断第一个：获取当前元素前面有几个兄弟元素 如果大于等于4(之所以...
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
11-23
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果，常用的jQuery图片左右轮播效果，同时支持底部...
jQuery幻灯片带缩略图轮播效果代码分享
10-23
【jQuery幻灯片带缩略图轮播效果详解】 在网页设计中，幻灯片轮播是一种常见的元素，用于展示一组图片或内容，通常用于首页焦点图、产品展示等场景。jQuery作为一款轻量级的JavaScript库，因其简单易用的API而广泛...
jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)
02-26
本项目"jQuery左右滚动支持图片放大缩略图图片轮播代码"提供了一种高效的解决方案，包含了一个可直接使用的demo，下面我们将详细探讨这个轮播代码的关键知识点。 首先，jQuery的`.animate()`方法是实现左右滚动的...
轮播功能带缩略图可切换有下拉效果
03-31
在这个案例中，“轮播功能带缩略图可切换有下拉效果”指的是一个具有特定特性的轮播组件。 首先，"轮播"（Carousel）是指一种可以自动或手动循环播放内容的UI组件。它通常包括一组图片、视频或HTML元素，这些元素会...
右侧带缩略图图片轮播
11-21
右侧缩略图轮播。修改数据库连接，图片路径从数据库表中取出的。
jQuery图片轮播展示带文字带缩略图
05-23
文件目录： │ index.html │ ├─images │ 1.jpg │ 2.jpg │ 3.jpg │ 4.jpg │ 5.jpg │ ActionIcons10.png │ arrows_01.png │ arrows_02.png │ s1.jpg │ s2.jpg │ s3.jpg │ s4.jpg │ s5.jpg │ snext.png │ sprev.png │ Ynext.png │ Yprev.png │ ├─js │ jquery-1.7.1.min.js │ slides-1.1.1-min.js │ └─style style.css 效果是一个大的带有标题的图片轮播，右边是小图的列表，可以进行选择小图来切换大图。
带缩略图得轮播
01-20
效果很炫丽的一款轮播图，带左右箭头，带缩略图。
Vue框架使用swiper5实现带缩略图的轮播图
weixin_49600762的博客
12-20 4292
我这里用的是 "swiper": "5.4.5"和"vue-awesome-swiper": "^3.1.3"，很多人在这就会有疑问，这两版本不对应啊，不急，这就是我发这文章的意义，一是记录一下自己的坑，二是同道中人参考。我为啥不装对应的包呢，因为我这个项目前面写的人已经装了这个了，我不能改呀，改了别人的就会出错了。首先看效果图先，毕竟需求都是不一样的嘛，我发这个文章主要是看了一些网页上的好多都存在缩略图那里的高亮居中问题，所以本文章主要就是实现当前图片看到的一些效果。
jQuery带缩略图轮播图插件
ICode联盟
04-12 400
下载地址 很好用的jQuery轮播图插件，带缩略图当做索引，所有缩略图都排列在下方，点击缩略图即可切换到对应的图片；切换时有淡入淡出的效果，切换十分流畅。 dd:
html轮播带缩略图,js带缩略图的图片轮播效果代码分享
weixin_28782251的博客
06-20 968
本文实例讲述了js带缩略图的图片轮播效果。分享给大家供大家参考。具体如下：这是一款基于javaScript实现带缩略图的图片轮播特效代码，实现过程很简单。运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。在head区域引入CSS样式：为大家分享的JS带缩略图的5屏轮换焦点图特效代码如下J...
jQuery带缩略图轮播效果图片切换带缩略图
weixin_30357231的博客
12-31 1052
以上为效果图 HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel=stylesheet type=tex...
史上最炫jQuery图片转播轮盘，可以点击缩略图看大图，代码简洁易懂.....
找寻你的足迹123
04-16 1749
一：建立轮播div容器：
jQuery满屏图片切换轮播插件带缩略图
ICode联盟
02-28 277
下载地址 一款满屏左右滚动，带左右按钮，带缩略图，支持自动轮播的焦点图代码。 dd:
jquery手风琴图片轮播切换
05-19
jQuery手风琴图片轮播切换是一种常用的网页图片轮播效果，可以让网页内容更加生动，增强用户体验。手风琴效果是指在图片轮播时，当前图片会被放大，其他图片则会被压缩。以下是该效果的实现步骤： 1. HTML结构：创建一个包含所有图片的容器和一个包含所有小圆点的容器。 2. CSS样式：为容器和小圆点添加样式，设置图片的宽度、高度和位置。 3. JavaScript代码：实现图片轮播的逻辑。通过jQuery获取容器和小圆点，为小圆点添加点击事件，点击后切换到对应的图片，并给当前图片添加类名，其他图片则移除类名，实现手风琴效果。 以下是一个示例代码： HTML: ``` <div class="slider"> <div class="slider-wrapper"> <img src="img1.jpg" alt=""> <img src="img2.jpg" alt=""> <img src="img3.jpg" alt=""> </div> <div class="dots"> <span></span> <span></span> <span></span> </div> </div> ``` CSS: ``` .slider { width: 100%; height: 500px; position: relative; } .slider-wrapper { width: 100%; height: 100%; position: relative; } .slider-wrapper img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.5s ease-in-out; } .slider-wrapper img.active { transform: scale(1.2); } .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .dots span { display: inline-block; width: 10px; height: 10px; margin-right: 10px; background-color: #ccc; border-radius: 50%; cursor: pointer; } .dots span.active { background-color: #f00; } ``` JavaScript: ``` $(function(){ var $slider = $('.slider'), $wrapper = $('.slider-wrapper'), $imgs = $('.slider-wrapper img'), $dots = $('.dots span'), len = $imgs.length, index = 0; // 初始化 $imgs.eq(0).addClass('active'); $dots.eq(0).addClass('active'); // 点击事件 $dots.on('click', function(){ var idx = $(this).index(); if(idx !== index){ $imgs.eq(index).removeClass('active'); $dots.eq(index).removeClass('active'); $imgs.eq(idx).addClass('active'); $dots.eq(idx).addClass('active'); index = idx; } }); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值