jquery实现简单的swiper轮播预览原图

2024-10-05 18:12:48

本文实例为大家分享了jquery实现简单的swiper轮播预览原图的具体代码，供大家参考，具体内容如下

最近项目中用到的一个效果，简单记录一下

效果图：

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>swiper+jq实现预览原图效果</title>
        <!-- 引入swiper样式 -->
        <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
        
        <style type="text/css">
            .swiper1 {
                width: 80%;
            }
            .img-popup {
                display: none;
            }
            .img-popup .shade {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background-color: rgba(0,0,0,.6);
                z-index: 998;
            }
            .img-popup .img-big {
                position: fixed;
                top: 50%;
                left: 50%;
                max-width: 100%;
                z-index: 999;
                transform: translate(-50%, -50%);
            }
        </style>
        
    </head>
    
    <body>
    
        <div class="swiper-container swiper1" >
            <div class="swiper-wrapper">
                <!-- data-img 可随意定义 -->
                <!-- ps：这样写是为了防止jq给img加点击事件有时无效的情况，但不知道什么原因造成的，欢迎大佬指点 -->
                <div data-img="img/banner.png" class="swiper-slide imgTap">
                    <img src="img/banner.png" alt="" width="100%" >
                </div>
                <div data-img="img/banner2.png" class="swiper-slide imgTap">
                    <img src="img/banner2.png" alt="" width="100%">
                </div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        
        <!-- 高度占位 -->
        <div class="height_test" style="height: 2000px;"></div>
    
        <!-- 原图弹窗 -->
        <div class="img-popup">
            <div class="shade"></div>
            <div class="img-box"><img src="" class="img-big"></div>
        </div>
        
    </body>

    <!-- 引入jquery和swiper js -->
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        // banner切换
        var swiper = new Swiper('.swiper1', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 自动轮播
            autoplay: {
                // 自动切换的时间间隔，单位ms
                delay: 3000,
                // 用户触摸停止
                disableOnInteraction: true,
            },
            //滚动切换的时间间隔
            speed: 1000,
            //设置slider容器能够同时显示的slides数量(carousel模式)
            slidesPerView: 1,
            // 在slide之间设置距离（单位px）。
            spaceBetween: 0,
            // 无限循环
            loop: true,
        });
        
        $(function() {
            $('.imgTap').click(function () {
                //显示弹窗
                $('.img-popup').show()
                //获取图片路径
                var img_src = $(this).attr("data-img")
                console.log(img_src)
                //赋值获取的路径给弹窗的img标签
                $('.img-big').attr("src" ,img_src);
                //禁止滚动
                $("body").css("overflow","hidden")
            })
            $('.img-popup .shade').click(function () {
                //隐藏弹窗
                $('.img-popup').hide()
                //允许滚动
                $("body").css("overflow","initial")
            })
        })
    </script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jquery实现左右无缝轮播图

本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p
jQuery图片轮播的具体实现

效果如下: 先看一看html代码,以及对应的css代码: 复制代码代码如下: <div id="scrollPics"> <ul class="slider" > <li><img src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif"/>&
jquery实现定时自动轮播特效

这次的轮播图是在上一篇文章jQuery手动点击实现图片轮播特效的基础上写出来的,也就是本次展示的是手动点击轮播效果以及定时自动轮播效果的程序,建议想连贯学习的小伙伴把我之前的文章看一看,看完后再看这篇文章~~~~ 下面来看看我做的最终定时自动轮播效果以及手动点击轮播效果: 对于上面的展示动画速度比较快的原因是因为我的截图软件是绿色版,免费的~~~你们懂得,就是卡卡的,真正的效果比这个速度慢,而且还是匀速,可以商用~~~所以上面的展示动画只能当做完成效果的参考. 一.主体程序 <!DOCTYPE
原生js和jquery实现图片轮播淡入淡出效果

图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
基于JQuery的实现图片轮播效果(焦点图)

完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu
利用jquery写的左右轮播图特效

最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的将jquery框架的链接跟图片替换就可以看到效果了源代码如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
jquery 实现轮播图详解及实例代码

轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea
12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓ 16个独特的过渡效果
Jquery代码实现图片轮播效果（一）

文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示下载源码首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播

jquery实现简单的swiper轮播预览原图

相关推荐

随机推荐