在网站上前进图像滑块时的页面滚动

时间：2019-02-01 13:09:34

标签： javascript jquery html css

这是此图像滑块的代码。前进到下一张幻灯片时，图像每次都会滚动到页面顶部。我知道您可以使用“数据目标”来防止这种情况，但这只是打破了箭头。我想念什么？ www.bird-supplies.net供参考。

<div class="carousel-wrapper">
    <span id="item-1"></span>
    <span id="item-2"></span>
    <span id="item-3"></span>
    <div class="carousel-item item-1">
        <h2></h2>
        <p></p>
        <a class="arrow arrow-prev" href="#item-3"></a>
        <a class="arrow arrow-next" href="#item-2"></a>
    </div>

    <div class="carousel-item item-2">
        <h2></h2>
        <p></p>
        <a class="arrow arrow-prev" href="#item-1"></a>
        <a class="arrow arrow-next" href="#item-3"></a>
    </div>

    <div class="carousel-item item-3">
        <h2></h2>
        <p></p>
        <a class="arrow arrow-prev" href="#item-2"></a>
        <a class="arrow arrow-next" href="#item-1"></a>
    </div>
</div>

编辑

我有第二部分。下面的滑块代码在继续下一张幻灯片时不会自动定位，但是在我放置的位置不包含自身。它会自行爆炸以填满整个屏幕。可能是CSS问题。如果有人可以帮助我将此滑块包含在第一个滑块所在的位置，那么我将使用此滑块并解决问题。

<div class="container">
<div data-am-fadeshow="next-prev-navigation autoplay">
<!-- Radio -->
<input type="radio" name="css-fadeshow" id="slide-1" />
<input type="radio" name="css-fadeshow" id="slide-2" />
<input type="radio" name="css-fadeshow" id="slide-3" />
<!-- Slides -->
<div class="fs-slides">
<div class="fs-slide" style="background-image: 
url(https://images.unsplash.com/photo-1460500063983-994d4c27756c? 
crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb- 
0.3.5&q=80&w=2550);">
            <!-- Add content to images (sample) -->
            <div style="position: absolute; top: 50%; left: 50%; 
transform: 
translate(-50%, -50%); color: white; font-family: sans-serif; text-align: 
center; text-shadow: 0 0 20px rgba(0,0,0,0.5);">
                <h1 style="margin-top: 0; margin-bottom: 0.8vw; font-size: 
5vw; font-weight: bold;">Pure CSS Fadeshow</h1>
                <p style="font-size: 2vw; font-weight: 100; margin-top: 
0;"> 
</p>
            </div>
        </div>
        <div class="fs-slide" style="background-image: 
url(https://images.unsplash.com/photo-1440557653082-e8e186733eeb? 
crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb- 
0.3.5&q=80&w=2500);"> 
</div>
        <div class="fs-slide" style="background-image: 
url(https://images.unsplash.com/photo-1449057528837-7ca097b3520c? 
crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb- 
0.3.5&q=80&w=2500);"></div>
    </div>

    <!-- Quick Navigation -->
    <div class="fs-quick-nav">
        <label class="fs-quick-btn" for="slide-1"></label>
        <label class="fs-quick-btn" for="slide-2"></label>
        <label class="fs-quick-btn" for="slide-3"></label>
    </div>

    <!-- Prev Navigation -->
    <div class="fs-prev-nav">
        <label class="fs-prev-btn" for="slide-1"></label>
        <label class="fs-prev-btn" for="slide-2"></label>
        <label class="fs-prev-btn" for="slide-3"></label>
    </div>

    <!-- Next Navigation -->
    <div class="fs-next-nav">
        <label class="fs-next-btn" for="slide-1"></label>
        <label class="fs-next-btn" for="slide-2"></label>
        <label class="fs-next-btn" for="slide-3"></label>
    </div>

</div>

</div>

CSS 

$max-slides:                    5;
$prefix:                        true;
$responsive:                    true;
$breakpoint-small:              500px;
$fade-time:                     1;
$prev-next-fontfamily:          sans-serif;
$prev-next-icon-size:           3vw;
$prev-next-icon-color:          rgba(255,255,255,0.5);
$prev-next-bg:                  rgba(255,255,255,0);
$prev-next-bg-hover:            rgba(255,255,255,0.1);
$prev-icon:                     '❮';
$next-icon:                     '❯';
$autohide-next-prev:            true;
$quick-nav-color:               rgba(255,255,255,0.8);
$quick-nav-active-color:    coral;
$fade-color:                    #fff;
$autoplay:                      true;
$autoplay-duration:         3;


/*
 * ===== MIXINS =====
/* Mixins to handle prefixes */

@mixin fadeshow-transition($value...) {
@if length($value) < 1 {
    $value: all 150ms linear;
}
@if $prefix == true {
    -webkit-transition: $value;
}
              transition: $value;
}

