javascript - 添加 href 时，图像轮播中断将图像推出 slider-6ren

javascript - 添加 href 时，图像轮播中断将图像推出 slider

转载作者：行者123 更新时间：2023-11-28 17:32:31

我在我的网站上添加了一个图像轮播，一切都很好，直到我尝试在 img scr 链接周围添加一个 href 标签。它将图像从 slider 中推出我已经在下面放置了一个链接，指向它的外观。我确实认为这是一些 css 将其推出，但在删除所有周围的标签后，图像保持不变。我需要这个，这样我就可以在点击时向图像添加一个灯箱。

slider 图片链接

https://dl.dropboxusercontent.com/u/9833562/caratest.png

我无法让它在 JSFiddle 上运行，所以这是一个下载我的文件的链接

http://jonathanlowe.co.uk/ws/download/carousel_file.zip

 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
      <link rel="icon" href="img/favicon.ico" type="image/x-icon">  
    <title>TEST</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/queries.css">

    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/chgrid.css" />

      <!-- Fonts -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


    <![endif]-->

CSS

        <style media="screen">


    .containerslide {
      width: 90%;
      height: auto;
      position: relative;
      margin: 0 auto;


    }
    .roundabout-holder {
      padding: 0px;
      margin: 0 auto;
      height: 310px;
      width: 100%;


    }

    .roundabout-moveable-item {
      height: 350px;
      width: 380px;
      cursor: pointer;
      display:block;

    }

    .roundabout-moveable-item img {
      height: 100%;
      width: 100%;
    }

    .roundabout-in-focus {
      cursor: auto;
    }

    #carousel-descriptions {
      list-style:none;
      display:block;
      width:850px;

      padding:0;
    }

    #carousel-descriptions li {
      font-size:24px;
      font-weight:bold;
      text-align:center;
      display:none;
    }

    #carousel-descriptions li.current {
      display:block;
    }

    #carousel-controls2 {
      max-width:920px;

      margin:25px auto;
      overflow:auto;



    }

    #carousel-controls2 span {
      width:100px;

      font-size:14px;
      text-align:center;
      margin:0 5px;

      cursor:pointer;

      background:#fff;      
    }
    #carousel-controls {


      width: 320px;
      margin:25px auto;
      overflow:auto;
      border-collapse:collapse;
      text-align:center;
      margin-top: -20px;
    }

    #carousel-controls span {
      height: 13px;
      width: 13px;
      display:inline-block;
      font-size:14px;
      text-align:center;
      margin:0 5px;
      padding:1px;
      cursor:pointer;
      border:0.5px solid black;
      background:#c6c6c6;
       -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px; /* future proofing */
      -khtml-border-radius: 6px; /* for old Konqueror browsers */      
    }

    #carousel-controls .current {
      background:#000;
      color:;

    }
    #carousel {
      margin-bottom:-25px;

    }
     #carousel img{
      padding: 30px;

    }
    #carousel img:hover { 
      padding:0px;

    }

    .prev-button{
      padding-bottom:3px; 
      font-size: 22px;
      background:#333;
      width:100px;
      height: 30px;
      color:#fff;
      float: left;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px; /* future proofing */
      -khtml-border-radius: 5px; /* for old Konqueror browsers */

    }
    .next-button{
      padding-bottom:3px; 
      font-size: 22px; 
      background:#333;
      width:100px;
      height: 30px;
      color:#fff;
      float: right;
       -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px; /* future proofing */
      -khtml-border-radius: 5px; /* for old Konqueror browsers */

    }
}

  </style>

  </head>

HTML

  <body>

    <div class="text-inter">
    <div class="container">
      <div class="row">

      <div class="col-lg-12">
          <h1></h1>

          <section class="containerslide">

              <div id="carousel">

                <a href="#">
                 <img src="img/mactest.png" alt="" class="slide" style="" />
                 </a>
                <img src="img/mactest.png" height="50px" alt="" class="slide"  />
               <img src="img/mactest.png" alt="" class="slide" />
               <img src="img/mactest.png" alt="" class="slide" />
               <img src="img/mactest.png" alt="" class="slide" />
               <img src="img/mactest.png" alt="" class="slide" />
               <img src="img/mactest.png" alt="" class="slide" />
               <img src="img/mactest.png" alt="" class="slide" />
               <img src="img/mactest.png" alt="" class="slide" />
               <img src="img/mactest.png" alt="" class="slide" />
              </div>
              </section>



              <div id="carousel-controls2" >
              <span><a href="#"><div class="prev-button" style=""><<</div></a></span>

              <span><a href="#"><div class="next-button" style="">>></div></a></span>

              <div id="carousel-controls" >
                <span class="control current"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                <span class="control"></span>
                </div>
              </div>

      </div> <!-- col-md-12 End -->

