Question

Hello Guys我有一个小问题：

我正在使用css滑块（我不允许使用javascript），这是完美的。唯一的问题是，当我使用它时，当网站跳到顶部时，我该如何解决这个问题？

PS：测试时使用4×500×500的图片并称其为1s，2s，3s，4s。将它们放在同一个文件夹中。

此致

我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
 <link rel="stylesheet" href="Standart.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>
</head>

<body>
<div id='headline'>
<h1> Test </h1>
</div>
<br>
<br>
<br>
<br>

    <div class="slider-holder">
        <span id="slider-image-1"></span>
        <span id="slider-image-2"></span>
        <span id="slider-image-3"></span>
        <span id="slider-image-4"></span>
        <div class="image-holder">
            <img src="1s.jpg" class="slider-image" />
            <img src="2s.jpg" class="slider-image" />
            <img src="3s.jpg" class="slider-image" />
            <img src="4s.jpg" class="slider-image" />
        </div>
        <div class="button-holder">
            <a href="#slider-image-1" class="slider-change"></a>
            <a href="#slider-image-2" class="slider-change"></a>
            <a href="#slider-image-3" class="slider-change"></a>
            <a href="#slider-image-4" class="slider-change"></a>
        </div>
    </div>

<div id="ubba">
<p>
Überschrift:
</p>
</div>

<div id="besch">
<p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</div>


</body>
</html>

我的CSS：

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
body, html {
    padding: 0; 
    margin: 0;
}
h1 {
    padding: 0;
    margin: 0;
}

#headline {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
    text-align: center;
    color: #ffffff;
    background-color: #000000;
}

#bild {

}

#bildweg {
    }

#ubba {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-left: auto; 
    margin-top: auto;
}
#besch {
font-family: "Open Sans", sans-serif;
    font-size: 20px;
    text-align: left;
    padding-right: 60%; 
    padding-left: 5%;
    margin-top: 0%;
}

body { background: #ffffff; }
#slidy-container { 
  width: 70%; overflow: hidden; margin: 0 auto;
}

.slider-holder
        {
            width: 500px;
            height: 500px;
            background-color: yellow;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
        }

        .image-holder
        {
            width: 2000px;
            background-color: #FFF;
            height: 500px;
            clear: both;
            position: relative;

            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }

        .slider-image
        {
            float: left;
            margin: 0px;
            padding: 0px;
            position: relative;
        }

        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }

        #slider-image-2:target ~ .image-holder
        {
            left: -500px;
        }

        #slider-image-3:target ~ .image-holder
        {
            left: -1000px;
        }

        #slider-image-4:target ~ .image-holder
        {
            left: -1500px;
        }

        .button-holder
        {
            position: relative;
            top: -20px;
        }

        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 10px;
            background-color: #ffffff;
        }

Answer 1

Wihout测试了你的代码我猜：

点击此链接href="#slider-image-1"肯定会导致浏览器滚动（即跳转）到该锚点。

Answer 2

我希望这个演示适合你

* {
  box-sizing: border-box;
}
body {
  font-family: "Open Sans";
  line-height: 1.618em;
  background: #ecf0f1;
  color: #444;
}
img {
  max-width: 100%;
  height: auto;
}
.wrapper {
  max-width: 50rem;
  width: 100%;
  margin: 0 auto;
}
.slider {
  background: #fff;
  position: relative;
  margin: 2rem 0;
  overflow: hidden;
  padding-bottom: 2.5rem;
  border: 0.25rem solid #95a5a6;
}
.slider::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  content: '';
  display: block;
  background: #34495e;
  height: 3rem;
}
.slide-switch {
  display: none;
}
.slide-label {
  position: absolute;
  bottom: 1rem;
  display: block;
  z-index: 5;
  height: 1rem;
  width: 1rem;
  text-indent: 1rem;
  overflow: hidden;
  background: #2980b9;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s;
}
.slide-label:nth-of-type(1) {
  left: 1rem;
}
.slide-label:nth-of-type(2) {
  left: 2.5rem;
}
.slide-label:nth-of-type(3) {
  left: 4rem;
}
.slide-label:nth-of-type(4) {
  left: 5.5rem;
}
.slide-label:nth-of-type(5) {
  left: 7rem;
}
.padded {
  padding: 1rem 2rem;
}
.slide-content {
  width: 100%;
  background: #fff;
  float: left;
  margin-right: -100%;
}
.slide-switch:checked + .slide-label {
  background: #3498db;
}
.slide-switch:not(:checked) + .slide-label + .slide-content {
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.slide-switch:checked + .slide-label + .slide-content {
  animation: slide 1s;
}
@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

<div class="wrapper">

  <div class="slider">

    <!-- Works with as many slides as are added in-->

    <input type="radio" name="slide-switches" id="slide_text" checked class="slide-switch">
    <label for="slide_text" class="slide-label">Slide Text</label>
    <div class="slide-content padded">
      <img src="http://i.imgur.com/1k0xC1C.jpg">
    </div>

    <input type="radio" name="slide-switches" id="slide_image" class="slide-switch">
    <label for="slide_image" class="slide-label">Slide Image</label>
    <div class="slide-content">
      <img src="http://i.imgur.com/1k0xC1C.jpg">
    </div>

   <input type="radio" name="slide-switches" id="slide_image2" class="slide-switch">
    <label for="slide_image2" class="slide-label">Slide Image</label>
    <div class="slide-content">
      <img src="http://i.imgur.com/1k0xC1C.jpg">
    </div>

  </div>

  <p>Paragraph outside slider</p>

</div>

网站使用滑块

2 个答案: