swiper轮播，小轮播图，点击变大轮播图（小图变大图）

主要用的是swiper，pc，app都适用，根据实际需要，添加或者删除一些东西

其中必须：swiper.css，swiper.js，jquery.js，几张图片

接下来贴入代码结构html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>放大轮播</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <!-- Link Swiper‘s CSS -->
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/index.css">

  <!-- Demo styles -->
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(./image/ao1.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao3.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao5.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao6.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao7.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao8.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao9.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao10.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao11.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao22.jpg)"></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="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(./image/ao1.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao3.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao5.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao6.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao7.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao8.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao9.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao10.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao11.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./image/ao22.jpg)"></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="swiper-big">
    <div class="swiper-big-bg"></div>
    <div class="close">Χ?</div>
    <div class="auto-size">
      <div class="swiper-container gallery-top2">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="background-image:url(./image/ao1.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao3.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao5.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao6.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao7.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao8.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao9.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao10.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao11.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./image/ao22.jpg)"></div>

        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
      </div>
    </div>
    <div class="tab">
      <div class="tab-item tab-item-active" data-index="0">车身外观(10)</div>
      <div class="tab-item" data-index="6">中控内饰(13)</div>
      <div class="tab-item" data-index="10">发动机底盘(7)</div>
    </div>
    <div class="swiper-container gallery-thumbs2">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(./image/ao1.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao3.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao5.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao6.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao7.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao8.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao9.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao10.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao11.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./image/ao22.jpg)"></div>
      </div>

      <!-- Add Arrows -->
      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="./js/jquery.js"></script>
  <script src="./js/swiper.min.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>

接下来是css部分

html, body {
    position: relative;
    height: 100%;
}
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 510px;
    height: 342px;
}
.swiper-slide {
    background-size: cover;
    background-position: center;
}

.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-big
{
    opacity:0;
}
.swiper-big-active
{
    display:block !important;
    opacity:1 !important;
}

.swiper-big
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    z-index:9999999;
}
.swiper-big-bg
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.65);
}
.swiper-container
{
    margin: unset;
}
.swiper-big .swiper-container
{
    margin: auto;
    width:80%;
    height:100%;

}

.gallery-thumbs2 {
    height: 100px !important;
    box-sizing: border-box;
    padding: 10px 0;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
.gallery-thumbs2 .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}
.gallery-thumbs2 .swiper-slide-thumb-active {
    opacity: 1;
}
.auto-size
{
    width:100%;
    height:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom:180px;
    padding-top: 50px;
    position:absolute;
    top:0;
}
.swiper-big .close
{
    width:40px;
    height:40px;
    border-radius:50%;
    color:white;
    line-height: 40px;
    text-align: center;
    background-color: rgba(0,0,0,.8);
    position:absolute;
    right:30px;
    top:30px;
    cursor:pointer;
    z-index: 99999999;
}

.tab
{
    height:50px;
    width:80%;
    position:absolute;
    bottom:100px;
    left:0;
    right:0;
    margin:auto;
}
.tab .tab-item
{
    width:33.3%;
    float:left;
    text-align: center;
    height:100%;
    line-height: 50px;
    color:#a5abb2;
    cursor:pointer;
}
.tab .tab-item-active
{
    color:#22ac38;
}

接下来是js部分

//初始化轮播
var galleryTop2=null,
    galleryThumbs2=null,
    galleryTop2=null;
var galleryThumbs = new Swiper(‘.gallery-thumbs‘, {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    navigation: {
        nextEl: ‘.swiper-button-next‘,
        prevEl: ‘.swiper-button-prev‘,
    },
});
var galleryTop = new Swiper(‘.gallery-top‘, {
    spaceBetween: 10,
    navigation: {
        nextEl: ‘.swiper-button-next‘,
        prevEl: ‘.swiper-button-prev‘,
    },
    on:{
        click: function(ev){
            var target=$(ev.target)
            console.log(target)
            var activeIndex=$(target).index();
            if(target.hasClass("swiper-slide"))
                $(".swiper-big").addClass("swiper-big-active");

            galleryTop2.slideTo(activeIndex);
        },
    },
    thumbs: {
        swiper: galleryThumbs
    }
});

//放大
galleryThumbs2 = new Swiper(‘.gallery-thumbs2‘, {
    spaceBetween: 10,
    slidesPerView: 6,
    freeMode: true,
    navigation: {
        nextEl: ‘.swiper-button-next‘,
        prevEl: ‘.swiper-button-prev‘,
    },
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
});
galleryTop2 = new Swiper(‘.gallery-top2‘, {
    spaceBetween: 10,
    navigation: {
        nextEl: ‘.swiper-button-next‘,
        prevEl: ‘.swiper-button-prev‘,
    },
    thumbs: {
        swiper: galleryThumbs2
    }
});

setTimeout(function(){
    $(".swiper-big").hide();
},1000)

$(".close").on("click",function(){
    $(".swiper-big").removeClass("swiper-big-active");
})
$(".tab .tab-item").on("click",function()
{
    $(".tab .tab-item").removeClass("tab-item-active");
    $(this).addClass("tab-item-active");
    var index=$(this).attr("data-index");
    galleryTop2.slideTo(parseInt(index));
    galleryThumbs2.slideTo(parseInt(index));
})

