jQuery图像滑块固定在第一张图像上

Question

i'm trying to use this code to make an images slider, but the container is stuck to the first image and the jQuery slide dosen't work. 我正在尝试使用此代码来制作图像滑块，但是容器卡在第一张图像上，而jQuery幻灯片无法正常工作。 I can't find the problem the code seems correct... 我找不到代码似乎正确的问题...

Script & CSS 脚本和CSS

<script type="text/javascript">
'use strict';

$(function() {

//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;

//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);

var interval;

function startSlider() {
    interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,     function() {
            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}
function pauseSlider() {
    clearInterval(interval);
}

$slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

startSlider();


});


</script>

<style type="text/css">
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}

#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}

#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}

/* helper css, since we don't have images */
.slide1 {background: red;}
.slide2 {background: blue;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}

</style>

Here the HTML 这里的HTML

<body>

<div id="container">
<div id="header"> 
<?php include ("includes/header.php") ?>
</div>
<div id="sidebar"> 
<?php include ("includes/sidebar.php") ?>
</div>
<div id="contentMaster">

<div class="container">
        <div class="header">

        </div>

        <div id="slider">
            <ul class="slides">
                <li class="slide slide1">slide1</li>
                <li class="slide slide2">slide2</li>
                <li class="slide slide3">slide3</li>
                <li class="slide slide4">slide4</li>
                <li class="slide slide5">slide5</li>
                <li class="slide slide1">slide1</li>
            </ul>
        </div>

    </div>

</div>
<div id="footer">
<?php include ("includes/footer.php") ?>
</div>
</div>
</body>

Answer 1

You can use $( document ).ready() 您可以使用$（document）.ready（）

$(document).ready(function() {

//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;

//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);

var interval;

function startSlider() {
    interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,     function() {
            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}
function pauseSlider() {
    clearInterval(interval);
}

$slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

startSlider();


});

jQuery图像滑块固定在第一张图像上

问题描述

1 个解决方案

解决方案1
0 2015-09-17 20:11:11

jQuery图像滑块固定在第一张图像上

问题描述

1 个解决方案

解决方案1 0 2015-09-17 20:11:11

解决方案1
0 2015-09-17 20:11:11