Question

我有以下纯粹的简单转盘： https://codepen.io/gety9/pen/eGEBmm

HTML：

<div class="slider-container">
    <!-- nav arrows -->
    <div class="slider-arrows">
        <div class="slider-arrow-left arrowLeft">
            <svg width="16" height="30" class="svg-arrow">
                <polyline style="stroke-linejoin:miter; stroke:#00275a; stroke-width:3; fill: none;" points="15 2, 2 15, 15 28" />
              </svg>
        </div>
        <div class="slider-arrow-right arrowRight">
            <svg width="16" height="30" class="svg-arrow">
                <polyline style="stroke-linejoin:miter; stroke:#00275a; stroke-width:3; fill: none;" points="2 2, 14 15, 2 28" />
              </svg>
        </div>
    </div>
    <div id="frame">
        <div id="slider">
            <!-- Box start -->
            <div class="slider-box slide">
                <div class="slider-photo">
                    <a href="#">
              <img src="http://via.placeholder.com/250x150/ff000"/>
            </a>
                </div>
            </div>
            <!-- Box end -->
            <!-- Box start -->
            <div class="slider-box slide">
                <div class="slider-photo">
                    <a href="#">
              <img src="http://via.placeholder.com/250x150"/>
            </a>
                </div>
            </div>
            <!-- Box end -->
            <!-- Box start -->
            <div class="slider-box slide">
                <div class="slider-photo">
                    <a href="#">
              <img src="http://via.placeholder.com/250x150/00ff00"/>
            </a>
                </div>
            </div>
            <!-- Box end -->
            <!-- Box start -->
            <div class="slider-box slide">
                <div class="slider-photo">
                    <a href="#">
              <img src="http://via.placeholder.com/250x150"/>
            </a>
                </div>
            </div>
            <!-- Box end -->
            <!-- Box start -->
            <div class="slider-box slide">
                <div class="slider-photo">
                    <a href="#">
              <img src="http://via.placeholder.com/250x150/0000ff"/>
            </a>
                </div>
            </div>
            <!-- Box end -->
            <!-- Box start -->
            <div class="slider-box slide">
                <div class="slider-photo">
                    <a href="#">
              <img src="http://via.placeholder.com/250x150"/>
            </a>
                </div>
            </div>
            <!-- Box end -->
            <!-- Box start -->
            <div class="slider-box slide">
                <div class="slider-photo">
                    <a href="#">
              <img src="http://via.placeholder.com/250x150/ffff00"/>
            </a>
                </div>
            </div>
            <!-- Box end -->
        </div>
    </div>
</div>

CSS

.slider-container {
  width: 1000px;
  position: relative;
  margin: 10px auto;
}
#frame {
  overflow: hidden;
}
.slider {
  position: relative;
  transition: 500ms;
  display: inline-flex;
}
.slide {
  display: inline-block;
}
.slider-arrow-left {
    position: absolute;
    top: 50%;
    left: -20px;
}
.slider-arrow-right {
    position: absolute;
    top: 50%;
    right: -20px;
}
.svg-arrow:hover{
    opacity:0.6;
  cursor: pointer;
}

JS

var Carousel = function (frameSelector, sliderSelector, slidesSelector, btnLeftSelector, btnRightSelector) {
    //A variable to store the position of the slides
    var leftPosition = 0;
    var frame = document.querySelector(frameSelector);
    var slides = document.querySelectorAll(slidesSelector);
    //Get the number of slides in the slider
    var slidesNumber = slides.length;
    var leftButton = document.querySelector(btnLeftSelector);
    var rightButton = document.querySelector(btnRightSelector);
    var slider = document.querySelector(sliderSelector);

    //Add classes to frame and slider divs
    frame.classList.add('frame');
    slider.classList.add('slider');

    //Event listeners for when the user clicks on the arrows
    leftButton.addEventListener("click", function() {
        carousel.previous();
    });

    rightButton.addEventListener("click", function() {
        carousel.next();
    });

    //Function that moves the slides left or right depending on variable value
    //Moves to the next slide if value is -1, moves to the previous is value is 1
    var moveSlide = function (value) {
        leftPosition += value*250;
        slider.style.left = leftPosition + 'px';
    };

    return {
        //Function to move to next slide
        next: function() {
            if(leftPosition > (slidesNumber-1)*-250)
            {
                moveSlide(-1);
            } else {
                leftPosition = 0;
                slider.style.left = leftPosition + 'px';
            }
        },
        //Function to go to previous slide
        previous: function() {
            if(leftPosition !== 0) {
                 moveSlide(1);
            } else {
                leftPosition = (slidesNumber-1)*-250;
                slider.style.left = leftPosition + 'px';
            }
        }
    };
};

//Create new instance of Carousel
var carousel = new Carousel('#frame', '#slider', '#slider .slide', '.arrowLeft', '.arrowRight');

需要将其调整为：

当滑块到达最后一张幻灯片时，使下一个箭头消失。
滑块位于第一张幻灯片上时，不显示上一个箭头。
使第一个下一个按钮转换顺利 - 现在由于某种原因，第一个下一个转换是即时的。这是视频https://puu.sh/xNko8/694e2439c2.mp4

Answer 1

第一次单击时转换不起作用，因为滑块中没有默认的左侧属性。只需添加左：0px，转换即使在第一次点击也能正常工作。

为了使箭头消失，使用javascript获取滑块的左侧属性。同样你也可以正确处理。

Answer 2

您好 添加jquery 到操作简单的DOM 在此示例中我使用限制宽度你的滑块和如果这个优越 那么 将滑块附加到父的末尾这里基于您的简单示例，但需要根据您的需要进行调整需要。

password = str(raw_input("Enter the password: "))

if password.isalnum() == False:
    print "Password should contain atleast one special character or number"
if password.isalnum() == False:
    print "Password should contain atleast one numeric number"
elif len(password)<8:
    print 'Too short'
elif password.isupper() == False:
    print 'Password should contain atleast one uppercase character'
elif password.islower() == False:
    print 'Password should contain atleast one lowercase character'
else:
    print "Password is OK"

is_callable() };

调整纯js旋转木马的功能

2 个答案: