Question

我使用鼠标滚动滑块或单击图像。我的问题是，页脚或其他链接中的其他链接不再起作用。我添加了“onclick =”window.open（this.href）;返回false; “但现在它是单击页脚链接时不再有效的幻灯片。感谢帮助

$(function() {
  
    //make functions first

    function showSlide(n) {
        // unbind event listener to prevent retriggering
        $("body").unbind("mousewheel");
        currSlide += n;
        // make sure currslide does not go out of min or max boundaries
        currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
        
        // displacement is window width times current slide number
        var displacment = window.innerWidth*currSlide;
        // translate slides div across to appropriate slide
        $('.slides').css('transform', 'translateX(-'+displacment+'px)');
        // give small delay before rebinding event to prevent retriggering
        setTimeout(function() {
           $("body").bind('mousewheel', mouseEvent);
        }, 800);
        
        // change active class on link
        $('nav a.active').removeClass('active');
        $($('a')[currSlide]).addClass('active');
        
    }
  
    function mouseEvent(e, delta) {
        // On upwards scroll, show next slide (+1)
        // otherwise on downwards scroll show prev slide (-1)
        showSlide(delta >= 0 ? -1 : 1);
        e.preventDefault();
    }
    
    $('nav a').click(function(e) {
        // When link clicked, find slide it points to
        var newslide = parseInt($(this).attr('href')[1]);
        // find how far it is from current slide
        var diff = newslide - currSlide - 1;
        showSlide(diff); // show that slide
        e.preventDefault();
    });
  
    $(window).resize(function(){
      // Keep current slide to left of window on resize
      var displacment = window.innerWidth*currSlide;
      $('.slides').css('transform', 'translateX(-'+displacment+'px)');
    });
    
    //declare vars then make things happen
    
    var currSlide = 0; //Keeps track of slide
    var $slide = $('.slide'); //all slides
    // give active class to first link
    $($('nav a')[0]).addClass('active');
    //add event listener for mousescroll
    $("body").bind('mousewheel', mouseEvent);
    
})

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@-webkit-keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
@keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
html, body{
  height:100%;
}
body {
  font-size: 100%;
  color:#555;
  overflow:hidden;
}

[itemprop="logo"] {
    float:right;
	top:0;
	padding: 20px;
}
[itemprop="description"] {
    margin-top: 120px;
    padding: 20px;
}
[itemprop="name"] {
    text-align: right;
    padding: 20px;
	padding-bottom: 0;
}
[itemprop="faxNumber"] {
    padding: 0 20px 0 0;
    
}
[itemprop="email"] {
    padding: 0 20px 0 0;
    
}
[itemprop="address"] {
    padding: 0 20px 0 0;
   
}
[itemprop="telephone"] {
    padding: 0 20px 0 0;
	color:#4a974d;
	text-decoration: overline;
}

div{
	text-align:right;
	}
h1 {
    font-size: 2.25em;
    font-weight: 700;
	text-align:center;
	padding-top: 20px;
}
h2 {
    font-size: 1.25em;
	text-align:left;
	color:#e7c6c6;
}

#footer {
  
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */ 
   margin-top: 20px;   
}
#footer p {
   color:#555;
   text-align:center;
   font-size: 12px;
}
#footer a{
	color:#555;
	text-decoration: none;
    border-bottom: dotted 1px #555;   
}
nav {
  
  background: #fff;
  position: absolute;
  z-index: 100;
  height: 100vh;
  right: 0;
  width: 10vw;
  font-weight: 300;
  font-size: 1rem;
  width: 300px;
  overflow:scroll;
}
nav ul {
  position: absolute;
  list-style-type: none;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
  text-decoration: none;
  color: #fff;
}
nav a {
  /*position: absolute;*/
  -webkit-transition: color 2s, background 1s;
  transition: color 2s, background 1s;
  padding: 3px;
  
  z-index: 0;
}
nav a.active {
  background: rgba(0, 0, 0, 0.9);
}
nav a::before {
  content: "";
  position: absolute;
  height: 0%;
  width: 0%;
  bottom: 0;
  left: 0;
  opacity: 1;
  background: #555;
  z-index: -1;
}
nav img { 
    width:120px;
    float: left;}

#nav-thumbnails {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 1em 0.8em;
    
}
#nav-thumbnails h3{
    font-size: 1.25em;
	text-align:left;
	color:#764a4a;
	padding:8px;
    
}
/*nav a:hover {
  -webkit-animation: fillColour 0.7s forwards ease-in-out;
          animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
  -webkit-animation: fill 0.7s forwards ease-in-out;
          animation: fill 0.7s forwards ease-in-out;
  opacity: 1;
}*/
@media only screen and (max-width: 460px) {
  
  nav { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000; 
	position: absolute;
	overflow: scroll;
    }
  nav a {
	padding: 3px;
	}
	nav a.active {
    background: none;
    }
  nav img {
    width: 100%;
    }
  .slides {
	display:none;
	}
  #footer {
    position: inherit;
	}
	[itemprop="logo"] {
    float:right;
	top:0;
	padding: 20px;
	width:120px;
}
}

.slides {
  width: 600vw;
  height: 100vh;
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
  height: 100vh;
  width: 100vw;
  background: pink;
  float: left;
  text-align: center;
  background-size: cover;
}
.slides .slide .content {
    max-width: 600px;
    padding: 20px;
    background: rgba(24, 20, 20, 0.35);
    /* margin: 35vh 0 0 15vw; */
    border-radius: 5px;
    position: absolute;
    bottom: 0;
}

.slides .slide .content p {
  padding: 10px 0;
  border-bottom: 1px solid #f2e9e9;
  width: 100%;
}
.slides .slide:nth-child(1) {
  background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
  background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
  background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
  background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
  background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
  background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
  background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
  background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
  background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
  background-image: url(../img/10.jpg);
}
.slides .slide img {
  width: 100%;
}
.slides .slide p {
  color:#fff;
  text-align:left;
}
@media only screen and (max-width: 900px) {
	.slides .slide .content {
    width: 300px;
	}
	.slides .slide .content p {
    padding: 0; 
    border-bottom: 0;
}
}

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
    <link rel="stylesheet" href="css/style.css">
	
  </head>

  <body>
<main>  

 
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->						
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad@mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>

</div>
</div>
</header>
<!--section de navigation-->   
  <section id="nav-thumbnails">
 <h3>La pépinière</h3>
	<a href="#1"><img src="img/1.jpg" alt="image1"></a>
    <a href="#2"><img src="img/2.jpg" alt="image2"></a>
    <a href="#3"><img src="img/3.jpg" alt="image3"></a>
    <a href="#4"><img src="img/4.jpg" alt="image4"></a>
    <a href="#5"><img src="img/5.jpg" alt="image5"></a>
	<a href="#6"><img src="img/6.jpg" alt="image6"></a>
	</section>
  <!--footer-->   
   <div id="footer"><p>Crédit : <a href="https://pixabay.com/"onclick="window.open(this.href); return false;">pixabay.com</a></p></div>
</nav>
</main>
<div class="slides">
  <div id="1" class="slide">
    <div class="content">
      <h2>Slide 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="2" class="slide">
    <div class="content">
      <h2>Slide 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="3" class="slide">
    <div class="content">
      <h2>Slide 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="4" class="slide">
    <div class="content">
      <h2>Slide 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="5" class="slide">
    <div class="content">
      <h2>Slide 5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="6" class="slide">
    <div class="content">
      <h2>Slide 6</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
	
  </div>

</div>


    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>

        <script src="js/index.js"></script>

    
  </body>
</html>

Answer 1

添加onkeypress =“window.open（this.href）;返回false;”到你的代码

<a href="https://pixabay.com/" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">pixabay.com</a>

删除以下代码

$('nav a').click(function(e) {
    // When link clicked, find slide it points to
    var newslide = parseInt($(this).attr('href')[1]);
    // find how far it is from current slide
    var diff = newslide - currSlide - 1;
    showSlide(diff); // show that slide
    e.preventDefault();
});

Answer 2

Jquery是正确的，只需要在<nav>标记之外使用页脚div。

<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->                      
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad@mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>

</div>
</div>
</header>
<!--section de navigation-->   
  <section id="nav-thumbnails">
 <h3>La pépinière</h3>
    <a href="#1"><img src="img/1.jpg" alt="image1"></a>
    <a href="#2"><img src="img/2.jpg" alt="image2"></a>
    <a href="#3"><img src="img/3.jpg" alt="image3"></a>
    <a href="#4"><img src="img/4.jpg" alt="image4"></a>
    <a href="#5"><img src="img/5.jpg" alt="image5"></a>
    <a href="#6"><img src="img/6.jpg" alt="image6"></a>
    </section>
  <!--footer-->   

</nav>
 <div id="footer"><p>Credit : <a href="https://pixabay.com/" id="ex_link" target="_blank">pixabay.com</a></p></div>
</main>
<div class="slides">
  <div id="1" class="slide">
    <div class="content">
      <h2>Slide 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="2" class="slide">
    <div class="content">
      <h2>Slide 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="3" class="slide">
    <div class="content">
      <h2>Slide 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="4" class="slide">
    <div class="content">
      <h2>Slide 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="5" class="slide">
    <div class="content">
      <h2>Slide 5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="6" class="slide">
    <div class="content">
      <h2>Slide 6</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>

  </div>

</div>

Answer 3

将此代码添加到您的js文件中。

$('#nav-thumbnails a').click(function(e) { 
    var newslide =    parseInt($(this).attr('href')[1]);
    var diff = newslide - currSlide - 1; showSlide(diff);  
    e.preventDefault(); 
});

$(function() {
  
    //make functions first

    function showSlide(n) {
        // unbind event listener to prevent retriggering
        $("body").unbind("mousewheel");
        currSlide += n;
        // make sure currslide does not go out of min or max boundaries
        currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
        
        // displacement is window width times current slide number
        var displacment = window.innerWidth*currSlide;
        // translate slides div across to appropriate slide
        $('.slides').css('transform', 'translateX(-'+displacment+'px)');
        // give small delay before rebinding event to prevent retriggering
        setTimeout(function() {
           $("body").bind('mousewheel', mouseEvent);
        }, 800);
        
        // change active class on link
        $('nav a.active').removeClass('active');
        $($('a')[currSlide]).addClass('active');
        
    }
    function mouseEvent(e, delta) {
        // On upwards scroll, show next slide (+1)
        // otherwise on downwards scroll show prev slide (-1)
        showSlide(delta >= 0 ? -1 : 1);
        e.preventDefault();
    }
  $('#nav-thumbnails a').click(function(e) { var newslide = parseInt($(this).attr('href')[1]);  var diff = newslide - currSlide - 1; showSlide(diff); e.preventDefault(); }); 
  
    $(window).resize(function(){
      // Keep current slide to left of window on resize
      var displacment = window.innerWidth*currSlide;
      $('.slides').css('transform', 'translateX(-'+displacment+'px)');
    });
    
    //declare vars then make things happen
    
    var currSlide = 0; //Keeps track of slide
    var $slide = $('.slide'); //all slides
    // give active class to first link
    $($('nav a')[0]).addClass('active');
    //add event listener for mousescroll
    $("body").bind('mousewheel', mouseEvent);
    
})

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@-webkit-keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
@keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
html, body{
  height:100%;
}
body {
  font-size: 100%;
  color:#555;
  overflow:hidden;
}

[itemprop="logo"] {
    float:right;
	top:0;
	padding: 20px;
}
[itemprop="description"] {
    margin-top: 120px;
    padding: 20px;
}
[itemprop="name"] {
    text-align: right;
    padding: 20px;
	padding-bottom: 0;
}
[itemprop="faxNumber"] {
    padding: 0 20px 0 0;
    
}
[itemprop="email"] {
    padding: 0 20px 0 0;
    
}
[itemprop="address"] {
    padding: 0 20px 0 0;
   
}
[itemprop="telephone"] {
    padding: 0 20px 0 0;
	color:#4a974d;
	text-decoration: overline;
}

div{
	text-align:right;
	}
h1 {
    font-size: 2.25em;
    font-weight: 700;
	text-align:center;
	padding-top: 20px;
}
h2 {
    font-size: 1.25em;
	text-align:left;
	color:#e7c6c6;
}

#footer {
  
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */ 
   margin-top: 20px;   
}
#footer p {
   color:#555;
   text-align:center;
   font-size: 12px;
}
#footer a{
	color:#555;
	text-decoration: none;
    border-bottom: dotted 1px #555;   
}
nav {
  
  background: #fff;
  position: absolute;
  z-index: 100;
  height: 100vh;
  right: 0;
  width: 10vw;
  font-weight: 300;
  font-size: 1rem;
  width: 300px;
  overflow:scroll;
}
nav ul {
  position: absolute;
  list-style-type: none;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
  text-decoration: none;
  color: #fff;
}
nav a {
  /*position: absolute;*/
  -webkit-transition: color 2s, background 1s;
  transition: color 2s, background 1s;
  padding: 3px;
  
  z-index: 0;
}
nav a.active {
  background: rgba(0, 0, 0, 0.9);
}
nav a::before {
  content: "";
  position: absolute;
  height: 0%;
  width: 0%;
  bottom: 0;
  left: 0;
  opacity: 1;
  background: #555;
  z-index: -1;
}
nav img { 
    width:120px;
    float: left;}

#nav-thumbnails {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 1em 0.8em;
    
}
#nav-thumbnails h3{
    font-size: 1.25em;
	text-align:left;
	color:#764a4a;
	padding:8px;
    
}
/*nav a:hover {
  -webkit-animation: fillColour 0.7s forwards ease-in-out;
          animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
  -webkit-animation: fill 0.7s forwards ease-in-out;
          animation: fill 0.7s forwards ease-in-out;
  opacity: 1;
}*/
@media only screen and (max-width: 460px) {
  
  nav { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000; 
	position: absolute;
	overflow: scroll;
    }
  nav a {
	padding: 3px;
	}
	nav a.active {
    background: none;
    }
  nav img {
    width: 100%;
    }
  .slides {
	display:none;
	}
  #footer {
    position: inherit;
	}
	[itemprop="logo"] {
    float:right;
	top:0;
	padding: 20px;
	width:120px;
}
}

