Question

我正在尝试使用此代码制作图像滑块，但容器粘在第一张图片上，jQuery幻灯片不起作用。我找不到代码似乎正确的问题......

脚本＆amp; 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>

这里的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

您可以使用$( 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 个答案: