swiper 增加同页面增加2个滚动

js代码

<script type="text/javascript">

  var mySwiper = new Swiper(‘.slide_a‘,{
    noSwiping : true,

  });

 var slide_b = new Swiper(‘.slide_b‘,{

    autoplay : 1000,
    effect : ‘cube‘,

  });

</script>

css代码

<div class="swiper-container slide_a">
  <div class="swiper-wrapper">
      <!--第一屏-->
    <div class="swiper-slide swiper-no-swiping">
        <div class="header">
            <div class="header-cen"><h3>标题试下</h3></div>
            <div class="content">
                <!--广告滚动-->
                <div class="slide_b">
                    <div class="swiper-wrapper">
                       <div class="swiper-slide">1</div>
                     <div class="swiper-slide">2</div>
                     <div class="swiper-slide">3</div>
                    </div>
                </div>
                <!--End-->
            </div>
        </div>
    </div>
    <!--第二屏-->
    <div class="swiper-slide red-slide ">slider2</div>
    <!--第三屏-->
    <div class="swiper-slide orange-slide">slider3</div>
    <!--屏幕结束-->
  </div>
</div>
时间: 2024-11-09 01:38:58

swiper 增加同页面增加2个滚动的相关文章

关于easyUI在子页面增加显示tabs的一个问题

在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php 现在说的是在子页面点个按钮也能触发增加子页面的情况. 情景是,在父页面上有个div如: Html代码   <div class="easyui-tabs" id="main" fit="true" border="false"> <div tit

ecshop新建增加独立页面的方法

ecshop是通过php文件来指向dwt文件的,比如index.php是程序文件,那么其模板文件就是index.dwt 那么如果新建一个php文件来单独做其他作用呢?其实很简单 第一步: 将index.php复制一份newpage.php出来,这里newpage.php代表一个新页面,以后我们可以通过 http://你的域名/newpage.php来访问 第二步: 打开newpage.php 将里面所有index.dwt文件替换成newpage.dwt 第三步: 进入模板目录,比如默认模板目录

禾匠小程序二次开发:下单页面增加一项字段

禾匠二次开发,要再给订单增加一个字段怎么做呢? 1.首先在数据库order表里增加一个字段: 2.pages/new-order-submit/new-order-submit.wxml在小程序前端模板文件增加表单内容: 3.\zjhj_mall\core\modules\api\models\orderOrderSubmitForm.php在这个文件搜索 $order->content = $mch['content']; 在其下面增加你的字段: $order->xxxx = $mch['x

如何通过聚合页面技术让网站快速增加成倍页面数量与收录量?

聚合页技术是什么? 通过关键词去站内搜索出一些结果做成SEO友好的静态化页面.在聚合页面之间需要做一些内链,形成链轮,便于搜索引擎蜘蛛爬取,且在网站高权重页面增加链接入口,以吸引蜘蛛前来爬取页面的一种SEO技术方式. 聚合页技术可快速增加成倍页面数量与收录量? 这是一种被广泛验证的SEO技术了,各种大小网站均有应用,大家可以site一下各种网站的站内搜索域,就会有惊喜发现,下面举个例子: 其他的网站大家可以自行试试. 为什么可以增加成倍页面,一般做聚合页可以按内容:关键词的比例为1:1至1:5之

移动设备的HTML页面中图片实现滚动加载

如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时,要把页面加载完毕,可能就需要10s,20s甚至更多,严重影响用户的体验.针对这样的问题,让页面中的图片滚动加载(图片出现在显示器屏幕上时再加载图片)显得非常重要!这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题. 1.效果图.     这是加载过程中的图片菊花显示            

扒皮下腾讯网站地图页面页卡的滚动特效

今天要扒的是腾讯网站地图页面(http://www.qq.com/map/)页卡滚动效果,见下图 有兴趣的童鞋可以去那页面试一试,其动画效果见下图: 那么先理下思路:上方的按钮对应下方的某个栏目,点击某按钮时,其对应的栏目(暂且称为A吧)滚到最上方,原本在A前方的栏目则在滚动结束后自动跳到最后面(这里要注意顺序,比如在A前面有2个栏目B和C,那么B滚完便跳到最后,然后C开始滚,C滚完跳到最后面). 咱这里说的“跳”可以用append实现,即把前面的元素有序地移到最后.至于滚动,可以在全部栏目外围

页面中的平滑滚动——smooth-scroll.js的使用

正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery.smooth-scroll.min.js"></script> <script src=&qu

微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况

项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json 配置项可通过 { "disableScroll":true }   来禁用页面下拉滚动 不可在全局配置 app.json中配置 disableScroll 设置为 true 则页面整体不能上下滚动:只在 page.json 中有效,无法在 app.json 中设置该项   至此问题解决,

为页面增加滚动事件侦听,当页面滚动高度大于200,在页面右下方出现 返回顶部 按钮

1 <body> 2 <div style="height: 2000px;"></div> 3 <a href="#" id="backTop" style="display: none;position: fixed;bottom: 0;right: 0;">回到顶部</a> 4 <script> 5 window.addEventListener('