.slides {
  width: 600vw;
  height: 100vh;
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
  height: 100vh;
  width: 100vw;
  background: pink;
  float: left;
  text-align: center;
  background-size: cover;
}
.slides .slide .content {
    max-width: 600px;
    padding: 20px;
    background: rgba(24, 20, 20, 0.35);
    /* margin: 35vh 0 0 15vw; */
    border-radius: 5px;
    position: absolute;
    bottom: 0;
}

.slides .slide .content p {
  padding: 10px 0;
  border-bottom: 1px solid #f2e9e9;
  width: 100%;
}
.slides .slide:nth-child(1) {
  background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
  background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
  background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
  background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
  background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
  background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
  background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
  background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
  background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
  background-image: url(../img/10.jpg);
}
.slides .slide img {
  width: 100%;
}
.slides .slide p {
  color:#fff;
  text-align:left;
}
@media only screen and (max-width: 900px) {
	.slides .slide .content {
    width: 300px;
	}
	.slides .slide .content p {
    padding: 0; 
    border-bottom: 0;
}
}

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
    <link rel="stylesheet" href="css/style.css">
	
  </head>

  <body>
<main>  

 
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->						
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad@mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>

</div>
</div>
</header>
<!--section de navigation-->   
  <section id="nav-thumbnails">
 <h3>La pépinière</h3>
	<a href="#1"><img src="img/1.jpg" alt="image1"></a>
    <a href="#2"><img src="img/2.jpg" alt="image2"></a>
    <a href="#3"><img src="img/3.jpg" alt="image3"></a>
    <a href="#4"><img src="img/4.jpg" alt="image4"></a>
    <a href="#5"><img src="img/5.jpg" alt="image5"></a>
	<a href="#6"><img src="img/6.jpg" alt="image6"></a>
	</section>
  <!--footer-->   
   <div id="footer"><p>Crédit : <a href="https://pixabay.com/"onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">pixabay.com</a></p></div>
</nav>
</main>
<div class="slides">
  <div id="1" class="slide">
    <div class="content">
      < h2>Slide 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="2" class="slide">
    <div class="content">
      <h2>Slide 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="3" class="slide">
    <div class="content">
      <h2>Slide 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="4" class="slide">
    <div class="content">
      <h2>Slide 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="5" class="slide">
    <div class="content">
      <h2>Slide 5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="6" class="slide">
    <div class="content">
      <h2>Slide 6</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
	
  </div>

</div>


    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>

        <script src="js/index.js"></script>

    
  </body>
</html>

Answer 4

我已经在jquery中进行了更改。您可以使用以下代码。

$（function（）{

    //make functions first

    function showSlide(n) {
        // unbind event listener to prevent retriggering
        $("body").unbind("mousewheel");
        currSlide += n;
        // make sure currslide does not go out of min or max boundaries
        currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;

        // displacement is window width times current slide number
        var displacment = window.innerWidth*currSlide;
        // translate slides div across to appropriate slide
        $('.slides').css('transform', 'translateX(-'+displacment+'px)');
        // give small delay before rebinding event to prevent retriggering
        setTimeout(function() {
           $("body").bind('mousewheel', mouseEvent);
        }, 800);

        // change active class on link
        $('nav #nav-thumbnails a.active').removeClass('active');
        $($('a')[currSlide]).addClass('active');

    }

    function mouseEvent(e, delta) {
        // On upwards scroll, show next slide (+1)
        // otherwise on downwards scroll show prev slide (-1)
        showSlide(delta >= 0 ? -1 : 1);
        e.preventDefault();
    }

    $('nav #nav-thumbnails a').click(function(e) {
        // When link clicked, find slide it points to
        var newslide = parseInt($(this).attr('href')[1]);
        // find how far it is from current slide
        var diff = newslide - currSlide - 1;
        showSlide(diff); // show that slide
        e.preventDefault();
    });

    $(window).resize(function(){
      // Keep current slide to left of window on resize
      var displacment = window.innerWidth*currSlide;
      $('.slides').css('transform', 'translateX(-'+displacment+'px)');
    });

    //declare vars then make things happen

    var currSlide = 0; //Keeps track of slide
    var $slide = $('.slide'); //all slides
    // give active class to first link
    $($('nav #nav-thumbnails a')[0]).addClass('active');
    //add event listener for mousescroll
    $("body").bind('mousewheel', mouseEvent);

})

HTML链接和滑块冲突

4 个答案: