javascript - Cycle2 寻呼机不显示-6ren

javascript - Cycle2 寻呼机不显示

转载作者：行者123 更新时间：2023-11-28 05:01:35

25

4

我正在使用 jquery cycle2 slider ，但我的 jquery cycle2 slider 寻呼机没有显示在 slider 图像上，即使我在那里尝试了演示代码我想在 slider 底部显示寻呼机但它没有对齐请检查我的代码并帮助我。

*{
    margin: 0;
    padding: 0;
}

header{
    position: fixed;
    z-index: 777;
}

/* Top Menu Start Here */

.top_nav{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 1;
    transition:all 0.7s ease;
    -webkit-transition:all 0.7s ease;
    -moz-transition:all 0.7s ease;
    -o-transition:all 0.7s ease;
    -ms-transition:all 0.7s ease;
}

.container{
    height: 100vh;
    width: 100%;
    max-width: 100%;
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
}

.site-dt{
    background-color: #fff;
    height: 573px;
    width: 100%;
}


#slider-main{
    height: 578px;
    width: 100%;
    overflow: hidden;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#slider-main #slider img{
    height: 100%;
    width: 100%;
}

.section_about{
    height: 573px;
    width: 100%;
    background-color: #de5670;
    overflow: hidden;
    position: absolute;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<Script type ="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<header>
    <div class="top_nav">
    </div>
</header>
<div class="container">
</div>
<div id="slider-main">
<div id="slider" class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    >
    <div class="cycle-pager">

    </div>
<img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>
</div>
<div class="section_about">

</div>
</html>

最佳答案

我在 fiddle 中稍微调整了一下。 html 有点困惑，我认为您可能添加了太多重叠的 css。希望这会让您朝着正确的方向前进。

此外，您还加载了两次 Jquery，但无济于事:)

*{
    margin: 0;
    padding: 0;
}

header{
    position: fixed;
    z-index: 777;
}

/* Top Menu Start Here */

.top_nav{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 1;
    transition:all 0.7s ease;
    -webkit-transition:all 0.7s ease;
    -moz-transition:all 0.7s ease;
    -o-transition:all 0.7s ease;
    -ms-transition:all 0.7s ease;
}

.container{
    /*height: 100vh;
    width: 100%;
    max-width: 100%;*/
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
}
/*
.site-dt{
    background-color: #fff;
    height: 573px;
    width: 100%;
}


#slider-main{
    height: 578px;
    width: 100%;
    overflow: hidden;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#slider-main #slider img{
    height: 100%;
    width: 100%;
}
*/
.section_about{
    height: 573px;
    /*width: 100%;*/
    background-color: #de5670;
    /*overflow: hidden;
    position: absolute;*/
}

.cycle-pager {
    background: white;
}
.cycle-pager span {
    padding: 10px;
    cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://malsup.github.io/min/jquery.cycle2.min.js"></script>
<header>
    <div class="top_nav">
    </div>
</header>
<div class="container">

  <div id="slider-main">
    <div id="slider" class="cycle-slideshow" 
      data-cycle-fx=scrollHorz
      data-cycle-timeout=2000
      >
      <div class="cycle-pager">

      </div>
    <img src="http://malsup.github.io/images/p1.jpg">
        <img src="http://malsup.github.io/images/p2.jpg">
        <img src="http://malsup.github.io/images/p3.jpg">
        <img src="http://malsup.github.io/images/p4.jpg">
    </div>
  </div>


  <div class="section_about">

  </div>

</div>

关于javascript - Cycle2 寻呼机不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40072269/

25

4

0

文章推荐： javascript - ServiceWorker ifs为特定内容定义特定缓存

文章推荐： javascript - 为什么 Rx.Observable.throw(x) 实际上没有抛出？

文章推荐： c++ - 构造后调用 delete 抛出异常

文章推荐： javascript - SVG + Chrome : Strange Rendering with Many Circles

android垂直滚动条/寻呼机？
我需要能够垂直翻转一组图像。我看过使用 ViewPager，但它似乎只支持水平分页。我也查看了 Gallery，但我也没有看到垂直分页的方法。无论如何，它已被弃用，取而代之的是 Horizont
Drupal View 寻呼机
我正在使用寻呼机中内置的 View ，并且希望有一个“显示全部”选项。即显示全部第 2 页，共 10 页。实现这一目标的最佳方法是什么？史蒂夫最佳答案史蒂文，您可以克隆您的实际显示，然后在
Markdown 语法着色减少(寻呼机)
当我使用 vim 编辑 Markdown 文件时，我有很好的语法着色(通过 vim-markdown 和 vim-markdown-preview 插件)。当我使用 less(寻呼机)查看文件时，我
带有自动滚动指示器的 Android View 寻呼机
在我的 Android 应用程序中，我已经能够在一段时间后自动滚动查看寻呼机。我找不到显示滚动发生前剩余时间的寻呼机指示器。我在下面附上了一个网站的屏幕截图，以了解我想要实现的目标。如果您可以共享
中继器的 JSF2 寻呼/寻呼机
当您编写的每个代码都立即运行并且您未按时完成计划时，您是否知道这种感觉:-P 就像'哦，是的，现在我有时间让它变得完美'。这就是我现在的位置^^ 所以我用 JSF (ui:repeat) 实现了一个转
android - 如何为列表的每个项目设置 View 寻呼机
我在 Android 应用程序中有一个项目列表，我希望每个项目都在一个页面上。问题是每个项目都设置了一个带有 imageview 的布局，它从一个唯一的 url 下载它的图像。这有可能实现吗？如何实现
android - 如何同步两个 View 寻呼机
我想同步两个 View 寻呼机之间的触摸事件。我已经试过了，但没有发现任何效果。 viewPager.setOnTouchListener(new View.OnTouchListener() {
android - 带页面指示器的无尽自动 ScrollView 寻呼机
我必须构建具有无限自动滚动功能的 View 寻呼机。我还需要在 View 寻呼机下方显示一个页面指示器，它应该根据滚动事件做出响应。目前我已经为无限自动滚动应用了以下逻辑: public void s
android - 如何使用异步任务来控制 View 寻呼机
我正在尝试按照一些教程使用 View 寻呼机创建一个自动图像 slider 。我让一切正常，但后来我看到了编舞:跳过 1 帧!应用程序可能在其主线程上做了太多工作。并搜索了错误。` 你看，在我的代
android - 如何在android中制作圆形 View 寻呼机？
如何从viewpager的第0个index跳转到view pager的最后一个index？那就是如何让view pager循环呢？如果用户向左滑动，我想跳转到最后一个索引；如果用户向右滑动，我想从最后
ios - Swift:视频和图像播放器(寻呼机)
我在一个 iOS 应用程序上工作，它从服务器获取视频和图像，每个对象都有很多图像和视频，我需要在 slider (寻呼机)中显示这些图像和视频，用户可以在其中滑动以获取下一个，并且我需要将这些视频和图
c# - 寻呼机 HTML 查看器
我们目前正在使用 VS 2008 C# 开发 Windows 窗体应用程序。此应用程序用于阅读长(200 - 300 页)的法律文件，它处理大约 30 - 40 个文档。应用程序在文档文本中搜索，在文
android - 如何在android中单击按钮显示特定页面的 View 寻呼机
我正在开发一个项目，其中我在一个屏幕上使用 View Pager，如下所示: 但是你可以在那里看到，有一个上层布局，其中列出了根据显示的页面选择的年份。当我们滑动 View 寻呼机时，年份也会根据显示
带有页面指示器的 Android View 寻呼机
我需要在带有图像的 View 寻呼机文件中获取页面指示器。这是我的代码。 public class IndicatorActivity extends Activity { /** Called w
javascript - (bxslider) 使用带有文字而不是圆圈的 slider 寻呼机
有没有办法用代表每张幻灯片的单词替换寻呼机中 slider 的圆圈(就像可单击的菜单，滑动其下方的内容)？选项在这里http://bxslider.com/options但不确定哪一个可以实现这一目标
java - float 操作按钮和 View 寻呼机
ViewPager 叠加在 fab 之上。如何将 fab 放在首位？ xml: 或者也许这不是原因？当我在上面时，只是没有按下按钮，但选项卡被翻转。最佳答案 Coordinat
带有卡片堆栈的 Android 垂直 View 寻呼机
我正在尝试实现一个垂直可滑动的ViewPager，它有一堆卡片，就像外观一样。我能够使用 ViewPager.PageTransformer 并交换触摸点来实现 VerticalViewPager。
android - 以编程方式创建/添加 View 寻呼机
我无法以编程方式创建和添加 View 寻呼机。我找到了这个问题Android create ViewPager programmatically但接受的答案对我不起作用。相关代码如下。
android - 如何在没有标签的情况下获取当前 View 寻呼机 View ？
我有一个 View 寻呼机，其中每个页面都是一个自定义 View ( ... 而不是 Fragment )，我正在使用 LayoutInflator 进行扩充。 .每个自定义 View 都有一个 Im
javascript - jQuery:动画 slider 寻呼机
我已经使用 jQuery 设置了一个动画 slider : jsFiddle 演示:http://jsfiddle.net/neal_fletcher/9zRDV/ 原因是我想在幻灯片上实现轻微的悬垂

首页

博学

6Ren·AI

商城

javascript - Cycle2 寻呼机不显示