$(".auto-size").on("click",function(){
    $(".swiper-big").removeClass("swiper-big-active");
})
$(".gallery-top2").click(function(e)
{
    e.stopPropagation()
})

效果大致是这样的

以供参考

原文地址：https://www.cnblogs.com/wuzhaoyu/p/12175359.html

时间： 2024-08-11 07:34:25

swiper轮播，小轮播图，点击变大轮播图（小图变大图）的相关文章

轮播图点击手势代码

#import "HotNewsTableViewController.h" #import "HotNewsTableViewCell.h" #import "HotNews.h" #import "JudegNetWorkType.h" #import "HotNewsDetailViewController.h" #import "MJRefresh.h" #import &quo

微信电脑版微信1.1 for Windows更新可@人/转发撤回消息/可播小视频

微信电脑版微信1.1 for Windows发布更新了,版本号为1.1.0.18,群聊可@人/可转发撤回消息/可播小视频,功能越来越接近微信手机版了. 本次更新的一些新特点: 群聊中可以@人. 消息可以转发. 2分钟内发出的消息可以撤回. 可播放收到的小视频. 微信电脑版微信1.1 for Windows这次更新幅度不小,可以更愉快地在电脑上聊天了查看之前版本有什么特性:微信电脑版-微信for windows客户端发布

netty的Udp单播、组播、广播实例+Java的Udp单播、组播、广播实例

网络上缺乏netty的udp的单播.组播案例,经过一番学习总结之后终于把这两个案例调通,下面把这两个案例的代码放在这里分享一下. 首先推荐博文: http://colobu.com/2014/10/21/udp-and-unicast-multicast-broadcast-anycast/#Netty%E4%B8%8E%E5%8D%95%E6%92%AD%EF%BC%8C%E7%BB%84%E6%92%AD netty的Udp单播.组播.广播实例+Java的Udp单播.组播.广播实例, 这些代

播下一个行动，收获一种习惯；播下一种习惯，收获一种性格；

播下一个行动,收获一种习惯:播下一种习惯,收获一种性格:播下一种性格,收获一种命运.思想会变成语言,语言会变成行动,行动会变成习惯,习惯会变成性格.性格会影响人生! 习惯不加以抑制,会变成生活的必需品,不良的习惯随时改变人生走向.人往往难以改变习惯,因为造习惯的就是自己,结果人又成为习惯的奴隶! 人生重要的不是你从哪里来,而是你到哪里去.当你在埋头工作的时侯,一定要抬头看看你去的方向.方向不对,努力白费! 你来自何处并不重要,重要的是你要去往何方,人生最重要的不是所站的位置,而是所去的方向.人只

电商干货！1000万烧出来的高点击率钻展创意图十大原则（营销&人性）

梦想凯歌:创意图的钻展的灵魂,没有创意图你什么都不是.无论是日常推广还是做大促活动,创意图是测试的重中之重,一定要提前测试好每一个资源位的创意图.今天这篇好文是一个资深电商设计师在操作钻展烧了1000多万后总结的经验,不少技巧可以用在Banner设计上. 创意图是你获取流量的入口,由创意图延升到落地页,进而是整一个活动项目. 所以,这节课很关键,也是我这系列课程的重点.到目前操作钻展也至少烧了1000多万了. 很多朋友常常发图片给梦想凯歌,问如何优化?这十大原则是我梦想凯歌做创意图的总结! 虽然

详解算法的各种复杂度的差别有多大（带图）

做算法分析的时候经常用到各种时间复杂度如O(n), O(logn), O(nlogn), O(n^2), ... 它们之间到底有多大的差别呢?下面这张图是一个直观的表达: 可见,各个常用的时间复杂度之间都存在着巨大的差异.从O(nlogn)到O(n),从O(n)到O(logn),都是性能上的巨大飞跃. 从另一个角度而言,大于O(n^2)或O(n^3)时间复杂度的程序实际上都是不可用的.根据维基百科,现在最强的CPU每秒大概可执行428亿条指令(4*10^10),而对于一个O(2^n)的程序,当n

js之图片变大变小效果

1.当鼠标移到图片上,图片变大:当鼠标移出图片,图片变小,效果如图: 2.原理不难,就是鼠标over时,设置一个定时器,让图片逐渐变大,鼠标out时同理,看下最初的简略代码你就会明白: <!DOCTYPE html> <html> <head> <style type="text/css"> div { width: 200px; /* 宽度 */ height: 100px; /*

扩大小按钮的事件点击范围

我们在平时的实战开发过程中经常会碰到这样的一些需求,我们要点击一个小按钮弹出一个DialogFragment或者点击之后跳转到另外一个界面上去,我们发现由于按钮太小了不容易点击,这样的体验非常不好,怎么办? 效果图很多长人肯定会说给View加个Padding就行了嘛,是的这样可以解决问题,但是你有没有想过如果该View有背景图,结果你加了个Padding ,View的背景图变形了,这种情况下通过加Padding加大点击范围的方案就行不通了,如何破解?其实很简单,稍微懂点脑筋就把这个问题解决了,

0065 animation：动画、动画序列、动画常见属性、动画简写方式、速度曲线细节、案例大数据热点图、案例奔跑的熊大

什么是动画动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果动画的基本使用先定义动画在调用定义好的动画语法格式(定义动画) /* keyframes: 关键帧 */ @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } } 语法格式(使用动画) div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animati