Question

我正在使用这个非常简单的java脚本向我的网站添加幻灯片。工作得很好，但我想添加另一个功能，一个背面和一个向前移动箭头到图像的左侧和右侧，以便用户可以在幻灯片之间导航。

// JavaScript Document

'use strict';

$(function() {

    //settings for slider
    var width = 900;
    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 src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<style type="text/css">
#slider {
    width: 900px;
    height: 600px;
    overflow: hidden;
	margin: 20px;
	margin-left: -170px;
	position: relative;
}

#slider .slides {
    display: block;
    width: 7500px;
    height: 600px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 900px;
    height: 600px;
}

/* helper css, since we don't have images */
.slide1 {background: white;}
.slide2 {background: blue;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}
</style>
<title>Web Site</title>
</head>


<body>
<div id="header_container">
<div id="header"> 
	<?php include ("pages/includes/header.php") ?>
</div></div>

<div id="container">
<div id="contentMaster"> 


            <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_container">
<div id="footer">
	<?php include ("pages/includes/footer.php") ?>
</div>
</div>
</body>

感谢您的帮助！

带有后退和前进箭头的JS幻灯片放映

0 个答案: