Question

我想使用具有幻灯片效果的纯JS创建图像滑块。当我第一次点击下一个按钮时它会工作。第一个图像向左和第二个到来。但第二次我点击图像它从第一次再次开始。为什么第三个图像做不滑？您可以更改下一个功能

    <style>
        #container{
            width: 870px;
            height: 540px;
            overflow: hidden;
            margin: 0 auto;
        }
        #img-holder{
            width: calc(870px*3);
        }
        img{
            float: left;
            position: relative;
        }
    </style>


<div id="container">
    <div id="img-holder">
        <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/1.jpg" alt="1">
        <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/2.jpg" alt="2">
        <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/3.jpg" alt="3">
    </div>
    <div id="buttons">
        <button id="left">prev</button>
        <button id="right" onclick="next()">next</button>
    </div>
</div>

<script>

goRight=1;

function next () {
    // body... 

    interval =setInterval(Slide,2);

}

function Slide () {
    // body... 
    var img=document.querySelectorAll("#img-holder img");
    for(i=0;i<img.length;i++){
        img[i].style.right=goRight+"px";
    }

    goRight=goRight+1;
    console.log(goRight)

    if((goRight-1)%870==0){


        clearInterval(interval);
        goRight=1;
    }
}

</script>

Answer 1

这是因为您完成滚动后重置goRight。

var

您需要使用更好的条件重置<style> #container{ width: 870px; height: 540px; overflow: hidden; margin: 0 auto; } #img-holder{ width: calc(870px*3); } img{ float: left; position: relative; } </style> <div id="container"> <div id="img-holder"> <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/1.jpg" alt="1"> <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/2.jpg" alt="2"> <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/3.jpg" alt="3"> </div> <div id="buttons"> <button id="left">prev</button> <button id="right" onclick="next()">next</button> </div> </div> <script> var goRight=1,visible_index = 1; function next () { // body... visible_index++ interval =setInterval(Slide,2); } function Slide () { // body... var img=document.querySelectorAll("#img-holder img"); for(i=0;i<img.length;i++){ img[i].style.right=goRight+"px"; } goRight=goRight+1; console.log(goRight) if((goRight-1)%870==0){ clearInterval(interval); if(visible_index == img.length) goRight=1; } } </script>一旦您将其设置到图库的末尾，也可以使用另一个class LoginForm extends React.Component { onSubmit(values) { console.log(values.email) } render() { var { handleSubmit } = this.props; // Provided by redux-form return ( <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> <label>E-mail</label> <Field name='email' component='input' type='text' /> <button type="submit">Login</button> </form> ) } } const form = reduxForm({ form: 'LoginForm' }) export default connect(mapStateToProps)(form(LoginForm));来计算您正在使用的图像

const combinedReducers = combineReducers({
    form: formReducer
});

export default combinedReducers;

图像滑块使用纯JavaScript

1 个答案: