Question

我在我的网站上添加了一个图片轮播，一切都运行良好，直到我尝试在img scr链接周围添加一个href标签。它将图像推出滑块我已经将链接显示在下面的内容中。我确实认为这是一些推动它的css，但在删除所有周围的标签后，图像保持不变。我需要这个，所以我可以在点击时为图像添加一个灯箱。

链接到滑块的图像

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>

Answer 1

您可以使用数据属性并使用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;
}

添加href时，图像轮播会将图像从滑块中推出

1 个答案: