幻灯片分页Javascript / Jquery没有插件

Question

此处代码https://jsfiddle.net/bbayo/gmvex82e/4/

我想在菜单中制作一个分页幻灯片，如（瘦，直，耀斑）给幻灯片显示控件示例箭头和x关闭。我做了一些事但被卡住了。

现在，如果你点击瘦，你会得到一个幻灯片，但如果你改为直接或男友，它会给你内容，但没有箭头。

在此处查看https://jsfiddle.net/bbayo/gmvex82e/4/

<div class="denim-destination-container">
  <div class="denim-destination-content">
    <div class="fits">
    </div>
  </div>
<div>

感谢任何帮助。谢谢

Answer 1

1.您的帖子没有显示您的整个代码，以弄清楚您面临的问题，而其他人无法理解您想要问的内容。（尽管您在jsfiddle中发布了代码，但是你在这里发布的是简单的HTML，并且它不够清楚，其他人无法理解你的问题）

2.为什么你的控制箭头和关闭按钮没有显示是因为你的.hide包含你的控件

<div id="macysSlideshow" class="hide">
<div id="macysSlideshowWrapper" >
    <div id="skinny" class="macysSlide show">
        <div class="slide-container">
            <img src="xxx.jpg" alt="" />
        </div>
    </div>
    <!-- and more divs -->
</div>
<div class="denim-close " id="x-img">
    <a href="#fits"><img src="xxx"/></a>
</div>
<div class="arrow" id="arrow_right">
    <img src="xxx"/>
</div>
<div class="arrow" id="arrow_left">
    <img src="xxx"/>
</div>

并且你的javscript控件只显示你的滑块div而不是你的控制div。

$(".link").click(function() {    
$(".hide").hide();
var dataType = $(this).attr('data-type');
   $("#" + dataType).show();
});

这是固定代码。

检查html和javascript部分。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".link").click(function() {
    $(".hide").hide();
    $(".control").show();
    var dataType = $(this).data('type');
    $("#" + dataType).show();
  });

  var currentPosition = 0,
    counter = 0,
    slideWidth = 886,
    slides = $('.macysSlide'),
    numSlides = slides.length,
    selectedClass;

  function displayArrows(position) {

    for (var i = 0; i < numSlides; i += 1) {
      if (i == position) {
        $(".activeslide").remove();
      } else {
        $("li.navPos" + i).css('color', '#8a8a8a');
      }
    }
  }

  function moveSlide() {
    console.log(slideWidth);
    console.log(currentPosition);
    $('#macysSlideshowWrapper').animate({
      'margin-left': (slideWidth * -currentPosition)
    })
  }

  $('.arrow').click(function() {
    currentPosition = parseInt(currentPosition);
    if ($(this).attr('id') == 'arrow_right') {
      if (currentPosition == (numSlides - 1)) {
        currentPosition = 0;
      } else {
        currentPosition = currentPosition + 1;
      }
    } else if ($(this).attr('id') == 'arrow_left') {
      if (currentPosition == 0) {
        currentPosition = numSlides - 1;
      } else {
        currentPosition = currentPosition - 1;
      }
    }

    displayArrows(currentPosition);
    moveSlide();
  });

  displayArrows(currentPosition);

  $(".fits-bottom-nav li").click(function() {
    moveSlide();
    //            selectedClass=$(this).attr('class');
    //            console.log('selectedClass', selectedClass);
    //            currentPosition = selectedClass[6];
    currentPosition = $(this).find("a").data('index');
    console.log('currentPosition', currentPosition);
    displayArrows(currentPosition);
    moveSlide();
  });

  $(".control").hide();

});

＆＃13;

ul {
  margin: 0 0 1.5em;
  /* 24 / 16 */
  padding: 0;
}
li {
  line-height: 1.5;
  /* 24 / 16 */
  margin: 0;
  display: inline-block;
  cursor: pointer;
  padding: 32px;
}
.denim-destination-container {
  width: 900px;
  margin: 0 auto;
  line-height: 0;
}
.denim-nav ul li a.active {
  color: yellow;
}
.denim-destination-content {
  border-top: 7px solid #34496C;
  border-right: 7px solid #34496C;
  border-left: 7px solid #34496C;
  width: 886px;
  height: 2532px;
}
/* fits styles */

.fits,
.washes {
  position: relative;
}
.fits-top-nav {
  position: absolute;
  top: -22px;
  left: 50px;
}
.fits-top-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-style: italic;
  margin: 5px;
}
.fits-top-nav li a:hover {
  color: yellow;
}
.fits-bottom-nav {
  position: absolute;
  top: 576px;
  left: 34px;
}
.fits-bottom-nav li a {
  color: #485977;
  text-decoration: none;
  font-size: 14px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
  margin-left: -8px;
}
.fits-bottom-nav .active a {
  background-color: #ccc !important
}
.washes-top-nav {
  position: absolute;
  top: 512px;
  left: -17px;
}
.washes-top-nav li {
  line-height: 18px;
  margin-left: 20px
}
.washes-top-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-style: italic;
  margin: 5px;
}
/* slide styles */

#macysSlideshow {
  /*width and height of the slides go here*/
  height: 636px;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  top: 173px;
  clear: both;
}
#macysSlideshowWrapper {
  /*width of all the slides combined (slidesWidth * 3) goes here*/
  /* width:6300px;
         height:636px;*/
}
.macysSlide {
  /*slide with and height goes here*/
  width: 886px;
  height: 636px;
  float: left;
  position: relative;
  margin: 0;
}
.slide-container {
  position: relative;
  display: inline-block;
  float: left;
  width: 886px;
}
.arrow,
.denim-close {
  position: absolute;
  cursor: pointer;
}
/*add left and right arrow positioning*/

#arrow_left {
  top: 30%;
  left: 15px;
  padding-top: 1px;
  z-index: 100;
}
#arrow_right {
  top: 30%;
  left: 855px;
  padding-top: 1px;
  z-index: 100;
}
#x-img {
  top: 1%;
  left: 850px;
  padding-top: 1px;
  z-index: 100;
}
/* BRANDS STYLE */

#brands {
  position: relative;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #34496c;
  margin-top: 205px;
}
.brand-content {
  position: absolute;
  top: 200px;
  left: 400px;
}
.dotted {
  border-bottom: 3px dashed #34496c;
  text-decoration: none;
  font-size: 20px;
}
.brands-list li {
  display: inline;
}
.brands-list a {
  display: inline-block;
  padding: 5px;
  margin-right: 55px;
  color: #34496c;
}
.new-noteworthy-list {
  width: 611px;
  margin-top: 25px;
  margin-left: -25px;
}
.all-time-fav-list {
  width: 580px;
  margin-top: 25px;
  margin-left: -25px;
}
/* how to wear it styles */

label,
a {
  color: teal;
  cursor: pointer;
  text-decoration: none;
}
#slider {
  margin: 0 auto;
}
/* NEW EXPERIMENT */

/* Slider Setup */

input {
  display: none;
}
#slide1:checked ~ #slides .inner {
  margin-left: 0;
}
#slide2:checked ~ #slides .inner {
  margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
  margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
  margin-left: -300%;
}
#slide5:checked ~ #slides .inner {
  margin-left: -400%;
}
#slide6:checked ~ #slides .inner {
  margin-left: -500%;
}
#slide7:checked ~ #slides .inner {
  margin-left: -600%;
}
#overflow {
  overflow: hidden;
  height: 774px;
}
article img {
  width: 100%;
}
#slides .inner {
  width: 700%;
  line-height: 0;
}
#slides article {
  /*width: 20%;*/
  float: left;
}
/* Control Setup */

#controls {
  margin: -29.9% 0 0 0;
  width: 100%;
}
#controls label {
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.3;
}
#active {
  /*margin: 20% 0 0;*/
  text-align: center;
  position: absolute;
  margin-left: 250px;
  margin-top: 175px;
}
#active label {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;
  margin-left: 35px;
}
#active label:hover {
  background: #eacf54;
  border-color: #777 !important;
}
#controls label {
  opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(6),
#slide6:checked ~ #controls label:nth-child(7),
#slide7:checked ~ #controls label:nth-child(1) {
  background: url('../images/denim-right-arr-01.png') no-repeat;
  float: right;
  margin: -190px -20px 0 0;
  display: block;
}
#slide1:checked ~ #controls label:nth-child(7),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),
#slide6:checked ~ #controls label:nth-child(5),
#slide7:checked ~ #controls label:nth-child(6) {
  background: url('../images/denim-left-arr-01.png') no-repeat;
  float: left;
  margin: -190px 0 0 15px;
  display: block;
}
#slide1:checked ~ #active label:nth-child(1) {
  display: none;
}
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5),
#slide6:checked ~ #active label:nth-child(6),
#slide7:checked ~ #active label:nth-child(7) {
  background: #eacf54;
  border-color: #eacf54 !important;
}
/* Animation */

#slides .inner {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
}
#slider {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
#controls label {
  -webkit-transform: translateZ(0);
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}
/*washes styles*/

.washes-content {
  position: absolute;
  top: 235px;
  left: 175px;
}
.hide {
  display: none;
}
.show {
  display: block;
}
#dw {
  position: absolute;
  left: 150px;
}
#ww {
  position: absolute;
  left: 200px;
}
#bw {
  position: absolute;
  left: 10px;
}
#gw {
  position: absolute;
  left: 160px;
}
#mw {
  position: absolute;
  left: 295px;
}

`HTML`

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="denim-destination-container">
  <div class="denim-destination-content">
    <div class="fits">
      <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-02a.jpg" alt="" />
      <div id="macysSlideshow" class="hide">
        <div id="macysSlideshowWrapper">
          <div id="skinny" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-04a.jpg" alt="" />
            </div>
          </div>
          <div id="straight" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-05a.jpg" alt="" />
            </div>
          </div>
          <div id="boyfriend" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-06a.jpg" alt="" />
            </div>
          </div>
          <div id="bootcut" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-08a.jpg" alt="" />
            </div>
          </div>
          <div id="cropped" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-07a.jpg" alt="" />
            </div>
          </div>
          <div id="flare" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-09a.jpg" alt="" />

            </div>
          </div>
        </div>
      </div>
      <div class="control">
        <div class="denim-close " id="x-img">
          <a href="#fits">
            <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-close.png" />
          </a>
        </div>
        <div class="arrow" id="arrow_right">
          <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-right-arr.png" />
        </div>
        <div class="arrow" id="arrow_left">
          <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-left-arr.png" />
        </div>
      </div>
      <nav class="fits-top-nav denim-nav">

        <ul>
          <li><a href="#fits">FITS</a>
          </li>
          <!--
				     -->
          <li><a href="#washes">WASHES</a>
          </li>
          <!--
				     -->
          <li><a href="#how-to-wear">HOW TO WEAR IT</a>
          </li>
          <!--
				     -->
          <li><a href="#brands">BRANDS</a>
          </li>
          <!--
				     -->
          <li><a href="#">SHOP ALL DENIM</a>
          </li>
        </ul>
      </nav>
      <nav class="fits-bottom-nav">
        <ul>
          <li><a href="#skinny" data-index="0" data-type="macysSlideshow" class="link">SKINNY</a>
          </li>
          <li><a href="#straight" data-index="1" data-type="macysSlideshow" class="link" style="margin-left: 13px;">STRAIGHT</a>
          </li>
          <li><a href="#boyfriend" data-index="2" data-type="macysSlideshow" class="link" style="margin-left: 7px;">BOYFRIEND</a>
          </li>
          <li><a href="#bootcut" data-index="3" data-type="macysSlideshow" class="link" style="margin-left: 10px;">BOOTCUT</a>
          </li>
          <li><a href="#cropped" data-index="4" data-type="macysSlideshow" class="link" style="margin-left: 10px;">CROPPED</a>
          </li>
          <li><a href="#flare" data-index="5" data-type="macysSlideshow" class="link" style="margin-left: 18px;">FLARE</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;