@mixin fadeshow-transform($value...) {
@if length($value) < 1 {
    $value: all 150ms linear;
}
@if $prefix == true {
    -webkit-transform: $value;
         -ms-transform: $value;
}
              transform: $value;
}

@mixin fadeshow-animation($value...) {
@if $prefix == true {
    -webkit-animation: $value;
}
              animation: $value;
}

@mixin fadeshow-animation-delay($value) {
@if $prefix == true {
    -webkit-animation-delay: $value;
}
              animation-delay: $value;
}

@mixin fadeshow-unselectable() {
@if $prefix == true {
    -webkit-user-select: none;
       -moz-user-select: none;
         -ms-user-select: none;
}
              user-select: none;
}

/* Mixins to handle Quick Navigation Button states */

@mixin quickNavBtnActive() {
background-color: $quick-nav-active-color;
}

@mixin quickNavBtnInactive() {
background-color: $quick-nav-color;
}


 /*
 * ===== FADESHOW =====
 *
 * Base functionality for the fadeshow.

[data-am-fadeshow] {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: $fade-color;

/* Slides */
.fs-slide {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    @include fadeshow-transition(opacity #{$fade-time}s ease);

    /* Display first child on load */
    &:first-child {
        opacity: 1;
    }
}

/* Quick Navigation */
.fs-quick-nav {
    position: absolute;
    bottom: 15px;
    left: 50%;
    z-index: 1;
    @include fadeshow-unselectable();
    @include fadeshow-transform(translateX(-50%));
}

.fs-quick-btn {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 2px;
    border-radius: 50%;
    cursor: pointer;
    @include fadeshow-transition(opacity 200ms ease);
    @include quickNavBtnInactive();

    &:hover {
        opacity: 0.8;
    }

    /* Set active state to first button on load */
    &:first-child {
        @include quickNavBtnActive();
    }
}

/* Prev/Next Navigation */
%prev-next {
    position: absolute;
    display: none;
    top: 0;
    bottom: 0;
    width: 100px;
    cursor: pointer;
    font-family: $prev-next-fontfamily;
    background-color: $prev-next-bg;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    @include fadeshow-transition(all 200ms ease);

    @if $responsive == true {
        @media (max-width: $breakpoint-small) {
            width: 50%;
        }
    }

    &:before {
        position: absolute;
        top: 50%;
        font-size: $prev-next-icon-size;
        color: $prev-next-icon-color;
    }

    &:hover {
        background-color: $prev-next-bg-hover;
        @if $responsive == true {
            @media (max-width: $breakpoint-small) {
                background-color: rgba(255,255,255,0);
            }
        }
    }
}

.fs-prev-btn {
    @extend %prev-next;
    left: 0;

    &:before {
        content: "#{$prev-icon}";
        left: 50%;
        @include fadeshow-transform(translate(-50%, -50%));
        @if $responsive == true {
            @media (max-width: $breakpoint-small) {
                left: 30px;
            }
        }
    }

    @if $autohide-next-prev == true {
        @include fadeshow-transform(translateX(-100%));
        @if $responsive == true {
            @media (max-width: $breakpoint-small) {
                @include fadeshow-transform(translate(0));
            }
        }
    }
}

.fs-next-btn {
    @extend %prev-next;
    right: 0;

    &:before {
        content: "#{$next-icon}";
        right: 50%;
        @include fadeshow-transform(translate(50%, -50%));
        @if $responsive == true {
            @media (max-width: $breakpoint-small) {
                right: 30px;
            }
        }
    }

    @if $autohide-next-prev == true {
        @include fadeshow-transform(translateX(100%));
        @if $responsive == true {
            @media (max-width: $breakpoint-small) {
                @include fadeshow-transform(translate(0));
            }
        }
    }
}

/* Base functionality */
input[type="radio"] {
    position: fixed;
    top: -9999px;

    &:checked {

        /* This loop handles the slide switching and quick navigation 
active state */
        $i: $max-slides;

        @while $i > 0 {

            &:nth-of-type(#{$i}) {
                /* Show slide */
                ~ .fs-slides {
                    .fs-slide {
                        //Cancel autoplay
                        opacity: 0;
                        @include fadeshow-animation(none !important);
                    }
                    .fs-slide:nth-child(#{$i}) {
                        opacity: 1;
                    }
                }

                /* Add active state to dot */
                ~ .fs-quick-nav {
                    .fs-quick-btn {
                        @include quickNavBtnInactive();
                        /* Cancel autoplay */
                        @include fadeshow-animation(none !important);
                    }
                    .fs-quick-btn:nth-child(#{$i}) {
                        background-color: $quick-nav-active-color;
                        &:hover {
                            opacity: 1;
                        }
                    }
                }

            }
            $i: $i - 1;
        }

        /* Hide navigation if only one slide */
        &:first-of-type:last-of-type {
            ~ .fs-quick-nav,
            ~ .fs-prev-nav,
            ~ .fs-next-nav {
                display: none !important;
            }
        }

    }
}

/* Autohide Prev/Next Navigation */
@if $autohide-next-prev == true {
    &:hover {
        .fs-prev-btn,
        .fs-next-btn {
            @include fadeshow-transform(translateX(0));
        }
    }
}

}


