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

标签 javascript php jquery css

代码在这里 https://jsfiddle.net/bbayo/gmvex82e/4/

我想从菜单中制作一个分页幻灯片，例如(瘦，直，耀斑)给幻灯片一个控制示例箭头和 x 关闭。我做了一些事情但卡住了。

现在，如果您点击 skinny，您将看到一个幻灯片，但如果您点击 straight 或 boyfriend，它会为您提供内容，但没有箭头。

在这里查看https://jsfiddle.net/bbayo/gmvex82e/4/ 

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

感谢任何帮助。谢谢

最佳答案

1.你的帖子没有把你的全部代码都展示出来搞清楚你面对的是什么别人也看不懂你想问什么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 控件仅显示您的 slider div 而不是您的控件 div。

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

这是固定的代码。

检查 html 和 javascript 部分。

$(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();

});
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`
<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>

关于javascript - 没有插件的幻灯片分页 Javascript/Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34983885/

上一篇：jquery - 使猫头鹰轮播连续旋转图像

下一篇：javascript - jQuery ScrollTop()函数动画菜单

相关文章：

php - 在子文件夹中安装 Bolt CMS

php - 根据字段对数据进行分组并在 PHP 中提取不同的值

javascript - 使用 onclick 调用函数或使用 .click 绑定(bind)事件哪个更好？

jQuery 每隔一个背景灰色

javascript - 项目的切换类 Vue.js

javascript - jQuery onload - .load() - 事件不适用于动态加载的 iframe

javascript - 在 Angular 中使用插件导入 svg.js

javascript - 在回调中丢失 this 的上下文

Javascript 表单验证 - 数组中的复选框，输入的第一个数字

php - 干净且 "dirty"网址

©2024 IT工具网  联系我们