按钮点击触发jQuery幻灯片动画

时间：2015-12-10 19:17:15

标签： javascript jquery html css

我是jQuery的新手，我正在学习。我试图重定向幻灯片动画，使其不被.cd-slider-nav触发，而是由.cd-btn触发。基本上是一个旋转木马通过点击和停止在最后一个div上激活＆＃34;谢谢你＆＃34;。花了很多时间试图弄清楚这个方向/帮助如何开始/去做这将是非常有帮助的： - ）

＆＃13;
＆＃13; 
jQuery(document).ready(function($) {
  //on mobile - open/close primary navigation clicking/tapping the menu icon
  $('.cd-primary-nav').on('click', function(event) {
    if ($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
  });

  //upload videos if not on mobile
  uploadVideo($('.cd-hero-slider'));

  //change visible slide
  $('.cd-slider-nav li').on('click', function(event) {
    event.preventDefault();
    var selectedItem = $(this);
    if (!selectedItem.hasClass('selected')) {
      // if it's not already selected
      var selectedPosition = selectedItem.index(),
        activePosition = $('.cd-hero-slider .selected').index();
      if (activePosition < selectedPosition) {
        nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
      } else {
        prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
      }

      updateNavigationMarker(selectedPosition + 1);
    }
  });

  function nextSlide(container, pagination, n) {
    var visibleSlide = container.find('.selected'),
      navigationDot = pagination.find('.selected');

    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
      visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
    navigationDot.removeClass('selected')
    pagination.find('li').eq(n).addClass('selected');

    checkVideo(visibleSlide, container, n);
  }

  function prevSlide(container, pagination, n) {
    var visibleSlide = container.find('.selected'),
      navigationDot = pagination.find('.selected');

    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
      visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
    navigationDot.removeClass('selected');
    pagination.find('li').eq(n).addClass('selected');

    checkVideo(visibleSlide, container, n);
  }

  function uploadVideo(container) {
    container.find('.cd-bg-video-wrapper').each(function() {
      var videoWrapper = $(this);
      if (videoWrapper.is(':visible')) {
        // if visible - we are not on a mobile device 
        var videoUrl = videoWrapper.data('video'),
          video = $('<video loop><source src="' + videoUrl + '.mp4" type="video/mp4" /><source src="' + videoUrl + '.webm" type="video/webm" /></video>');
        video.appendTo(videoWrapper);
      }
    });
  }

  function checkVideo(hiddenSlide, container, n) {
    //check if a video outside the viewport is playing - if yes, pause it
    if (hiddenSlide.find('video').length > 0) hiddenSlide.find('video').get(0).pause();

    //check if the select slide contains a video element - if yes, play the video
    if (container.children('li').eq(n).find('video').length > 0) container.children('li').eq(n).find('video').get(0).play();
  }

  function updateNavigationMarker(n) {
    $('.cd-marker').removeClassPrefix('item').addClass('item-' + n);
  }

  $.fn.removeClassPrefix = function(prefix) {
    //remove all classes starting with 'prefix'
    this.each(function(i, el) {
      var classes = el.className.split(" ").filter(function(c) {
        return c.lastIndexOf(prefix, 0) !== 0;
      });
      el.className = $.trim(classes.join(" "));
    });
    return this;
  };
});
＆＃13; 
<style>
#wrapper {
    width: 100%;
    padding: 30px 20px;
    text-align: center;
	box-sizing: border-box;
	color: #adadad;
	background: #ededed;
	font-size:.8em;
    letter-spacing:0.05em;
	border-top: 0.5px solid rgba(0,0,0,.2);
    }

    [value*='Contact'], .module fieldset [type="submit"] [id="changetext"] {
    appearance: none;
    width:120px;
    height:50px;
    font-size:1.05em;
    background: transparent;
    color: #e6e8eb;
    border:none;
    text-align: center;
    letter-spacing:0.15em;
    text-transform:uppercase;
    transition: color 0.5s ease;
    outline:none;
    border:none;
	box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
    }

    [value*='Contact'], .module fieldset [type="submit"] [id="changetext"]:hover {
    color: #464c4c;
    cursor:pointer;
    transition: color 0.5s ease;
    }


    .module {
    width: 100%;
    margin: 1rem auto;
    padding: 1rem;
    }
	
    .module fieldset {
    overflow: hidden;
    border: none;
    }
	
    .module fieldset [type="text"] {
    display: block;
    margin: 0 auto;
    width: 80%;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.2);
    line-height: 20px;  
    margin-bottom: 10px;
    font-size: 1em;
	background: transparent;
    color: rgba(0,0,0,.4);
    width: 50%;
    padding: 0.5rem;
    }
	
    .single {
	height: 25px;
    }
	
    .module fieldset textarea {
    display: block;
    width: 100%;
    padding: 1rem;
    height: 125px;
    }
	/*---/----contact panel*/
	
    

*{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

@media only screen and (min-width: 768px) {	
body { display: flex; }
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* -------------------------------- 

Primary style

-------------------------------- */

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2c343b;
  background-color: #f2f2f2;
}

a {
  color: #d44457;
  text-decoration: none;
}

img {
  max-width: 100%;
}
/* -------------------------------- 

Main Components 

-------------------------------- */


/* -------------------------------- 

Slider

-------------------------------- */
@media only screen and (min-width: 768px) {	
.cd-hero {
  width:50%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
}
@media only screen and (max-width: 555px) {	
.cd-hero {
  width:100%;
  height: 476px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
}

@media only screen and (max-width: 768px) {	
.cd-hero {
  width:100%;
  /******height: 476px;*****/
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
}

.cd-hero-slider {
  position: relative;
  height: 476px;
  overflow: hidden;
  z-index: -1;
}

.cd-hero-slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.cd-hero-slider li.selected {
  /* this is the visible slide */
  
  position: relative;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider li.move-left {
  /* slide hidden on the left */
  
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.cd-hero-slider li.is-moving,
.cd-hero-slider li.selected {
  /* the is-moving class is assigned to the slide which is moving outside the viewport */
  
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}

@media only screen and (min-width: 768px) {
  .cd-hero-slider {
    height: 500px;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-hero-slider {
    height: 680px;
  }
}
/* -------------------------------- 

Single slide style

-------------------------------- */

.cd-hero-slider li {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cd-hero-slider li:first-of-type {
  background-color: #2c343b;
}

.cd-hero-slider li:nth-of-type(2) {
  background-color: #3d4952;
}

.cd-hero-slider li:nth-of-type(3) {
  background-color: #586775;
}

.cd-hero-slider li:nth-of-type(4) {
  background-color: #2c343b;
}

.cd-hero-slider li:nth-of-type(5) {
  background-color: #2c343b;
}

.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  /* this padding is used to align the text */
  
  padding-top: 100px;
  text-align: center;
  /* Force Hardware Acceleration in WebKit */
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

@media only screen and (max-width: 555px) {	
.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  /* this padding is used to align the text */
  
  padding-top: 100px;
  text-align: center;
  /* Force Hardware Acceleration in WebKit */
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
}
.cd-hero-slider .cd-img-container {
  /* hide image on mobile device */
  
  display: none;
}

.cd-hero-slider .cd-img-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.cd-hero-slider .cd-bg-video-wrapper {
  /* hide video on mobile device */
  z-index: -1;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cd-hero-slider .cd-bg-video-wrapper video {
  /* you won't see this element in the html, but it will be injected using js */
  
  display: block;
  min-height: 100%;
  min-width: 100%;
  max-width: none;
  height: auto;
  width: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.cd-hero-slider h2,
.cd-hero-slider p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  line-height: 1.2;
  margin: 0 auto 14px;
  color: #ffffff;
  width: 90%;
  max-width: 400px;
}

.cd-hero-slider h2 {
  font-size: 2.4rem;
}

.cd-hero-slider p {
  font-size: 1.4rem;
  line-height: 1.4;
}

.cd-hero-slider .cd-btn {
  display: inline-block;
  padding: 1.2em 1.4em;
  margin-top: .8em;
  background-color: transparent;
  border: 1px solid white;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.cd-hero-slider .cd-btn.secondary {
  background-color: rgba(22, 26, 30, 0.8);
}

.cd-hero-slider .cd-btn:nth-of-type(2) {
  margin-left: 1em;
}

.no-touch .cd-hero-slider .cd-btn:hover {
  background-color: #d44457;
}

.no-touch .cd-hero-slider .cd-btn.secondary:hover {
  background-color: #161a1e;
}

@media only screen and (min-width: 768px) {
  .cd-hero-slider li: nth-of-type(2) {
    background-image: none;
  }
  .cd-hero-slider li:nth-of-type(3) {
    background-image: none;
  }
  .cd-hero-slider li:nth-of-type(4) {
    background-image: none;
  }
  .cd-hero-slider .cd-full-width,
  .cd-hero-slider .cd-half-width {
    padding-top: 150px;
  }
  .cd-hero-slider .cd-bg-video-wrapper {
    display: block;
  }
  .cd-hero-slider .cd-half-width {
    width: 45%;
  }
  .cd-hero-slider .cd-half-width:first-of-type {
    left: 5%;
  }
  .cd-hero-slider .cd-half-width:nth-of-type(2) {
    right: 5%;
    left: auto;
  }
  .cd-hero-slider .cd-img-container {
    display: block;
  }
  .cd-hero-slider h2,
  .cd-hero-slider p {
    max-width: 520px;
  }
  .cd-hero-slider h2 {
    font-size: 2.4em;
    font-weight: 300;
  }
  .cd-hero-slider .cd-btn {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
    padding-top: 220px;
  }
  .cd-hero-slider h2,
  .cd-hero-slider p {
    margin-bottom: 20px;
  }
  .cd-hero-slider h2 {
    font-size: 3.2em;
  }
  .cd-hero-slider p {
    font-size: 1.6rem;
  }
}
/* -------------------------------- 

Single slide animation

-------------------------------- */

@media only screen and (min-width: 768px) {
  .cd-hero-slider .cd-half-width {
    opacity: 0;
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    -o-transform: translateX(40px);
    transform: translateX(40px);
  }
  .cd-hero-slider .move-left .cd-half-width {
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px);
  }
  .cd-hero-slider .selected .cd-half-width {
    /* this is the visible slide */
    
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  .cd-hero-slider .is-moving .cd-half-width {
    /* this is the slide moving outside the viewport 
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
    
    -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
    -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
    transition: opacity 0s 0.5s, transform 0s 0.5s;
  }
  .cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
  .cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
    /* this is the selected slide - different animation if it's entering from left or right */
    
    -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
    -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
  }
  .cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
  .cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
    /* this is the selected slide - different animation if it's entering from left or right */
    
    -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
    -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s;
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
  }
  .cd-hero-slider .cd-full-width h2,
  .cd-hero-slider .cd-full-width p,
  .cd-hero-slider .cd-full-width .cd-btn {
    opacity: 0;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }
  .cd-hero-slider .move-left .cd-full-width h2,
  .cd-hero-slider .move-left .cd-full-width p,
  .cd-hero-slider .move-left .cd-full-width .cd-btn {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  .cd-hero-slider .selected .cd-full-width h2,
  .cd-hero-slider .selected .cd-full-width p,
  .cd-hero-slider .selected .cd-full-width .cd-btn {
    /* this is the visible slide */
    
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  .cd-hero-slider li.is-moving .cd-full-width h2,
  .cd-hero-slider li.is-moving .cd-full-width p,
  .cd-hero-slider li.is-moving .cd-full-width .cd-btn {
    /* this is the slide moving outside the viewport 
    wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
    
    -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
    -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
    transition: opacity 0s 0.5s, transform 0s 0.5s;
  }
  .cd-hero-slider li.selected h2 {
    -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
    -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
  }
  .cd-hero-slider li.selected p {
    -webkit-transition: opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s;
    -moz-transition: opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s;
    transition: opacity 0.4s 0.3s, transform 0.5s 0.3s;
  }
  .cd-hero-slider li.selected .cd-btn {
    -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s;
    -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s;
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s;
  }
}
/* -------------------------------- 

Slider navigation

-------------------------------- */

.cd-slider-nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 2;
  text-align: center;
  height: 55px;
  background-color: rgba(0, 1, 1, 0.5);
}

.cd-slider-nav nav,
.cd-slider-nav ul,
.cd-slider-nav li,
.cd-slider-nav a {
  height: 100%;
}

.cd-slider-nav nav {
  display: inline-block;
  position: relative;
}

.cd-slider-nav .cd-marker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 100%;
  color: #d44457;
  background-color: #ffffff;
  box-shadow: inset 0 2px 0 currentColor;
  -webkit-transition: -webkit-transform 0.2s, box-shadow 0.2s;
  -moz-transition: -moz-transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cd-slider-nav .cd-marker.item-2 {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.cd-slider-nav .cd-marker.item-3 {
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -ms-transform: translateX(200%);
  -o-transform: translateX(200%);
  transform: translateX(200%);
}

.cd-slider-nav .cd-marker.item-4 {
  -webkit-transform: translateX(300%);
  -moz-transform: translateX(300%);
  -ms-transform: translateX(300%);
  -o-transform: translateX(300%);
  transform: translateX(300%);
}

.cd-slider-nav .cd-marker.item-5 {
  -webkit-transform: translateX(400%);
  -moz-transform: translateX(400%);
  -ms-transform: translateX(400%);
  -o-transform: translateX(400%);
  transform: translateX(400%);
}

.cd-slider-nav ul::after {
  clear: both;
  content: "";
  display: table;
}

.cd-slider-nav li {
  display: inline-block;
  width: 60px;
  float: left;
}

.cd-slider-nav li.selected a {
  color: #2c343b;
}

.no-touch .cd-slider-nav li.selected a:hover {
  background-color: transparent;
}

.cd-slider-nav a {
  display: block;
  position: relative;
  padding-top: 35px;
  font-size: 1rem;
  font-weight: 700;
  color: #a8b4be;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.cd-slider-nav a::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  top: 8px;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  background: url(../assets/cd-icon-navigation.svg) no-repeat 0 0;
}

.no-touch .cd-slider-nav a:hover {
  background-color: rgba(0, 1, 1, 0.5);
}

.cd-slider-nav li:first-of-type a::before {
  background-position: 0 0;
}

.cd-slider-nav li.selected:first-of-type a::before {
  background-position: 0 -24px;
}

.cd-slider-nav li:nth-of-type(2) a::before {
  background-position: -24px 0;
}

.cd-slider-nav li.selected:nth-of-type(2) a::before {
  background-position: -24px -24px;
}

.cd-slider-nav li:nth-of-type(3) a::before {
  background-position: -48px 0;
}

.cd-slider-nav li.selected:nth-of-type(3) a::before {
  background-position: -48px -24px;
}

.cd-slider-nav li:nth-of-type(4) a::before {
  background-position: -72px 0;
}

.cd-slider-nav li.selected:nth-of-type(4) a::before {
  background-position: -72px -24px;
}

.cd-slider-nav li:nth-of-type(5) a::before {
  background-position: -96px 0;
}

.cd-slider-nav li.selected:nth-of-type(5) a::before {
  background-position: -96px -24px;
}

@media only screen and (min-width: 768px) {
  .cd-slider-nav {
    height: 80px;
  }
  .cd-slider-nav .cd-marker,
  .cd-slider-nav li {
    width: 95px;
  }
  .cd-slider-nav a {
    padding-top: 48px;
    font-size: 1.1rem;
    text-transform: uppercase;
  }
  .cd-slider-nav a::before {
    top: 18px;
  }
}
/* -------------------------------- 

Main content

-------------------------------- */
@media only screen and (min-width: 768px) {
.cd-main-content {
  width: 50%;
  max-width: 768px;
  vertical-align: middle;
  display: inline-block;
}
@media only screen and (max-width: 768px) {
.cd-main-content {
  width: 100%;
  max-width: 768px;
  vertical-align: middle;
  display: inline-block;
}



.cd-main-content p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #999999;
  vertical-align: middle;
}

@media only screen and (min-width: 1170px) {
  .cd-main-content {
    padding: 3em 0;
	  vertical-align: middle;
  }
  .cd-main-content p {
    font-size: 1.6rem;
  vertical-align: middle;
  }
}
/* -------------------------------- 

Javascript disabled

-------------------------------- */

.no-js .cd-hero-slider li {
  display: none;
}

.no-js .cd-hero-slider li.selected {
  display: block;
}

.no-js .cd-slider-nav {
  display: none;
}
</style>
＆＃13; 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<section class="cd-hero">
  <ul class="cd-hero-slider">
    <li class="selected">
      <div class="cd-full-width">
        <a href="" class="cd-btn">Like what I do? Let me know</a>
      </div>
      <!-- .cd-full-width -->

      <div class="cd-bg-video-wrapper" data-video="assets/video/video">
        <!-- video element will be loaded using jQuery -->
        <img src="Websites/Image Test/Marilyn-Orange.jpg" alt="" width=1200/>
      </div>
      <!-- .cd-bg-video-wrapper -->
    </li>
    <!--1-->

    <li>
      <div class="cd-full-width">
        <div id="container">
	<div class='module' id='measure'>
            <fieldset>
                <legend></legend>
                <p class="send-me">Send me a message</p>
                <input class="single" type='text' placeholder='Name' />
                <input class="single" type='text' placeholder='Email' />
                <input class="single" type='text' placeholder='Phone' />
                <textarea class="message" type='text' placeholder='Message'></textarea>
            </fieldset>
        </div>
	<a href="" class="cd-btn">Send</a>
    </div>
      <!-- .cd-half-width -->
    </li>
    <!--2-->

    <li>
    
        <div class="cd-full-width">
        <a href="" class="cd-btn">Thank you</a>
      </div>
      <!-- .cd-full-width -->

      <div class="cd-bg-video-wrapper" data-video="assets/video/video">
        <!-- video element will be loaded using jQuery -->
        <img src="Websites/Image Test/Marilyn-Blue.jpg" alt="" width=1200/>
      </div>
      <!-- .cd-full-width video elemnt -->

    </li>
    <!--3-->

  </ul>
  <!-- .cd-hero-slider -->

  <div class="cd-slider-nav">
    <nav>
      <span class="cd-marker item-1"></span>

      <ul>
        <li class="selected"><a href="#0">Intro</a></li>
        <li><a href="#0">Tech 1</a></li>
        <li><a href="#0">Tech 2</a></li>
      </ul>
    </nav>
  </div>
  <!-- .cd-slider-nav -->
</section>
<!-- .cd-hero -->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

正如您所阐明的那样，您希望在点击.cd-btn时从一张幻灯片更改为下一张幻灯片。将以下内容添加到您的javascript部分：

       $('.cd-btn').on('click', function(event) {
        event.preventDefault();
        var activePosition = $('.cd-hero-slider .selected').index();
        var selectedPosition =  activePosition + 1;
        nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);

      updateNavigationMarker(selectedPosition + 1);
       });

如果要取消激活分页导航，可以删除以下两个功能块：$('.cd-slider-nav li').on('click', function(event) {和function prevSlide(container, pagination, n) {

此外，您的.cd-hero-slider上有一个z-index:-1，这使用户无法访问该按钮。你必须删除它。我还建议你给.cd-btn一个cursor:pointer;，这样用户就知道他可以点击它了。

相关问题
最新问题