/*
 * ===== PREV/NEXT NAVIGATION =====
 *
 * This section handles the prev/next navigation.
 */

/* Handle Prev/Next buttons */
[data-am-fadeshow~="next-prev-navigation"] {
input[type="radio"] {

    &:checked {

        $i: $max-slides;

        @while $i > 0 {

            &:nth-of-type(#{$i}) {

                $prev: ($i - 1);
                $next: ($i + 1);

                /* Show previous button */
                @if $prev > 0 {
                    ~ .fs-prev-nav {
                        .fs-prev-btn {
                            display: none;
                        }
                        .fs-prev-btn:nth-child(#{$prev}) {
                            display: block;
                        }
                    }
                }

                /* Show next button */
                @if $next < ($max-slides + 1) {
                    ~ .fs-next-nav {
                        .fs-next-btn {
                            display: none;
                        }
                        .fs-next-btn:nth-child(#{$next}) {
                            display: block;
                        }
                    }
                }

                /* Show last prev button if first slide */
                &:first-of-type {
                    ~ .fs-prev-nav {
                        .fs-prev-btn:last-child {
                            display: block;
                        }
                    }
                }

                /* Show first next button if last slide */
                &:last-of-type {
                    ~ .fs-next-nav {
                        .fs-next-btn:first-child {
                            display: block;
                        }
                    }
                }

            }
          $i: $i - 1;
        }
    }
}

/* Display first pair of Prev/Next Buttons on load */
.fs-prev-btn:last-child {
    display: block;
}

.fs-next-btn:nth-child(2) {
    display: block
}

}


/*
 * ===== AUTOPLAY =====
 *
 * Functions to handle autoplay.

@if $autoplay == true {

$i: $max-slides;

@while $i > 1 {

    $total-duration: $autoplay-duration * $i;

    @keyframes quickNavAnimation-#{$i} {
        0% { @include quickNavBtnInactive();  }
        #{100% * $fade-time / $total-duration},
        #{100% * $autoplay-duration / $total-duration} { @include 
quickNavBtnActive(); }
        #{100% * ($autoplay-duration + $fade-time) / $total-duration},
        100% { @include quickNavBtnInactive(); }
    }
    @if $prefix == true {
        @-webkit-keyframes quickNavAnimation-#{$i} {
            0% { @include quickNavBtnInactive();  }
            #{100% * $fade-time / $total-duration},
            #{100% * $autoplay-duration / $total-duration} { @include 
quickNavBtnActive(); }
            #{100% * ($autoplay-duration + $fade-time) / $total-duration},
            100% { @include quickNavBtnInactive(); }
        }
    }

    @keyframes slidesAnimation-#{$i} {
        0% { opacity: 0; }
        #{100% * $fade-time / $total-duration},
        #{100% * $autoplay-duration / $total-duration} { opacity: 1; }
        #{100% * ($autoplay-duration + $fade-time) / $total-duration},
        100% { opacity: 0; }
    }
    @if $prefix == true {
        @-webkit-keyframes slidesAnimation-#{$i} {
            0% { opacity: 0; }
            #{100% * $fade-time / $total-duration},
            #{100% * $autoplay-duration / $total-duration} { opacity: 1; }
            #{100% * ($autoplay-duration + $fade-time) / $total-duration},
            100% { opacity: 0; }
        }
    }

    [data-am-fadeshow~="autoplay"] {
        input[type="radio"]:nth-of-type(#{$i}):last-of-type {

            /* Slide animation */
            ~ .fs-slides {
                .fs-slide {
                    @include fadeshow-animation(slidesAnimation-#{$i} # 
{$total-duration}s infinite);
                }
            }

            /* Quick navigation animation */
            ~ .fs-quick-nav {
                .fs-quick-btn {
                    @include fadeshow-animation(quickNavAnimation-#{$i} # 
{$total-duration}s infinite);
                }
            }

            /* Animation Delay */
            @for $j from 1 through $i {
                ~ .fs-slides .fs-slide:nth-child(#{$j}),
                ~ .fs-quick-nav .fs-quick-btn:nth-child(#{$j}) {
                    $animation-delay: #{($j - 1) * ($autoplay-duration) - 
$fade-time}s;
                    @include fadeshow-animation-delay(#{$animation- 
delay});
                }
            }

        }
        $i: $i - 1;
    }
}
}

/* Base Styling */

body {
margin: 0;
}

.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
overflow: hidden;
}

1 个答案:

答案 0 :(得分：0)

此javascript代码应防止滚动。

$('a[href*="#"]').on( "click", function(event) {
  event.preventDefault();
});

不确定滑块是否会出现问题。请让我知道。

相关问题
最新问题