JavaScript

              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

              <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js">\x3C/script>')</script>

              <script src="js/bootstrap.min.js"></script>



               <script type="text/javascript" src="js/shadowbox.js"></script>
                <script type="text/javascript">
                Shadowbox.init();
                </script>

              <script src="js/jquery.roundabout.min.js"></script> <!-- Roundabout Link -->
              <!-- Roundabout Script Start -->

              <script type="text/javascript"> 
              (function($) {

              var $descriptions = $('#carousel-descriptions').children('li'),
                $controls = $('#carousel-controls').find('span'),
                $carousel = $('#carousel')
                  .roundabout({childSelector:"img", 
                    minOpacity:1,
                    autoplay:false, 
                    autoplayDuration:50000000,
                    btnNext: true,
                    btnPrev: true,
                    maxZ:380,
                    minZ:200,
                    maxScale: 0.99,
                    responsive:true,
                    clickToFocus: false,
                    autoplayPauseOnHover:true })
                  .on('focus', 'img', function() {
                    var slideNum = $carousel.roundabout("getChildInFocus");

                    $descriptions.add($controls).removeClass('current');
                    $($descriptions.get(slideNum)).addClass('current');
                    $($controls.get(slideNum)).addClass('current');
                  });

              $controls.on('click dblclick', function() {
                var slideNum = -1,
                  i = 0, len = $controls.length;

                for (; i<len; i++) {
                  if (this === $controls.get(i)) {
                    slideNum = i;
                    break;
                  }
                }

                if (slideNum >= 0) {
                  $controls.removeClass('current');
                  $(this).addClass('current');
                  $carousel.roundabout('animateToChild', slideNum);
                }
              });

              }(jQuery));


              </script>

              <script>

              $('.next-button').on('click', function() {
                  $('#carousel').roundabout("animateToNextChild")
              });


              $('.prev-button').on('click', function() {
                  $('#carousel').roundabout("animateToPreviousChild")
              });

              </script> <!-- Roundabout Slider End -->


  </body>
</html>

最佳答案

