swiper怎么动态加载数据?

$.ajax({ url: "../Minitor/data_SOE.ashx?Action=GetSOEByPage", type: "GET", dataType: "json", data: { page: page, treeid: 1, rows: 10, endtime: endtime, starttime: '2016-07-20 00:00:00' }, cache: false, success: function (data) { var data = eval(data); var num = data.ResultData.DataTable.length; var total = data.ResultData.totalRecords; var max = Math.floor(10 / 10); var mySwiper = new Swiper('.swiper-container', { onSlideNextStart: function (swiper) { $.ajax({ url: "../Minitor/data_SOE.ashx?Action=GetSOEByPage", type: "GET", dataType: "json", data: { page: 1, treeid: 1, rows: 10, endtime: endtime, starttime: '2016-07-20 00:00:00' }, cache: false, success: function (data) { var data = eval(data); var mySwiper = new Swiper('.swiper-container', { }); var html = ""; for (var i = 0; i < 10; i++) { html += data.ResultData.DataTable[i].TagName; if ((i + 1) % 10 == 0) { mySwiper.appendSlide('
' + 'html' + '
'); //加到Swiper的最后 $(".swiper-slide").addClass('container jin1'); mySwiper.update(); } }; // $(".swiper-container").find('.swiper-wrapper').html(s); }, error: function (data) { alert("未查明原因"); } }); } }); var html = ""; for (var j = 0; j < 10; j++) { var time = new Date(eval('new ' + (data.ResultData.DataTable[j].CreateTime.replace(/\//g, '')))).Format('yyyy-MM-dd hh:mm:ss'); html += "
" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + '' + "" + "" + "
" + "" + data.ResultData.DataTable[j].IEDNO + "" + " " + "" + "" + "" + "" + "" + "
" + "安装位置:" + " " + data.ResultData.DataTable[j].StationName + data.ResultData.DataTable[j].MainLineName + data.ResultData.DataTable[j].TwoerAdr + "
" + data.ResultData.DataTable[j].TagName + " ' + time + '
"; $(".table tbody tr td").find("i").addClass("icon iconfont"); $(".table tbody tr td a i").css({ "color": "#337ab7" }); $(".icon ").css({ "text-align": "right" }); if ((j + 1) % 10 == 0) { mySwiper.appendSlide('
' + html + '
'); //加到Swiper的最后 $(".swiper-slide").addClass('container jin1'); html = ""; } }; // $(".swiper-container").find('.swiper-wrapper').html(); }, error: function (data) { alert("未查明原因"); } });

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
swiper 渲染多条数据时时间太长
swiper 渲染多条数据时时间太长;如果以10条数据分页的话,每次滑动加载又会造成1~2秒的加载卡顿
swiper4.0 问题,动态加载的数据显示不正常
动态加载的数据,静态数据是20个slide 能对整齐。动态加载的数据只有15个却不能对齐![图片说明](https://img-ask.csdn.net/upload/201904/22/1555925727_411340.png) ``` var mySwiper = new this.$Swiper(".swiper-container2", { slidesPerView: 5, //一行显示5个 slidesPerColumn: 2, //显示2行 slidesPerGroup: 5, //每次滑动滚动的数量 scrollbar: { el: "#sw2", dragSize: 53 }, draggable: false, observer: true, //修改swiper自己或子元素时,自动初始化swiper observeParents: false, }); mySwiper.scrollbar.$el.css("height", "15px"); mySwiper.scrollbar.$dragEl.css("background", "#F2414C"); mySwiper.scrollbar.$el.css("width", "157px"); mySwiper.scrollbar.updateSize(); //结构 <div class="swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in goodslist" :key="item.id" @click="toNew(item.id)" > <div class="box"> <img :src="item.src" alt="这是图" /> </div> <span>{{ item.name }}</span> </div> </div> <br /> <div class="swiper-scrollbar" id="sw2"></div> </div> ```
如何解决lazyload.js 和 商品列表的每个商品都是swiper 懒加载的冲突问题呢?
![图片说明](https://img-ask.csdn.net/upload/201907/25/1564045461_145855.jpg) 如何解决lazyload.js 和 商品列表的每个商品都是swiper 懒加载的冲突问题呢? 我需要下拉时懒加载,并且每个商品豆腐块又是swiper懒加载。
swiper多层嵌套,页面加载有时banner没有高度
![最外层的pages是大的滑动切换,然后中间的scroll-container是长内容滚动,在第一个最内层的wrapper slide中还嵌套着一个轮播,var html = ''; html += '<div class="swiper-container" id="swiper-banners" style="height:100%;>'; html += '<div class="swiper-wrapper sw_banner" style="height:100%;>'; html += '<div class="swiper-slide sw_slide" style="height:100%;"><img src="images/1.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/2.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/3.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/4.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/5.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/6.jpg" alt=""></div>'; html += '</div>'; html += '<div class="pagination"></div>'; html += '</div>'; 然后页面加载的时候就会出现问题,有时候banner的盒子都会没有高度,图片获取到了但是高度没有,发现new swiper的一些问题,但是有时刷新一次,两次以后就会有了,求教这是什么问题。 //Init Navigation var nav = $('.swiper-nav').swiper({ slidesPerView: 4, freeMode:true, freeModeFluid:true, onSlideClick: function(nav){ var index=nav.clickedSlideIndex; pages.swipeTo( nav.clickedSlideIndex); $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index"); } }) //Function to Fix Pages Height function fixPagesHeight() { $('.swiper-pages').css({ height: $(window).height()-nav.height }) } $(window).on('resize',function(){ fixPagesHeight() }) fixPagesHeight() //Init Pages var pages = $('.swiper-pages').swiper({ onTouchEnd: function(pages){ var index=pages.activeIndex; $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index"); }, onSlideChangeEnd: function(pages){ var index=pages.activeIndex; $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index"); }, observer: true, observeParents: true }) var as; //Scroll Containers $('.scroll-container').each(function(index){ if(index==0){ as=$(this).swiper({ mode:'vertical', scrollContainer: true, mousewheelControl: true, scrollbar: { container:$(this).find('.swiper-scrollbar')[0] }, slidesPerView:'auto', observer: true, observeParents: true, }) }else{ $(this).swiper({ mode:'vertical', scrollContainer: true, mousewheelControl: true, scrollbar: { container:$(this).find('.swiper-scrollbar')[0] } }) } }) var html = ''; html += '<div style="height:0.89rem;"></div>'; html += '<div class="swiper-container" id="swiper-banners" style="height:100%;>'; html += '<div class="swiper-wrapper sw_banner" style="height:100%;>'; html += '<div class="swiper-slide sw_slide" style="height:100%;"><img src="images/1.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/2.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/3.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/4.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/5.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/6.jpg" alt=""></div>'; html += '</div>'; html += '<div class="pagination"></div>'; html += '</div>'; var bannerSwiper = $('#swiper-banners').swiper({ pagination : '.pagination', autoplay : 3000, loop : true, grabCursor : true, visibilityFullFit : true, paginationClickable : true, updateOnImagesReady : true, observer : true, observeParents : true }) as.prependSlide(html,'swiper-slide','div'); as.updateActiveSlide(0); as.reInit();图片说明](https://img-ask.csdn.net/upload/201711/07/1510025649_714579.png)
一个swiper两个不同的分页器样式怎么写?
# 一个swiper两个不同的分页器样式怎么写? ![图片说明](https://img-ask.csdn.net/upload/201809/27/1538042016_418818.jpg) 一个swiper两个不同的分页器样式怎么写? 需求是图片上的这样,要有一个数字的分页器,还需要一个普通的圆圈分页器。两个分开写简单,两个样式都一样也可以。可是两个type不一样,怎么解决呢?希望有大神告诉一下~万分感谢啊啊啊啊
h5 swiper如何禁止对角滚动
3个slider1,slider2,slider3,每个slider都是list,高度大于屏高,可以上下滚动。用了swiper左右滑动切换slider,发现左右滑动时可以上下滑动,造成页面滑动时不受控制,整体滑动体验很差,请问如何禁止对角滑动,就是在上下滑动时,不可以横向滑动,横向滑动时,阻止上下滑动
swiper插件的pagination不起作用
各位大牛,我用swiper的pagination,能显示几个圆点,但是点击圆点并不能实现翻页效果。代码如下,求各位指点迷津,多谢啦! <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><span>Slide 1</span></div> <div class="swiper-slide"><span>Slide 2</span></div> <div class="swiper-slide"><span>Slide 3</span></div> <div class="swiper-slide"><span>Slide 4</span></div> <div class="swiper-slide"><span>Slide 5</span></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <!-- Initialize Swiper --> <script type="text/javascript"> $(document).ready(function(){ var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, }); }); </script> </body> 效果如下,忽略css设置 ![图片说明](https://img-ask.csdn.net/upload/201510/30/1446192453_321231.png)
swiper的maxTranslate()是什么意思?
用swiper写了一个移动端左右滑动的效果仿照这个链接里的头部 http://www.17sucai.com/preview/702590/2017-06-08/toutiaoNav/index.html ![图片说明](https://img-ask.csdn.net/upload/201711/28/1511858278_629390.png) 在swiper官网上找了很久 还不理解这个maxTranslate()方法到底是获取的什么值?麻烦知道的大神给我解解疑惑
swiper插件自动轮播怎么只显示3个div
在使用swiper插件的时候将loop设置为true,将slidesPerView设置为3,得到的是被压缩的数个div,怎么样才能让div最多只显示3个?
vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false
vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false ``` <swiper :options="swiperOption" ref="Myswper"> <swiper-slide v-for="card in itemcard" :key="card.id"> <img>//循环数据展示 </swiper-slide> </swiper> ``` ``` data () { return { // swiper默认配置 swiperOption: { slidesPerView: 'auto', spaceBetween: 30, centeredSlides: true, pagination: '.swiper-pagination', paginationClickable: true, on: { slideChangeTransitionEnd: function () { // console.log(this.activeIndex) // 切换结束时,告诉我现在是第几个slide } } } } } ``` ``` watch: { 实现监听this.$refs.Myswper.swiper.activeIndex发生变化执行赋值动作 } ``` 由于vue不能监听到swiper中的activeIndex,也不能监听到ref的变动,请问如何才能实现想要的效果?
swiper的paginationRender如何与滑动事件一起使用?请教各位大佬
//swiper的paginationRender如何与滑动事件一起使用? <script> var swiper = new Swiper('.vip_user_order', { autoHeight: true, //enable auto height pagination: '.order_nav', paginationClickable: true, paginationBulletRender: function (swiper,index, className) { switch (index) { case 0: name='全部';break; case 1: name='待付款';break; case 2: name='待发货';break; case 3: name='已成交';break; default: name=''; } return '<a class="' + className + '">' + name + '</a>'; } }); /* var Myswiper = new Swiper('.swiper-container', { on:{ slidePrevTransitionEnd:function(){ alert("后退"); }, slideNextTransitionEnd:function(){ alert("前行"); }, } }); */ </script>
react native swiper的使用
react native swiper点击轮播图跳转到相应的界面怎么做??
echarts能不能和swiper结合使用?
需要一个自动轮播插件里显示图表,现在把echarts放进swiper的div里会出现Error: Initialize failed: invalid dom. JS的加载顺序没有问题,div的宽高也设置了,请问一下是什么地方有问题导致echarts不能显示出来
swiper.js如何实现从上往下自动滚动啊?
swiper.js如何实现从上往下自动滚动啊?默认是从下往上滚动。
tab切换后swiper自动轮播卡死
轮播图tab切换后会卡死,observer没有效果。 function RPM(a, b, c, d) { var swiper = new Swiper({ el: a, loop: true, speed: 500, spaceBetween: 10, autoplay: { delay: 1000, disableOnInteraction: false, }, observer: true, observeParents: true, navigation: { nextEl: b, prevEl: c, }, pagination: { el: d, clickable: true, }, }); }RPM('.swiper-container.sc4-1', '.gb-girl-1-btn-next', '.gb-girl-1-btn-prev', '.swiper-pagination.sc4-1'); //2-2 RPM('.swiper-container.sc4-2', '.gb-girl-2-btn-next', '.gb-girl-2-btn-prev', '.swiper-pagination.sc4-2'); //2-3 RPM('.swiper-container.sc4-3', '.gb-girl-3-btn-next', '.gb-girl-3-btn-prev', '.swiper-pagination.sc4-3'); //2-4 RPM('.swiper-container.sc4-4', '.gb-girl-4-btn-next', '.gb-girl-4-btn-prev', '.swiper-pagination.sc4-4'); //2-5 RPM('.swiper-container.sc4-5', '.gb-girl-5-btn-next', '.gb-girl-5-btn-prev', '.swiper-pagination.sc4-5'); $(".off").hide(); for (let i = 0; i < 5; i++) { $(".pf").eq(i).on("click", function() { $(".gb-girl").hide().eq(i).show(); $(".pf").removeClass("on").eq(i).addClass("on"); }) } html就是一个很简单的tab切换,左侧切换标签,右侧切换轮播图
vue-awesome-swiper 手势缩放无效
问题描述: 想在vue项目中使用vue-awesome-swiper实现相册查看功能,测试的时候发现使用写死的图片src 时手势缩放没有问题,但是图片src集合换到从后台获取到再赋值的,手势缩放就不起作用了,不知道是什么原因。 用的vue template, 后台获取到的数据已经渲染到dom中,手机上测试切换没有问题,双击放大也可以,就是手势缩放或者双击放大后图片不能拖拽移动查看(用写死的图片src是可以的)。 vue项目依赖或版本: ``` "devDependencies": { "axios": "^0.15.3", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "^0.12.1", "less": "^2.7.3", "less-loader": "^4.0.5", "lodash": "^4.17.4", "postcss-px2rem": "^0.3.0", "vue-lazyload": "^1.2.6" }, "dependencies": { "fastclick": "^1.0.6", "leancloud-realtime": "^4.0.0-alpha.3", "leancloud-realtime-plugin-typed-messages": "^3.0.0", "leancloud-storage": "^3.4.2", "mint-ui": "^2.2.11", "moment": "^2.19.1", "vee-validate": "^2.0.0", "vue": "^2.5.13", "vue-awesome-swiper": "^2.6.7", "vue-resource": "^1.3.4", "vue-router": "^3.0.1", "vuex": "^3.0.1" } ``` 问题出现的环境背景及自己尝试过哪些方法: 试过使用另一个图片预览插件 [PhotoSwipe](http://photoswipe.com/ ""):PhotoSwipe,这个插件体验感比较好,但是插件需要预先知道图片的宽高,这个目前还没有时间研究。 相关代码: ``` <style> .viewImg .swiper-slide img { width: 100%; } </style> <template> <div class="viewImg" > <a class="btn-close f-r"><img src="/images/icon-close.png" @click="closeViewer" alt="关闭" title="关闭"></a> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="img in images" :key="img.id"> <div class="swiper-zoom-container"> <img :data-src="img.smallSizeUrl" class="swiper-lazy"> </div> </swiper-slide> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template> <script> import 'swiper/dist/css/swiper.css' ; import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return {swiperOption: { allowTouchMove: true, width: window.innerWidth, notNextTick: false, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper loadPrevNext: true, lazy: { loadPrevNext: true, }, lazyLoading : true, lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片(前一个和后一个slide)。 zoom: true, grabCursor: true, // 设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同) pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } } }, //定义这个sweiper对象 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted () { //这边就可以使用swiper这个对象去使用swiper官网中的那些方法 // this.swiper.slideTo(0, 1, false); }, props: { images: { required: true } }, methods:{ closeViewer: function(){ this.viewImg = false; } } } </script> ``` 我期待的结果是什么?实际看到的错误信息又是什么: 需要实现流畅的相册查看功能,支持预加载、流畅切换以及手机中手势缩放查看。 [vue-awesome-swiper 的demo](https://surmon-china.github.io/vue-awesome-swiper/ "")里可以看到都可以满足目前的主要需求,但是我在项目中出现了以上问题,求助。
idangerous.swiper.js怎么样获取当前页面
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-touch-fullscreen" content="yes" /> <meta name="format-detection" content="telephone=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" href="css/idangerous.swiper.css"> <link rel="stylesheet" type="text/css" href="css/animate.min.css"/> <link rel="stylesheet" type="text/css" href="css/index.css"/> <style> body { margin: 0; } .swiper-container { width: 100%; height: 480px; } .swiper-slide img { width: 100%; } #audio_btn { position: absolute; left: 10px; bottom: 10px; z-index: 200; display: none; width: 50px; height: 50px; background-repeat: no-repeat; } .loading_background { background-image: url(img/music_loading.gif); background-size: 30px 30px; opacity: 0.5; background-position: center center; } .loading_yinfu { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-image: url(img/yinfu.png); background-repeat: no-repeat; background-position: center center; } .play_yinfu { background-image: url(img/music.gif); background-repeat: no-repeat; background-position: center center; background-size: 60px 60px; } .rotate { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-size: 100% 100%; background-image: url(img/music_off.png); -webkit-animation: rotating 1.2s linear infinite; -moz-animation: rotating 1.2s linear infinite; -o-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotating { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } .off { background-image: url(img/music_off.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: center center; } @-webkit-keyframes start { 0%, 30% { opacity: 0; -webkit-transform: translate(0, 10px); } 60% { opacity: 1; -webkit-transform: translate(0, 0); } 100% { opacity: 0; -webkit-transform: translate(0, -8px); } } @-moz-keyframes start { 0%, 30% { opacity: 0; -moz-transform: translate(0, 10px); } 60% { opacity: 1; -moz-transform: translate(0, 0); } 100% { opacity: 0; -moz-transform: translate(0, -8px); } } @keyframes start { 0%, 30% { opacity: 0; transform: translate(0, 10px); } 60% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, -8px); } } </style> </head> <body class="home-template"> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/idangerous.swiper.min.js"></script> <script> $(function(){ $('#audio_btn').click(function() { if($(this).hasClass('play_yinfu')){ $(this).attr('class','off'); $(this).find('#yinfu').removeClass(); $('audio')[0].pause(); }else{ $(this).attr('class','play_yinfu'); $(this).find('#yinfu').addClass('rotate'); $('audio')[0].play(); } }); }); </script> <div id="audio_btn" class="play_yinfu" style="opacity: 1; display: block;"> <div id="yinfu" class="rotate"></div> <audio loop src="music.mp3" id="media" preload="" autoplay="true"></audio> </div> <div class="swiper-container"> <div class="swiper-wrapper" id="box"> <div class="swiper-slide page_1" id="page_1"> <img src="img/2.png"> <header><img src="img/news_header.png"></header> <section><img src="img/news_word.png"></section> </div> <div class="swiper-slide page_2" id="page_2"> <img src="img/2.png"> <header><img src="img/2_word.png"></header> <section><img src="img/2_map.png"></section> </div> <div class="swiper-slide page_3"> <img src="img/2.png"> <header><img src="img/3.png"></header> <section><img src="img/3_word.png"></section> </div> <div class="swiper-slide page_4"> <img src="img/2.png"> <header><img src="img/4_word.png"></header> <section><img src="img/4.png"></section> </div> <div class="swiper-slide page_5"> <img src="img/2.png"> <header><img src="img/5.png"></header> <section><img src="img/5_word.png"></section> </div> <div class="swiper-slide page_6"> <img src="img/2.png"> <header><img src="img/6_word.png"></header> <section><img src="img/6.png"></section> </div> <div class="swiper-slide page_7"> <img src="img/2.png"> <header><img src="img/7.png"></header> <section><img src="img/7_word.png"></section> </div> <div class="swiper-slide page_8"> <img src="img/2.png"> <header><img src="img/8_word.png"></header> <p><img src="img/8-middle.png"></p> <section><img src="img/8.png"></section> </div> <div class="swiper-slide page_9"> <img src="img/2.png"> <header><img src="img/9.png"></header> <section><img src="img/9_word.png"></section> </div> <div class="swiper-slide page_10"> <img src="img/2.png"> <header><img src="img/10_word.png"></header> <p><img src="img/10_middle.png"></p> <section><img src="img/10.png"></section> </div> <div class="swiper-slide page_11"> <img src="img/2.png"> <header><img src="img/11.png"></header> <section><img src="img/11_word.png"></section> </div> <div class="swiper-slide page_12"> <img src="img/2.png"> <header><img src="img/12_word.png"></header> <section><img src="img/12.png"></section> </div> <div class="swiper-slide page_13"> <img src="img/2.png"> <header><img src="img/13.png"></header> <section><img src="img/13_word.png"></section> </div> <div class="swiper-slide page_14"> <img src="img/2.png"> <header><img src="img/14_word.png"></header> <p><img src="img/14_middle.png"></p> <section><img src="img/14.png"></section> </div> <div class="swiper-slide page_15"> <img src="img/2.png"> <header><img src="img/15.png"></header> <section><img src="img/15_word.png"></section> </div> <div class="swiper-slide page_16"> <img src="img/2.png"> <header><img src="img/16_word.png"></header> <section><img src="img/16.png"></section> </div> <div class="swiper-slide page_17"> <img src="img/2.png"> <header><img src="img/17.png"></header> <section><img src="img/17_word.png"></section> </div> <div class="swiper-slide page_18"> <img src="img/2.png"> <header><img src="img/18_word.png"></header> <section><img src="img/18.png"></section> </div> <div class="swiper-slide page_19"> <img src="img/2.png"> <header><img src="img/19.png"></header> <section><img src="img/19_word.png"></section> </div> <div class="swiper-slide page_20"> <img src="img/2.png"> <header><img src="img/20_word.png"></header> <section><img src="img/20.png"></section> </div> </div> </div> <script> var mySwiper; setTimeout("ready()", 1000); function ready(){ if($("img")[0].height == 0){ $("img")[0].onload = function () { $(".swiper-container").css("height", $("img")[0].height); mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, mode: 'vertical', speed : 500, freeMode:true, freeModeFluid:true, // onSlidePrev:function(swiper){ // alert(2); // } }) } } else { $(".swiper-container").css("height", $("img")[0].height); mySwiper = new Swiper('.swiper-container',{ pagination: false, paginationClickable: true, mode: 'vertical', }) // mySwiper.activeSlide = function(swiper){ // alert(swiper) // $('header').addClass('animated fadeInDown'); // } } } $(".swiper-container").css("height", document.documentElement.clientHeight+"px"); $(".swiper-slide").css("height", $("img")[0].height+"px"); // alert($(".swiper-slide").css("height")+"haha"+$("img")[0].height+"nrg"+$(".swiper-container").css("height")); </script> </body> </html> 要做css3动画效果,急求
swiper快速滑动后,滑动事件失效
假如有1,2,3屏,从2滑动切换屏幕到3时,删除1,新增4在3后面, 慢点滑动的时候没问题,但是一旦滑动快了,这个滑动事件就失效了,求问大神有什么解决办法没? (function(){ var flog = 0; var mySwiper = new Swiper ('.swiper-container', { initialSlide:2, direction: 'horizontal', onSlideNextEnd: function(swiper){//往左滑,出现后一个,删掉第一个 if(flog != 0){ var num = parseInt($('.swiper-slide').eq(4).text()) + 1; mySwiper.appendSlide('<div class="swiper-slide swiper-slide-next">'+num+'</div>'); mySwiper.removeSlide(0); } flog++; }, onSlidePrevEnd: function(swiper){//往右滑,出现前一个,删掉最后一个 var num = parseInt($('.swiper-slide').eq(0).text()) - 1; mySwiper.prependSlide('<div class="swiper-slide swiper-slide-prev">'+num+'</div>'); mySwiper.removeSlide(4); } }) })();
前端-swiper的使用!!!新人求问
在做一个手机页面,需要用到很多轮播图,在网上找到了swiper这个插件。 现在想在一个页面利用swiper实现两个以上的轮播图,不知道可以吗? 我自己尝试了下,认为js文件里面都和swiper-content这些类名都绑定了,如果要修改 是不是就要修改原生的js文件呢?有没有其他办法??
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、PDF搜索网站推荐 对于大部
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 顺便拉下票,我在参加csdn博客之星竞选,欢迎投票支持,每个QQ或者微信每天都可以投5票,扫二维码即可,http://m234140.nofollow.ax.
Vue + Spring Boot 项目实战(十四):用户认证方案与完善的访问拦截
本篇文章主要讲解 token、session 等用户认证方案的区别并分析常见误区,以及如何通过前后端的配合实现完善的访问拦截,为下一步权限控制的实现打下基础。
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入  假设现有4个人
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点 html代码如下`&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;music&lt;/title&gt; &lt;meta charset="utf-8"&gt
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐厅的约会 餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”我楞了一下,心里想女朋友今天是怎么了,怎么突然问出这么专业的问题,但做为一个专业人士在女朋友面前也不能露怯啊,想了一下便说:“我先给你讲讲我前同事老王的故事吧!” 大龄程序员老王 老王是一个已经北漂十多年的程序员,岁数大了,加班加不动了,升迁也无望,于是拿着手里
经典算法(5)杨辉三角
写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。 这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。 用知识改变命运,让我们的家人过上更好的生活。 目录一、杨辉三角的介绍二、杨辉三角的算法思想三、代码实现1.第一种写法2.第二种写法 一、杨辉三角的介绍 百度
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
SQL-小白最佳入门sql查询一
一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统; 二 准备前提 需要建立一张学生表,列分别是id,名称,年龄,学生信息;本示例中文章篇幅原因SQL注释略; 建表语句: CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // dosho
漫话:什么是平衡(AVL)树?这应该是把AVL树讲的最好的文章了
这篇文章通过对话的形式,由浅入深带你读懂 AVL 树,看完让你保证理解 AVL 树的各种操作,如果觉得不错,别吝啬你的赞哦。 1、若它的左子树不为空,则左子树上所有的节点值都小于它的根节点值。 2、若它的右子树不为空,则右子树上所有的节点值均大于它的根节点值。 3、它的左右子树也分别可以充当为二叉查找树。 例如: 例如,我现在想要查找数值为14的节点。由于二叉查找树的特性,我们可...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,
程序员:我终于知道post和get的区别
IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实我们从来没有把他们归为我们IT工程师的队伍。他们虽然总是以IT工程师自居,但只是他们一厢情愿罢了。 此话一出,不知激起了多少(码农)程序员的愤怒,却又无可奈何,于是码农问程序员。 码农:你知道get和post请求到底有什么区别? 程序员:你看这篇就知道了。 码农:你月薪三万了? 程序员:嗯。 码农:你是怎么做到的? 程序员:
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU
开源并不是你认为的那些事
点击上方蓝字 关注我们开源之道导读所以 ————想要理清开源是什么?先要厘清开源不是什么,名正言顺是句中国的古代成语,概念本身的理解非常之重要。大部分生物多样性的起源,...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
      11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI 算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下
《C++ Primer》学习笔记(六):C++模块设计——函数
专栏C++学习笔记 《C++ Primer》学习笔记/习题答案 总目录 https://blog.csdn.net/TeFuirnever/article/details/100700212 —————————————————————————————————————————————————————— 《C++ Primer》习题参考答案:第6章 - C++模块设计——函数 文章目录专栏C+...
8年经验面试官详解 Java 面试秘诀
    作者 | 胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。   Java程序员准备和投递简历的实
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车? 某胡同口的煎饼摊一年能卖出多少个煎饼? 深圳有多少个产品经理? 一辆公交车里能装下多少个乒乓球? 一
so easy! 10行代码写个"狗屁不通"文章生成器
前几天,GitHub 有个开源项目特别火,只要输入标题就可以生成一篇长长的文章。背后实现代码一定很复杂吧,里面一定有很多高深莫测的机器学习等复杂算法不过,当我看了源代码之后这程序不到50
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的 回答 - Bravo Yeung,获得该问题下回答中得最高赞(236赞和1枚专业勋章),对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalk
相关热词 c#中dns类 c#合并的excel c# implicit c#怎么保留3个小数点 c# 串口通信、 网络调试助手c# c# 泛型比较大小 c#解压分卷问题 c#启动居中 c# 逻辑或运算符
立即提问