为什么不在旋转木马中显示所有图片

时间：2016-08-29 07:27:18

标签： jquery css carousel

我有6个图片块，但在旋转木马上只显示第3张图片。 我认为jquery有问题，但我不明白在哪里。 我对这些照片陷入了困境，我会很高兴任何暗示。 谢谢！

这里是带图像的块

<div id="collection-images" data-current="0">
  <div class="photo-box">
    <img id="image0" data-photo="1" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg">
  </div>
  <div class="photo-box">
    <img id="image2" data-photo="0" data-pos="front" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg">
  </div>
  <div class="photo-box">
    <img id="image1" data-photo="2" data-pos="left" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg">
  </div>
  <div class="photo-box">
    <img id="image3" data-photo="3" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg">
  </div>
  <div class="photo-box">
    <img id="image4" data-photo="4" data-pos="right" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg">
  </div>
  <div class="photo-box">
    <img id="image5" data-photo="5" data-pos="right" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg">
  </div>
</div>

＆＃13;
＆＃13; 
function onReady() {}

function goToClicked(num, pos) {
  setCollectionText(num);
  if (pos == 'front') {
    return true;
  } else if (pos == 'right') {
    rotateImages('left');
  } else {
    rotateImages('right');
  }
  return true;

}

function initCollection() {
  var d = getCollection();
  for (var i in d) {
    o = d[i];
    var swiperSlide = $("<div></div>");
    swiperSlide.addClass("swiper-slide");
    var centerDom = $("<center></center>");
    var reviewPolaroid = $("<div></div>");
    reviewPolaroid.addClass("review-polaroid");
    var polaroidInner = $("<div></div>");
    polaroidInner.addClass("polaroid-inner");
    var imgDom = $("<img/>");
    imgDom.attr("src", o.cphoto);
    var reviewHeader = $("<div></div>");
    reviewHeader.addClass("review-header");
    reviewHeader.html(o.title + ", Price" + o.avg.toString());
    var reviewQuote = $("<div></div>");
    reviewQuote.addClass("review-quote");
    reviewQuote.html(o.desc);
    polaroidInner.append(imgDom);
    polaroidInner.append(reviewHeader);
    polaroidInner.append(reviewQuote);
    reviewPolaroid.append(polaroidInner);
    centerDom.append(reviewPolaroid);
    swiperSlide.append(centerDom);
    $("#collection-swiper-wrapper").append(swiperSlide);
  }
}

function rotateImages(direction) {
  var l = $(".left-img");
  var r = $(".right-img");
  var f = $(".front-img");

  if (direction == 'right') {
    l.switchClass("left-img", "front-img").attr("data-pos", 'front');
    f.switchClass("front-img", "right-img").attr("data-pos", 'right');
    r.switchClass("right-img", "left-img").attr("data-pos", 'left');

  } else {
    l.switchClass("left-img", "right-img").attr("data-pos", 'right');
    f.switchClass("front-img", "left-img").attr("data-pos", 'left');
    r.switchClass("right-img", "front-img").attr("data-pos", 'front');
  }
}



function getCollection() {
  return [

    {
      title: 'Title 1',
      subtitle: 'Subtitle 1',
      sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg",
      cphoto: "http://issi.tv/wp-content/uploads/2016/08/2016-06-29-21.15.04.png",
      sname: 'Person',
      avg: 200,
      items: 5,
      brands: 5,
      desc: "Description 1"
    }, {
      title: 'Title 2',
      subtitle: 'Subtitle 2',
      sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg",
      cphoto: "http://issi.tv/wp-content/uploads/2014/05/Anna-Volik.jpg",
      sname: 'Person 2',
      avg: 202,
      items: 6,
      brands: 6,
      desc: "Description 2"
    }, {
      title: 'Title 3',
      subtitle: 'Subtitle 3',
      sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg",
      cphoto: "http://issi.tv/wp-content/uploads/2016/08/1Q9A0621.jpg",
      sname: 'Person 3',
      avg: 203,
      items: 7,
      brands: 7,
      desc: "Description 3"
    }, {
      title: 'Title 4',
      subtitle: 'Subtitle 4',
      sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg",
      cphoto: "http://issi.tv/wp-content/uploads/2016/08/2016-05-20-17.47.22.png",
      sname: 'Person 4',
      avg: 203,
      items: 7,
      brands: 7,
      desc: "Description 4"
    }, {
      title: 'Title 5',
      subtitle: 'Subtitle 5',
      sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg",
      cphoto: "http://issi.tv/wp-content/uploads/2016/07/Top-Men-Smart-Casual-Fashion-with-Pictures-of-Smart-Casual-Style-New-in-Design.jpg",
      sname: 'Person 5',
      avg: 203,
      items: 7,
      brands: 7,
      desc: "Description 5"
    }, {
      title: 'Title 6',
      subtitle: 'Subtitle 6',
      sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg",
      cphoto: "http://issi.tv/wp-content/uploads/2016/08/1Q9A0621.jpg",
      sname: 'Person 6',
      avg: 203,
      items: 7,
      brands: 7,
      desc: "Description 6"
    },
  ];
}

function setCollectionText(num) {
  var d = getCollection();

  var ind = Number(num);
  if (!isNaN(ind)) {
    ind = ind % 6;
    $("#collection-current").html((ind + 1).toString() + "/6");
    var da = d[ind];
    $("#collection-text").fadeOut(400, function() {
      $("#collection-title").html(da.title);
      $("#collection-subtitle").html(da.subtitle);
      $("#collection-stylist #stylist-name").html(da.sname);
      $("#collection-stylist img").attr("src", da.sphoto);
      $("#collection-price").html("$" + da.avg);
      $("#collection-items").html(da.items);
      $("#collection-brands").html(da.brands);
      $("#collection-desc").html(da.desc);
      $("#collection-text").fadeIn();
    });
  }

}

$(document).ready(function() {
  onReady();

  var mySwiper = new Swiper("#review-swiper", {
    loop: true,
    pagination: ".review-pagination",
    paginationClickable: true
  });

  $(".coll-img").click(function() {
    goToClicked($(this).attr("data-photo"), $(this).attr('data-pos'));
  });
  $("#collection-prev").click(function() {
    goToClicked($(".left-img").attr("data-photo"), 'left');
  });
  $("#collection-next").click(function() {
    goToClicked($(".right-img").attr("data-photo"), 'right');
  });

  goToClicked("0", 'front');

  initCollection();
  new Swiper("#collection-swiper", {
    loop: true,
    pagination: ".collection-pagination",
    paginationClickable: true
  });

});
＆＃13; 
body {
  background: #f2f2f2
}
.main {
  max-width: 1100px;
  margin: auto;
}
/*
	Styles for Sets post
*/

.sample-collection {
  height: 780px
}
.sample-collection #collection-large {
  display: block
}
.sample-collection #collection-small {
  display: none
}
.sample-collection #collection-title {
  font-size: 36px;
  font-family: "Raleway", serif;
  color: #2c3e50;
  margin-top: 100px;
  line-height: 60px;
  margin-bottom: 14px
}
.sample-collection #collection-subtitle {
  font-size: 16px;
  line-height: 24px;
  color: #455A64;
  text-transform: uppercase
}
.sample-collection #collection-stylist {
  margin-top: 40px
}
.sample-collection #collection-stylist img {
  width: 70px;
}
table#collection-stats-table,
table#collection-stats-table td,
table#collection-stats-table th {
  border: 0px;
  padding: 0px;
}
.sample-collection #collection-stylist table#collection-stats-table {
  font-family: Helvetica, "Karla", sans-serif;
  table-layout: fixed;
  width: 100%;
  margin: 20px 0px
}
.sample-collection #collection-stylist table#collection-stats-table .collection-stat {
  font-size: 30px;
  color: #90A4AE;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
  margin-bottom: 5px
}
.sample-collection #collection-stylist table#collection-stats-table .collection-label {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #90A4AE;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6
}
.sample-collection #collection-stylist #stylist-name {
  font-weight: 500;
  font-size: 24px;
  line-height: 121%;
  color: #2c3e50;
  display: inline-block;
  text-transform: uppercase
}
.sample-collection #collection-stylist #stylist-desc {
  margin-left: 10px;
  font-weight: 300;
  font-size: 18px;
  font-color: #455A64;
  font-style: italic;
  display: inline-block
}
.sample-collection #collection-stylist #collection-desc {
  font-size: 19px;
  color: #455A64;
  line-height: 156%
}
.sample-collection #collection-nav {
  text-align: center;
  margin-top: 20px
}
.sample-collection #collection-nav a {
  text-decoration: none;
  color: #5f5f5f;
  cursor: pointer;
}
.sample-collection #collection-images {
  height: 600px;
  position: relative
}
.sample-collection #collection-images img {
  position: absolute;
  width: 300px
}
.sample-collection #collection-images img:hover {
  cursor: pointer
}
.sample-collection #collection-images img.front-img {
  opacity: 1;
  top: 108px;
  left: 75px;
  z-index: 3
}
.sample-collection #collection-images img.left-img {
  opacity: .3;
  top: 70px;
  left: 0px;
  z-index: 1
}
.sample-collection #collection-images img.right-img {
  opacity: .3;
  top: 145px;
  left: 175px;
  z-index: 2
}
div#collection-large .col-md-12.col-sm-12 {
  margin-bottom: 0px;
}
@media (min-width: 768px) and (max-width: 979px) {
  .sample-collection {
    height: 620px
  }
  .sample-collection #collection-small {
    display: none
  }
  .sample-collection #collection-title {
    font-size: 48px;
    margin-top: 50px;
    line-height: 54px;
    margin-bottom: 10px
  }
  .sample-collection #collection-subtitle {
    font-size: 16px;
    line-height: 24px
  }
  .sample-collection #collection-stylist {
    margin-top: 40px
  }
  .sample-collection #collection-stylist img {
    max-width: none;
    width: 70px;
    height: 70px
  }
  .sample-collection #collection-stylist #collection-stats {
    padding-left: 10px
  }
  .sample-collection #collection-stylist #collection-stats table#collection-stats-table {
    margin: 20px 0px
  }
  .sample-collection #collection-stylist #collection-stats table#collection-stats-table .collection-stat {
    font-size: 24px
  }
  .sample-collection #collection-stylist #collection-stats table#collection-stats-table .collection-label {
    font-size: 14px
  }
  .sample-collection #collection-stylist #stylist-name {
    padding-left: 10px;
    font-size: 18px;
    line-height: 121%
  }
  .sample-collection #collection-stylist #stylist-desc {
    margin-left: 10px;
    font-size: 14px
  }
  .sample-collection #collection-stylist #collection-desc {
    font-size: 16px
  }
  .sample-collection #collection-images {
    height: 520px
  }
  .sample-collection #collection-images img {
    width: 250px
  }
  .sample-collection #collection-images img.front-img {
    left: 50px
  }
  .sample-collection #collection-images img.left-img {
    left: 0px
  }
  .sample-collection #collection-images img.right-img {
    left: 100px
  }
}
@media (max-width: 767px) {
  .ui-slider.ui-widget-content {
    margin: auto;
    width: 90%
  }
  .row-fluid .controls-row [class*="span"]+[class*="span"] {
    margin-left: 0
  }
  .slider-scale .slider-labels .slider-label.min-label {
    text-align: left;
    left: 0px !important
  }
  .slider-scale .slider-labels .slider-label.max-label {
    text-align: right;
    right: 0px !important
  }
  .sample-collection #collection-small {
    display: block
  }
  .sample-collection #collection-small .title {
    text-align: center;
    padding: 40px 0px 0px
  }
  .sample-collection #collection-small #collection-swiper {
    margin-top: 20px
  }
  .sample-collection #collection-small .review-polaroid {
    padding: 10px;
    background: #FFF;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
    margin: 0px auto;
    width: 70%;
    display: table;
    margin-bottom: 30px
  }
  .sample-collection #collection-small .review-polaroid .polaroid-inner {
    height: auto;
    overflow: hidden
  }
  .sample-collection #collection-small .review-polaroid .polaroid-inner img {
    max-height: 400px
  }
  .sample-collection #collection-small .review-polaroid .polaroid-inner .review-header {
    text-align: left;
    line-height: 158%;
    font-size: 14px;
    color: #AAAAAA;
    padding-bottom: 10px
  }
  .sample-collection #collection-small .review-polaroid .polaroid-inner .review-quote {
    font-size: 16px;
    color: #4E5154;
    font-style: italic;
    line-height: 18px;
    max-width: 100%;
    text-align: left
  }
  .sample-collection #collection-large {
    display: none
  }
  .sample-collection #collection-title {
    margin-top: 50px
  }
}
@media (max-width: 320px) {
  .sample-collection {
    height: 800px
  }
  .sample-collection #collection-small .review-polaroid .polaroid-inner img {
    max-height: 370px;
    width: 250px
  }
  .reviews #review-small img {
    width: 250px
  }
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="main">

  <div class="sample-collection">
    <div id="collection-small">
      <div class="row">
        <div class="col-md-12 col-sm-12 title">
          <h2>A sample of what we send</h2>
          <div class="gray-line middle short"></div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12 col-sm-12">
          <div class="swiper-container swiper-container-horizontal" id="collection-swiper">
            <div class="swiper-wrapper" id="collection-swiper-wrapper"></div>

            <div class="collection-pagination swiper-pagination swiper-pagination-clickable"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- #collection-small -->
    <div class="row" id="collection-large">
      <div class="col-md-6 col-sm-6">
        <div id="collection-text" style="display: block;">
          <div id="collection-title"></div>
          <div id="collection-subtitle"></div>
          <div id="collection-stylist" class="row">
            <div class="col-md-2 col-sm-2">
              <img />
            </div>
            <div class="col-md-10 col-sm-10">
              <div>
                <div id="stylist-name"></div>
                <div id="stylist-desc"></div>
              </div>
              <div id="collection-stats">
                <table id="collection-stats-table">
                  <tbody>
                    <tr>
                      <td>
                        <div id="collection-price" class="collection-stat"></div>
                        <div class="collection-label">avg price</div>
                      </td>
                      <td>
                        <div id="collection-brands" class="collection-stat"></div>
                        <div class="collection-label">brands</div>
                      </td>
                      <td>
                        <div id="collection-items" class="collection-stat"></div>
                        <div class="collection-label">items</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div id="collection-desc"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-sm-6">
        <div class="row">
          <div class="col-md-12 col-sm-12">
            <div id="collection-carousel">
              <div id="collection-images" data-current="0">
                <div class="photo-box">
                  <img id="image0" data-photo="1" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg">
                </div>
                <div class="photo-box">
                  <img id="image2" data-photo="0" data-pos="front" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg">
                </div>
                <div class="photo-box">
                  <img id="image1" data-photo="2" data-pos="left" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg">
                </div>
                <div class="photo-box">
                  <img id="image3" data-photo="3" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg">
                </div>
                <div class="photo-box">
                  <img id="image4" data-photo="4" data-pos="right" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg">
                </div>
                <div class="photo-box">
                  <img id="image5" data-photo="5" data-pos="right" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12">
            <div id="collection-nav">
              <a id="collection-prev">&larr;</a>&nbsp;&nbsp;&nbsp;
              <span id="collection-current"></span>&nbsp;&nbsp;&nbsp;
              <a id="collection-next">&rarr;</a>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- #collection-large -->

  </div>
  <!-- /sample-collection  -->

</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

里面

$("#collection-prev").click(function() {
    goToClicked($(".left-img").attr("data-photo"), 'left');
  });
  $("#collection-next").click(function() {
    goToClicked($(".right-img").attr("data-photo"), 'right');
  });
上一页和下一页中的

$（“。left-img”）;, $（“。right-img”）返回两个对象，你刚刚选中了attr（“data-photo”），它将为第一个如此处理数组

答案 1 :(得分：-1)

更改其余图像的图像链接

Private Function GetDataFromADO(ByVal Sel As String) As ADODB.Recordset

'Declare variables'
    Dim objMyConn As ADODB.Connection
    Dim objMyCmd As ADODB.Command
    Dim objMyRecordset As ADODB.Recordset

    Set objMyConn = New ADODB.Connection
    Set objMyCmd = New ADODB.Command
    Set objMyRecordset = New ADODB.Recordset

'Open Connection'
    objMyConn.ConnectionString = "Provider=SQLOLEDB;Data Source=" & sqlServer & ";Database=" & _
        sqlDB & ";User ID=" & sqlUsername & ";Password=" & sqlPassword & ";"
    Dim s As String
    s = objMyConn.ConnectionString
    objMyConn.Open


'Set and Excecute SQL Command'
    Set objMyCmd.ActiveConnection = objMyConn
    objMyCmd.CommandText = Sel
    objMyCmd.CommandType = adCmdText

'Open Recordset'
    Set objMyRecordset.Source = objMyCmd
    objMyRecordset.Open


Set GetDataFromADO = objMyRecordset

在 cphoto: "http://issi.tv/wp-content/uploads/2016/08/1Q9A0621.jpg", 函数

中

最近3张图片有相同的链接

由于您使用getCollection()函数

获取的数据重新分配img的src 
getCollection
相关问题
最新问题