您可以使用数据属性并使用 jQuery 设置您的链接(以避免必须编辑您的 roundabout.js 实现。 JSFiddle DEMO

<img src="http://lorempixel.com/200/200" 
     class="slide" 
     data-link="http://www.google.com" />

// this function should be in your page load function
$('.slide').click(function(){
    window.open($(this).attr("data-link"), "_blank");
    // you can use "_self" to open it in the same tab (the jsfiddle wont allow that though)
});

// and this little bit of CSS with give you the pointer clickable link
.slide[data-link] {
    cursor: pointer;
}

关于javascript - 添加 href 时，图像轮播中断将图像推出 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25747076/

文章推荐： python - NLTK，将单词数字读入 float

文章推荐： css - 如何停止 ReSharper 删除 css 属性后的空格

deployment - 推出 MSI 文件
我有一个传统上作为 MSI 文件提供的产品。它由我们的各种客户通过某种形式的 SMS 推送部署到数千个桌面。我们用来创建这些安装程序的软件正在使用中，我们正在寻找替换它。由于我们支持许多操作系统，我们
JaCoCo 推出 Android Coverage
我们有一个使用 Gradle/Android Studio 构建的 Android 应用程序，并使用 JaCoCo 为我们的单元测试生成代码覆盖率报告；这很好用。我们也有兴趣能够为手动测试生成覆盖率报
sql - 数据库修改脚本 - 推出/回滚最佳实践？
我正在寻找有关数据库脚本修改的最佳实践的见解，这些修改与软件系统的其他代码更改一起进行。我曾经在一家公司工作，该公司坚持每次推出都要准备好回滚，以防出现问题。这听起来很合理，但在我看来，通过脚本部署
Android 推出 Twitter Intent
我使用下面的代码通过 Intent 启动 Twitter，但它不起作用。我的手机上安装了 twitter 应用程序。 Intent shareIntent = new Intent(android.c
macos - AppleScript 推出 1Password mini
我用 1Password存储我的密码，以及 fluid.app创建一些特定于站点的应用程序/浏览器虽然 1Password与 Chrome、Safari 和其他浏览器很好地集成，它不能很好地与 Fl
Android 推出 google maps transit
我如何启动 google maps transit get directions，以便当我按坐标或地点名称输入源和目的地时，google maps 会建议公交(公交路线)方向。这是骑自行车的代码，但我
android - 推出 SDK OTA 更新
我已经为 Android 应用程序开发了一个 SDK。我们有很多客户在应用程序中使用这个 SDK。现在我已经更新了我的 SDK。我正在寻找一种方法可以在应用程序中反射(reflect)这些更改，而无需
html - Flex Growth 应该只占用可用空间并防止将长文本的 child 推出
我有一个带 child 的 flex 容器，每个 child 都有一些内容(没有固定宽度的)，并且在一个 child 上我使用 flex-grow: 1;将其填充到剩余的可用空间。有时，正在成长的
java - 推出 java web start 客户端
我们即将推出使用 java web start 构建的客户端服务器应用程序。我们的主服务器位于欧洲的一个国家，第一天就会有许多用户从世界各地下载我们的客户端。由于客户端应用程序相当大(MB)，因此我们
jquery - HTML Mouseover image over image 推出
我已经尝试了很多组合，而这个是最接近我需要的组合。我需要的是一个图像 (img1)，上面有另一个(较小的)图像 (img2)，当我翻转 img1 时，我希望它淡入(并在滚出时淡出)，而 img2 保
推出 AR 眼镜前，苹果或将先推出一款 VR 头戴设备
北京时间 1 月 21 日晚间消息，知情人士今日称，苹果公司的首款 VR/AR(虚拟现实 / 增强现实)头显将是一款昂贵的小众产品，有望于 2022 年推出。这款产品主要为了将来更主流的 “AR
ios - Swift/iOS 推出 Apple Pay 特定支付通行证
搜索 Apple Pay/Passkit/Wallet 文档，我发现代码示例很少，文档也很差。我们尝试提供我们已配置的支付通行证，而不仅仅是使用 openPaymentSetup() 启动钱包。根据
Android 动画 View 进入屏幕，将当前全屏 View 推出
我需要这个用于 API11 之前的项目。我正在寻找一种从右侧添加 View 的方法，这将导致当前全屏 View 向左移出，以便在屏幕中显示新 View 。新 View 大约是屏幕宽度的 1/3，这
electron - Spectron 推出 10 个窗口； 10 次尝试后客户端初始化失败，挂起并失败
Electron v1.8.2 Spectron v3.8.0 添加光谱测试，但即使是非常基本的测试也会失败。尝试运行: const { Application } = require('spect
javascript - 翻转链接 == 更改类。推出 div == 改回类。不工作。帮助
这是我最简单的问题。让我试着把它弄清楚。我有一个 div，在本例中称为 "testdiv"，它附加了一个类名 "menulink"。 div 中有一个链接。当我滚动链接时，我希望 div 类更改为
jquery - 单击时将 li 元素展开 100% 宽度并将 sibling 推出
我想将 li 元素排列在任意数量的列中。 Yellow Block Red Block Green
html - 试图将 child 推出 parent ，但 parent 获得滚动条
我试图将 child 推到 parent 的盒子外面，但是，似乎 parent 只是在长度上扩展并获得一个滚动条，所以 child 留在里面，并且在 parent 外面不可见。 .parent {
c# - 推出 Beta 版时的 Google Play 游戏服务 : ERROR_NOT_AUTHORIZED,
Google Play 游戏服务:SIGN_IN 状态:ERROR_NOT_AUTHORIZED，推出 Beta 版时。还有这个:- W Auth : [GetToken] GetToken f
android - 编写 : wrap text in Row layout, 而不是将 sibling 推出
我正在尝试使用 Jetpack Compose，但我对 Row 的行为感到困惑。我在图标按钮旁边有一个文本，我希望图标按钮锚定在最小宽度为 48dp 的一侧，并在其周围环绕文本。像这样: 但是文本没有
javascript - 神秘(对我来说) "object doesn' t 支持此属性或方法错误 - JavaScript HTML 推出
我从第四行的字符 1 中收到上述错误...不知道是什么抛出了它？我确信这是我看不到的简单事情...... out = out + "Select Box Information The name of

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 添加 href 时，图像轮播中断将图像推出 slider