个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 17:32:31 26 4
gpt4 key购买 nike

我在我的网站上添加了一个图像轮播，一切都很好，直到我尝试在 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/

26 4 0
文章推荐： iphone - 使用类型为 'NSMutableArray *__strong' 的表达式初始化 'SecondViewController *' 的不兼容指针类型
文章推荐： python - NLTK，将单词数字读入 float
文章推荐： iphone - 当我更改 Localizable.strings (en) 时，另一个 Localizable.strings (ru) 也会更改
文章推荐： css - 如何停止 ReSharper 删除 css 属性后的空格
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com