Question

由于内容的一些自定义要求，我想创建自定义jQuery滑块。我现在几乎完成了所有两件事：

1下一个/上一个按钮功能 [2]如何正确循环滑块

这是实时网址 live url

这是HTML代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider">
<div id="slides">
<img src="images/image1.jpg" height="400" width="600" alt="" id="1">
<img src="images/image2.jpg" height="400" width="600" alt="" id="2">
<img src="images/image3.jpg" height="400" width="600" alt="" id="3">
</div>
</div>
<div id="slidertextwrap">
<div class="slidertext" id="1">
<h3>This is title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, deserunt sapiente       
eum accusamus quod, officiis aperiam maiores assumenda, perspiciatis eius ab et 
quisquam facere dolorem repellendus totam numquam consectetur. Culpa.</p>
</div>
<div class="slidertext" id="2">
<h3>This is title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, deserunt sapiente 
eum accusamus quod, officiis aperiam maiores assumenda, perspiciatis eius ab et 
quisquam facere dolorem repellendus totam numquam consectetur. Culpa.</p>
</div>
<div class="slidertext" id="3">
<h3>This is title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, deserunt sapiente 
eum accusamus quod, officiis aperiam maiores assumenda, perspiciatis eius ab et 
quisquam facere dolorem repellendus totam numquam consectetur. Culpa.</p>
</div>
</div>
<div id="slidernav">
<a href="#" class="left" onclick="prev(); prevt(); return false;">Previous</a>
<a href="#" class="right" onclick="next(); nextt(); return false;">Next</a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="slider.js"></script>
</body>
</html>

这是JS代码

var width = 940;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;    
var $slider = $('#slider');
var $slideContainer = $slider.find('#slides');
var $slides = $slideContainer.find('img');

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

自定义jQuery滑块 - 需要下一个和上一个幻灯片按钮功能

0 个答案: