Question

我无法弄清楚以这种方式构建的旋转木马中实现导航点的最有效方法是什么？任何建议？

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Slider test</title>
    <script src="JQuery-min.js"></script>
    <script type="text/javascript" src="js-slider.js"></script>
    <link rel="stylesheet" type="text/css" href="css-slider-test.css">
</head>
<body>
    <h1>TEST FOR BASIC IMAGE SLIDER</h1>
    <div id="slider">
        <ul class="slides">
            <li class="slide"><img id="image1" data-target="#dot1" src="immagine1-slider.jpg"></li>
            <li class="slide"><img id="image2" data-target="#dot2" src="immagine2-slider.jpg"></li>
            <li class="slide"><img id="image3" data-target="#dot3" src="immagine3-slider.jpg"></li>
            <li class="slide"><img id="image4" data-target="#dot4" src="immagine4-slider.jpg"></li>
            <li class="slide"><img id="image5" data-target="#dot5" src="immagine5-slider.jpg"></li>
            <li class="slide"><img id="2nd-image1" data-target="#dot1" src="immagine1-slider.jpg"></li>
        </ul>
    </div>
    <div class="nav-dots">
        <div id="dot1" class="dot"></div>
        <div id="dot2" class="dot"></div>
        <div id="dot3" class="dot"></div>
        <div id="dot4" class="dot"></div>
        <div id="dot5" class="dot"></div>
    </div>  
    </body>
</html>

这是我的js文件：

$(document).ready(function(){

//Configuration
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;

//Cache DOM
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');


//interval needs to be initially set to undefined since it must be a global variable
//for reusability purposes
var interval;


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

//pause function
function stopSlider() {
    clearInterval(interval);
}

//listen for mouseenter and pause
//resume on mouseleave
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);

//start slider when page is loaded
startSlider();

});

最后这是我的css：

img{
    width: 720px;
    height: 400px;
}
h1{
    text-align: center;
    font-family: sans-serif;
}
#slider{
    width:720px;
    height: 400px;
    overflow: hidden;
    display:block;
    margin: 20px auto;
}
#slider .slides{
    display: block;
    width: 6000px;
    height: 400px;
    margin:0;
    padding: 0;
}
    #slider .slide{
    float: left;
    list-style-type: none;
    width: 720px;
    height: 400px;
}
.nav-dots{
    width: 100px;
    margin: 10px auto;
}
.dot{
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #151515;
    display: inline-block;
}

如何在这个简单的jquery图像滑块中实现导航点？

0 个答案: