精华内容
下载资源
问答
  • 原生js实现Swiper功能

    2020-09-28 22:04:40
    原生js实现Swiper功能 主要使用html,css,js来完成 首要的HTML部分: 1、.slide滑槽,里面存放所有图片; 2、.prev是向左的箭头,.next是向右的箭头; 3、pointer是指示器,用于放的五个切换按钮,每个切换按钮用...

    原生js实现Swiper功能

    主要使用html,css,js来完成
    

    首要的HTML部分:
    1、.slide滑槽,里面存放所有图片;
    2、.prev是向左的箭头,.next是向右的箭头;
    3、pointer是指示器,用于放的五个切换按钮,每个切换按钮用span来表示;
    其次呢,css部分
    1、.slide、.prev、.next、pointer全都用绝对定位放到合适位置;
    2、.slide的所有图片水平排列
    js部分
    1、切换功能:
    设置 nextEl: ‘.swiper-button-next’,
    prevEl: ‘.swiper-button-prev’,
    2、切换功能的淡入动画效果
    effect: ‘fade’,
    3、跳转功能
    clickable: true,
    4、自动播放
    autoPlay:true

    代码:
    
    <template>
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide" :key="banner" v-for="banner in banners">
            <img :src="banner" />
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      </div>
    </template>
    <script>
    export default {
      components: {},
    
      data() {
        return {
          banners: [
            "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg",
            "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg",
            "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg"
          ],
          swiperOption: {
            // autoplay: true,
            // loop: true,
            pagination: {
              el: ".swiper-pagination"
            },
            // mousewheel: true,
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev"
            },
             }
        };
      },
      mounted() {
        console.log("Current Swiper instance object", this.mySwiper);
        // this.mySwiper.slideNext();
      }
    };
    </script> 
    <style lang="scss">
    	import {
    	  Swiper as SwiperClass,
    	  Pagination,
    	  Mousewheel,
    	  Autoplay,
    	  Navigation,
    	} from "swiper/core";
    	import getAwesomeSwiper from "vue-awesome-swiper/dist/exporter";
    	import 'swiper/swiper-bundle.css'
    	SwiperClass.use([Pagination, Mousewheel, Autoplay,Navigation]);
    	Vue.use(getAwesomeSwiper(SwiperClass));
    </style>
    
    展开全文
  • html: {% for key,item in listBanner %} {{item.bannerTitle}} {% endfor %} < > js: // 轮播图 var index = 0; var box = my ("box");//获取最外面的divvarinner... } 实现效果:网站链接: 效果展示

    html:

                    <div class="b_lswiper">
                        <div id="box" class="all">
                            <div class="inner">
                                <ul>
                                 <!--node 循环图片-->
                                    {% for key,item in listBanner %}
                                    <li>
                                        <a href={{item.jumpUrl}}>
                                            <img src={{item.bannerUrl}} alt="" class="b_swiperimg">
                                            <span class="s_text">{{item.bannerTitle}}</span></a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                <!--里面存放小圆点-->
                                <ol></ol>
                            </div>
                            <div class="focusD" id="arr">
                                <span id="left">&lt</span>
                                <span id="right">&gt</span>
                            </div>
                        </div>
                    </div>
    

    js:
    // 轮播图
    var index = 0;
    var box = my ( " b o x " ) ; / / 获 取 最 外 面 的 d i v v a r i n n e r = b o x . c h i l d r e n [ 0 ] ; / / 获 取 相 框 v a r i m g W i d t h = i n n e r . o f f s e t W i d t h ; / / 获 取 去 相 框 的 宽 度 v a r u l O b j = i n n e r . c h i l d r e n [ 0 ] ; / / 获 取 u l v a r l i s t = u l O b j . c h i l d r e n ; / / 获 取 u l 中 所 有 的 l i v a r o l O b j = i n n e r . c h i l d r e n [ 1 ] ; / / 获 取 o l v a r a r r = m y ("box"); //获取最外面的div var inner = box.children[0]; //获取相框 var imgWidth = inner.offsetWidth; //获取去相框的宽度 var ulObj = inner.children[0]; // 获取ul var list = ulObj.children; //获取ul中所有的li var olObj = inner.children[1]; //获取ol var arr = my ("box");//divvarinner=box.children[0];//varimgWidth=inner.offsetWidth;//varulObj=inner.children[0];//ulvarlist=ulObj.children;//ullivarolObj=inner.children[1];//olvararr=my(“arr”); //获取焦点
    //创建小按钮-----根据ul中li的个数
    for (var i = 0; i < list.length; i++) {
    var liObjs = document.createElement(“li”);
    olObj.appendChild(liObjs);
    liObjs.innerHTML = ‘’;
    liObjs.setAttribute(“index”, i); // liObjs.innerHTML = (i + 1); //在ol中每个li中增加自定义属性,添加索引值
    //注册鼠标进入事件
    liObjs.onmouseover = function() {
    for (var j = 0; j < olObj.children.length; j++) { //先移除所有背景颜色
    olObj.children[j].removeAttribute(“class”);
    }
    this.className = “current”; //设置当前鼠标进来的类样式
    index = this.getAttribute(“index”); //获取ol中li的索引值
    animate(ulObj, -index * imgWidth); //移动动画函数//移动ul
    };
    }
    //设置第一个ol中li的背景颜色
    olObj.children[0].className = “current”;
    //克隆ol中第一个li放到最后一个
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    var timeId = setInterval(clickHandle, 3000);
    my ( " b o x " ) . o n m o u s e o v e r = f u n c t i o n ( ) a r r . s t y l e . d i s p l a y = " b l o c k " ; c l e a r I n t e r v a l ( t i m e I d ) ; ; / / 点 击 右 边 按 钮 m y ("box").onmouseover = function() { arr.style.display = "block"; clearInterval(timeId); }; //点击右边按钮 my ("box").onmouseover=function()arr.style.display="block";clearInterval(timeId);;//my(“right”).onclick = clickHandle;

            function clickHandle() {
                if (index == ulObj.children.length - 1) {
                    ulObj.style.left = 0 + "px";
                    index = 0;
                }
                index++;
                animate(ulObj, -index * imgWidth);
                if (index == list.length - 1) {
                    olObj.children[0].className = "current";
                    olObj.children[olObj.children.length - 1].className = "";
                } else {
                    for (var i = 0; i < olObj.children.length; i++) {
                        olObj.children[i].className = "";
                    }
                    olObj.children[index].className = "current";
                }
            };
            //点击左边按钮
            my$("left").onclick = function() {
                if (index == 0) {
                    index = list.length - 1;
                    ulObj.style.left = -index * imgWidth + "px";
                }
                index--;
                animate(ulObj, -index * imgWidth);
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].className = "";
                }
                olObj.children[index].className = "current";
            };
    
            my$("box").onmouseout = function() {
                arr.style.display = "none";
                timeId = setInterval(clickHandle, 3000);
            };
            // 设置一个元素,移动到指定位置
            function animate(element, target) {
                clearInterval(element.timeId);
                element.timeId = setInterval(function() {
                    var current = element.offsetLeft;
                    var step = 9;
                    step = current > target ? -step : step;
                    current += step;
                    if (Math.abs(target - current) > Math.abs(step)) {
                        element.style.left = current + "px";
                    } else {
                        clearInterval(element.timeId);
                        element.style.left = target + "px";
                    }
                }, 10);
            }  
            function my$(id) {  
                return document.getElementById(id);    
            }
    

    css:
    /* 轮播图 /
    .all {
    /
    margin: 100px auto; /
    /
    padding: 5px; /
    border: 1px solid #ccc;
    position: relative;
    }
    .b_lswiper img {
    width: 593px;
    height: 316px;
    }
    .inner {
    position: relative;
    width: 593px;
    height: 316px;
    background-color: pink;
    overflow: hidden;
    }
    .inner ul {
    width: 1000%;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    }
    .inner ul li {
    float: left;
    }
    .inner ul .s_text {
    z-index: 22;
    position: absolute;
    /
    top: 285px; /
    /
    left: 10px; */
    margin-left: 20px;
    bottom: 20px;
    width: 400px;
    color: #fff;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: “PingFangSC Medium”;
    }
    .focusD {
    position: absolute;
    left: 0;
    top: 45%;
    width: 593px;
    padding: 0 10px;
    height: 30px;
    box-sizing: border-box;
    display: none;
    }
    .inner ol {
    position: absolute;
    right: 30px;
    bottom: 10px;
    }
    .inner ol li {
    display: inline-block;
    margin: 0 3px;
    width: 28px;
    height: 4px;
    background: rgba(222, 218, 215, 1);
    border-radius: 2px;
    }
    .focusD span {
    display: inline-block;
    width: 25px;
    font-size: 24px;
    height: 30px;
    color: #ccc;
    line-height: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    }
    #left {
    float: left;
    }
    #right {
    float: right;
    }
    实现效果:网站链接: 效果展示
    在这里插入图片描述

    展开全文
  • 实现swiper

    2021-03-31 15:03:49
    Vue 自己实现swiper, 只实现了swiper部分功能; 解决了循环loop时,绑定事件绑定不上的问题,不过有些取巧,后期继续更改; 1.html <div id="slider"> <ul class="swiper-item-container"> <li ...

    自己实现swiper, 只实现了swiper部分功能;
    解决了循环loop时,绑定事件绑定不上的问题,不过有些取巧,后期继续更改;

    1.html

    <div id="slider">
      <ul class="swiper-item-container">
        <li class="swiper-item"><img src="./images/1.jpg" /></li>
        <li class="swiper-item"><img src="./images/2.jpg" /></li>
        <li class="swiper-item"><img src="./images/3.jpg" /></li>
        <li class="swiper-item"><img src="./images/menu1.png" /></li>
        <li class="swiper-item"><img src="./images/menu2.png" /></li>
        <li class="swiper-item"><img src="./images/menu3.png" /></li>
       </ul>
       <div class="swiper-button-prev"><</div>
       <div class="swiper-button-next">></div>
       <div class="indicator-container"></div>
     </div>

    重要使用方法:

    let _this = this;
    new Swiper({
      swiper: 'slider',
      item: '.swiper-item',
      autoplay: false,
      loop: false,
      duration: 3000,
      change(index) { // 切换时候使用,获取当前切换的index;
        console.log(index);
      },
      onClickTo(index) { // loop: true,添加绑定事件,必须使用onClickTo; false:可以使用@click & onClickTo;
         _this.goTo(index)
      },
      pagination: { // 分页使用,bullets, fraction两种模式;
        el: '.indicator-container',
        type: 'bullets',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

    2.关键js

    class Swiper {
      constructor(options = {}) {
        this.options = Object.assign({
          swiper: 'swiper',
          item: '.swiper-name',
          autoplay: false,
          loop: false,
          duration: 3000,
          pagination: {
            el: '.indicator-container',
            type: 'bullets',
            clickable: false, // 是否允许点击切换
          },
        }, options);
        this.elements = {
          swiper: document.getElementById(this.options.swiper) || document.querySelector(this.options.swiper),
          items: document.querySelectorAll(this.options.item),
          swiper_item_width: document.querySelectorAll(this.options.item)[0].offsetWidth,
          swiper_item_container: document.getElementById(this.options.swiper).getElementsByClassName("swiper-item-container")[0] || null,
          pagination: this.options.pagination.el ? document.querySelector(this.options.pagination.el) : null,
        };
        // 一些状态
        this.states = {
          index: 0,           // 当前滑块的下标,从0开始
          touch: 0,           // 触摸状态 0:未触摸 1:手指触摸/鼠标按下
          autoplay: this.options.autoplay,
          touchTrack: {
            start: null,    // 手指触摸/鼠标按下时的位置
            old: null,      // 手指/鼠标上一次的位置
          },
          intervalId: null,
          autoplayId: null,
        };
        this.isTouch = 'ontouchstart' in window;
        if (!this.elements.swiper) {
          throw `${this.options.swiper} not found`;
        }
        // 初始化
        this.initElement();
        // 滑动
        this.touchEvent();
        // 是否是自动播放
        if (this.options.autoplay) {
          this.autoplay();
          this.elements.swiper.addEventListener('mouseover', () => {
            clearTimeout(this.states.autoplayId);
            this.states.autoplay = false;
          });
          this.elements.swiper.addEventListener('mouseout', () => {
            this.states.autoplay = true;
          });
        }
      }
    
      /**
       * 初始化样式
       */
      initElement () {
        if (this.elements.swiper_item_container === null) {
          this.elements.swiper_item_container = this.elements.swiper.children[0] || this.elements.swiper.firstChild;
        }
        if (this.options.loop) {
          let firstItem = this.elements.items[0].cloneNode(true);
          this.elements.swiper_item_container.appendChild(firstItem);
        }
        // 初始化分页是效果
        if (this.elements.pagination) {
          this.elements.pagination.innerHTML = '';
          let pageItem = this.elements.pagination;
          let itemNum = this.elements.items.length;
          let spanTemp = null;
          if (itemNum > 0) {
            // 判断是否是bullets 或者 fraction
            if (this.options.pagination.type === 'bullets') {
              for (var i = 0; i < itemNum; i++) {
                spanTemp = document.createElement('span');
                spanTemp.className = 'swiper-pagination-bullets';
                pageItem.appendChild(spanTemp);
              }
              this.elements.pagination.children[this.states.index].classList.add('active');
            } else {
              spanTemp = document.createElement('span');
              spanTemp.classList.add('swiper-pagination-fraction');
              spanTemp.innerHTML = `${this.states.index + 1} / ${itemNum}`;
              pageItem.appendChild(spanTemp);
            }
          }
        }
        // 初始化左右切换按钮
        this.navigationInit();
        // 事件委托
        this.eventBubble();
        // 分页使用,bullets添加的点击事件
        this.handeleClickable();
      }
      /**
       * 初始化左右切换按钮
       */
      navigationInit() {
        var _this = this;
        if (this.options.navigation) {
          let prevEl = document.querySelector(this.options.navigation.prevEl);
          let nextEl = document.querySelector(this.options.navigation.nextEl);
          prevEl.addEventListener("click", function () {
            _this.prev();
          });
          nextEl.addEventListener("click", function () {
            _this.next();
          });
        }
      }
      /**
       * 分页使用,bullets添加的点击事件
       */
      handeleClickable () {
        if (!this.elements.pagination) {
          return;
        }
        if (!this.options.pagination.clickable) {
          return;
        }
        var _this = this;
        let lis = this.elements.pagination.children;
        for (var i = 0; i < lis.length; i++) {
          lis[i].setAttribute("index", i);
          lis[i].addEventListener("click", function() {
            let index = parseInt(this.getAttribute("index"));
            _this.next(index);
          });
        }
      }
      /**
       * 事件委托eventBubble 点击触发事件
       */
      eventBubble () {
        let element = this.elements.swiper_item_container;
        let li = element.children;
        let indexActive = 0;
        let _this = this;
        for(var i = 0, l = li.length; i < l; i++) {
          li[i].setAttribute("index", i);
          li[i].addEventListener("click", function() {
            let index = parseInt(this.getAttribute("index"));
            if (_this.options.loop) {
              if (index === (li.length -1)) {
                indexActive = 0
              } else {
                indexActive = index;
              }
            } else {
              indexActive = index;
            }
            _this.handleClick(indexActive);
          });
        }
      }
      handleClick (index) {
        this.options.onClickTo.bind(this)(index);
      }
      /**
       * 自动播放
       */
      autoplay() {
        if (this.states.autoplayId) {
          clearTimeout(this.states.autoplayId);
        }
        // 设置一个定时器
        this.states.autoplayId = setTimeout(() => {
          if (!this.states.autoplay) return;
          this.next();
        }, this.options.duration);
      }
      /**
       * 下一个
       * @param {*} nextIndex 
       */
      next(nextIndex) {
        let element = this.elements.swiper_item_container;
        let li = element.children;
        if ((nextIndex != null) && (typeof(nextIndex) != "undefined")) {
          this.states.index = nextIndex;
        } else {
          this.states.index = this.states.index + 1;
          // 循环轮播
          if (this.options.loop) {
            if (this.states.index > (li.length-1)) {
              element.style.left = 0 + "px";
              this.states.index = 1;
            }
          } else {
            if (this.states.index > (li.length-1)) {
              this.states.index = li.length - 1;
            }
          }
        }
        this.animate(element, -(this.states.index*this.elements.swiper_item_width));
      }
      /**
       * 上一个
       */
      prev() {
        let element = this.elements.swiper_item_container;
        let li = element.children;
        this.states.index = this.states.index - 1;
        if (this.options.loop) {
          if (this.states.index < 0) {
            element.style.left = -((li.length-1)*this.elements.swiper_item_width) + "px";
            this.states.index = li.length - 2;
          }
        } else {
          if (this.states.index < 0) {
            this.states.index = 0
          }
        }
        this.animate(element, -(this.states.index*this.elements.swiper_item_width));
      }
      /**
       * 切换动画
       * @param {*} element 
       * @param {*} target 
       */
      animate(element, target) {
        var step = 10;
        var time = 10;
        var gap = (Math.abs(target - element.offsetLeft) / this.elements.swiper_item_width);
        if (gap > 1) {
          step = step * gap;
          time = time / gap;
        }
        if (element) {
          step = (element.offsetLeft > target) ? -step : step;
          clearInterval(this.states.intervalId);
          this.states.intervalId = setInterval(() => {
            if ((step < 0) && (Math.abs(element.offsetLeft + step) < Math.abs(target))) {
              element.style.left = element.offsetLeft + step + "px";
            } else {
              if (Math.abs(target - element.offsetLeft) > Math.abs(step)) {
                element.style.left = element.offsetLeft + step + "px";
              } else {
                clearInterval(this.states.intervalId);
                this.states.intervalId = null;
                element.style.left = target + "px";
                if (this.states.autoplay) {
                  this.autoplay();
                }
              }
            }
          }, time);
        }
        // 触发change事件切换事件
        this.getChangeHandle();
        // 分页
        this.getPagination();
      }
      /**
       * 触发change事件切换事件
       */
      getChangeHandle () {
        let element = this.elements.swiper_item_container;
        let li = element.children;
        let index = 0;
        if (this.states.index === (li.length-1)) {
          index = 0;
        } else {
          index = this.states.index;
        }
        if (this.options.change) {
          this.options.change.bind(this)(index);
        }
      }
      /**
       * 获取分页,判断是否是bullets 或者 fraction
       */
      getPagination() {
        if (!this.elements.pagination) {
          return;
        }
        let index = 0;
        // 判断是否是bullets
        if (this.options.pagination.type === 'bullets') {
          if (this.elements.pagination.children.length > 0) {
            for (var j = 0; j < this.elements.pagination.children.length; j++) {
              this.elements.pagination.children[j].classList.remove('active');
            }
          }
          if (this.states.index === this.elements.pagination.children.length) {
            index = 0;
          } else {
            index = this.states.index;
          }
          this.elements.pagination.children[index].classList.add('active');
        } else { // fraction
          if (this.states.index + 1 > this.elements.items.length) {
            index = 1;
          } else {
            index = this.states.index + 1;
          }
          this.elements.pagination.children[0].innerHTML = `${index} / ${this.elements.items.length}`;
        }
      }
      /**
       * 监听触摸事件
       */
      touchEvent() {
        if (this.isTouch) {
          this.elements.swiper_item_container.addEventListener('touchstart', () => this.touchStart(event));
          this.elements.swiper_item_container.addEventListener('touchmove', () => this.touchMove(event));
          this.elements.swiper_item_container.addEventListener('touchend', () => this.touchEnd(event));
        } else {
          this.elements.swiper_item_container.addEventListener('mousedown', () => this.touchStart(event));
          this.elements.swiper_item_container.addEventListener('mousemove', () => this.touchMove(event));
          this.elements.swiper_item_container.addEventListener('mouseup', () => this.touchEnd(event));
        }
      }
      touchStart(event) {
        // 阻止浏览器默认的拖拽行为
        // event.preventDefault();
        this.states.touch = 1;
        this.states.autoplay = false;
        this.states.touchTrack.start = this.states.touchTrack.old = event.touches ? event.touches[0] : event;
      }
      touchMove(event) {
        // 必须是手指/鼠标按下了才允许移动
        if (this.states.touch != 1) return;
        // 阻止浏览器默认的拖拽行为
        // event.preventDefault();
        // 触摸和鼠标事件event不一样,要区分开来。
        event = event.touches ? event.touches[0] : event;
        this.states.touchTrack.old = event;
      }
      touchEnd(event) {
        // 移除触摸状态
        this.states.touch = 0;
        if (this.states.autoplay) {
          this.states.autoplay = true;
        }
        event = event.changedTouches ? event.changedTouches[0] : event;
    
        if (event.pageX < this.states.touchTrack.start.pageX) {
          this.next();
        } else if (event.pageX === this.states.touchTrack.start.pageX) {
          // 防止触发
        } else {
          this.prev();
        }
      }
    }
    
    export default Swiper;
    

    3.css

    #slider {
        overflow: hidden;
        height: 220px;
        position: relative;
      }
    
      ul {
        display: flex;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
        box-sizing: content-box;
        transform: translate3d(0, 0, 0);
        transition-duration: 0ms;
    
        li {
          flex-shrink: 0;
          width: 100%;
      
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    
      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        top: 50%;
        margin-top: -25px;
        width: 50px;
        height: 50px;
        font-size: 40px;
        text-align: center;
        background: rgba(0, 0, 0, 0.2);
        color: white;
      }
    
      .swiper-button-prev {
        left: 0px;
        cursor: pointer;
      }
    
      .swiper-button-next {
        right: 0px;
        cursor: pointer;
      }
    
      .indicator-container {
        position: absolute;
        width: 150px;
        height: 30px;
        line-height: 30px;
        bottom: 0;
        left: 50%;
        margin-left: -75px;
        text-align: center;
      }
    
      .swiper-pagination-bullets {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background: white;
        cursor: pointer;
        margin: 0 5px;
      }
    
      .swiper-pagination-bullets.active {
        background: blue;
      }
    
      .swiper-pagination-fraction {
        color: #fff;
        font-size: 12px;
      }

     

    展开全文
  • 主要给大家介绍了关于js使用swiper实现层叠轮播效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 原生JS无缝轮播图 ,如果无法打开预览,原因是部分运营商DNS污染(域名指往不正确的IP地址),可以通过 修改hosts文件 / 修改DNS服务器 / 代理 的方式访问 HTML部分 最外层是一个固定宽度且带有overflow: hidden;...
  • 实现swiper实现缩图

    2020-10-09 00:26:47
    缩略图实现

    1.效果

    2.代码实现

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    	<link rel="stylesheet" type="text/css" href="asset/css/swiper.min.css" />
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    			box-sizing: border-box;
    		}
    
    		.page_cont img {
    			width: 100%;
    			display: block;
    		}
    
    		.thumbs img {
    			opacity: .2;
    		}
    
    		.swiper-slide-thumb-active img {
    			opacity: 1;
    		}
    	</style>
    	<script src="asset/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="asset/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		$.get("https://www.fastmock.site/mock/961b619357977ecee63001f0f5140734/yghh/imgRe", (res) => {
    
    			let swiperList = "";
    
    			for (let i = 0; i < res.length; i++) {
    				swiperList += `<div class="swiper-slide"><img src="${res[i].img}" ></div>`
    			}
    
    			let gallery =
    				`<div class="gallery swiper-container">
    					<div class="swiper-wrapper">` +
    				swiperList +
    				`</div>
    				</div>`;
    
    			let thumbs =
    				`<div class="thumbs swiper-container">
    					<div class="swiper-wrapper">` +
    				swiperList +
    				`</div>
    				</div>`;
    
    			$(".page_cont").append(gallery, thumbs);
    			var mySwiper = new Swiper('.gallery', {
    				autoplay: true, //可选选项,自动滑动
    				loop: true,
    				thumbs: {
    					swiper: {
    						el: '.thumbs',
    						slidesPerView: 4,
    						// spaceBetween: 10,
    						watchSlidesVisibility: true,
    						loop: true
    						/*避免出现bug*/
    					},
    				}
    			})
    
    		})
    	</script>
    </html>
    

    参考:swiper官方网站缩略图实现

    展开全文
  • 移动端-需求swiper 4.0.3实现层叠轮播 二.实现效果如下 三.方案:查找了下发现使用swiper的切换效果coverflowEffect可以实现  1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式  2....
  • Tab选项卡下实现Swiper嵌套Swiper

    千次阅读 2018-02-25 10:46:34
    近期在开发移动端项目中需要实现选项卡嵌套Swiper多tab联动实例这么一个功能,如图所示: 首先呢,要在项目的head标签内引入swiper.min.css <link rel="stylesheet" href="./css/swiper.min.css"> 在body内引入...
  • Vue实现swiper轮播组件

    千次阅读 2020-10-18 12:00:36
    以下是一个用vue实现的轮播组件,带动画效果,可以自行设置轮播速度,选择是否需要分页器等。效果如下: 思路: 结构:一个轮播组件应该由三部分组成,一是轮播的元素,如图片等;二是底部的分页器;三是前一张,...
  • 对于通过Vuex状态管理器获取Swiper需要使用的数据,先是需要在state.js中定义需要使用的状态,代码如下: categories: [] 在mutation-type.js中定义mutation的type名称常量,代码如下: export const RECEIVE_...
  • mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', '...
  • uniapp使用wxs如何手写swiper ** 了解wxs WXS是小程序的一套脚本语言。 具体api:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/ 官方实例:https://uniapp.dcloud.io/frame?id=wxs 创建wxs ...
  • 今天实现swiper轮播图全屏预览,之前写mip化页面的时候轮播图组件有全屏预览的属性 以为swiper.js(https://www.swiper.com.cn/)会有,可是没有找到呀,网上的框架也很多,但是不想改插件了 所以用最简单的方式...
  • html页面实现swiper轮播图

    千次阅读 2019-12-12 15:51:20
    link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/swiper/v4.3.0/swiper.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale...
  • 大家都知道Swiper(Swiper master)是目前应用较...下面这篇文章主要给大家介绍了在JS中利用swiper实现3d翻转幻灯片的相关资料,文中给出了完整的示例代码供大家参考学习,需要的朋友可以参考借鉴,下面来一起看看吧。
  • vue中实现swiper组件

    2020-04-03 14:26:44
    -- 自定义实现pagination --> <nav class="pagination"> (item, index) in length" :key="item" :class="{active: value===index}" @click="changeAction(index)"> </li> </nav> </template> <script> export ...
  • Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用话不多说,直接上教程1、首先加载插件,需要用到的文件有swiper.min.js和...
  • 主要为大家详细介绍了Swiper.js实现移动端元素左右滑动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • onSliderChange = curSwiper => { const mesh = this.mesh; const texture = imglist[curSwiper.activeIndex].default; mesh.material.map = new THREE.TextureLoader().load(texture);...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,143
精华内容 3,657
热门标签
关键字:

js实现swiper