master

分支 (1)

管理

管理

master

slider_plugin
/
test.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
		    margin:0;
		    padding:0;
		}

		#slider{
		    margin-top: 100px;
		    width:400px;
		    height: 248px;
		    /*overflow: hidden;*/
		    position: relative;
		}

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

		#slider .slide{
		    float:left;
		    list-style-type: none;
		    width: 400px;
		    height:248px;
		    box-sizing: border-box;
		    border: 1px solid darkgreen;

		    text-align: center;
		    line-height: 248px;
		}

		.sliderControl{
		    position: absolute;
		    top: 75px;
		    width: 400px;
		    height:160px;
		    box-sizing: border-box;
		}

		.sliderControl > div{
		    height:100px;
		    width:50px;
		    background: #b09880;
		}

		.sliderControl .buttonControlContainer{
		    width:180px;
		    height:20px;
		    position: absolute;
		    bottom: 0;
		    left:50%;
		    margin-left: -90px;
		    background:transparent;
		}

		.goleft{
		    float: left;
		}

		.goright{
		    float: right;
		}

		.controlButton{
		    list-style-type: none;
		    float: left;
		    height:20px;
		    width:20px;
		    margin-right: 20px;
		    background: gold;
		}

		.buttonActive{
		    background: seagreen;
		}

		.controlButton:last-child{
		    margin-right: 0;
		}
	</style>
	<script type="text/javascript" src="../tab/js/jquery-1.10.2.js"></script>
</head>
<body>
	<div id="slider">
    <div>
        <ul class="slides">
            <li class="slide">a</li>
            <li class="slide">b</li>
            <li class="slide">c</li>
            <li class="slide">d</li>
            <li class="slide">e</li>
            <li class="slide">a</li>

        </ul>
    </div>

        <div class="sliderControl">
            <div class="goleft"></div>
            <div class="goright"></div>
            <div class="buttonControlContainer">
                <ul>
                    <li class="controlButton buttonActive">a</li>
                    <li class="controlButton">b</li>
                    <li class="controlButton">c</li>
                    <li class="controlButton">d</li>
                    <li class="controlButton">e</li>
                </ul>
            </div>
        </div>


</div>
<script type="text/javascript">
	$(function () {
        //setInterval
        //animate margin-left
        // if it is last slide, go to position 1(0px)

        //listen for mouseenter and pause
        //resume on mouseleave


        //cache DOM
        var $slider = $('#slider');
        var $sliderContainer = $slider.find('.slides');
        var $slides = $sliderContainer.find('.slide');
        var interval;
        var width = $slider.width(),
            animaetionspeed = 1000,
            pause = 3000,
            currentSlide = 1,
            doubleWidth = width*2;
        function sliderMove(direction) {
            if(width === doubleWidth){
                width = $slider.width();
            }
            var Dir,
                InitIndex;
            if (direction === '-') {
                Dir = '+';
                InitIndex = -width * ($slides.length-1 );
                if(currentSlide === 1){
                    $sliderContainer.css('margin-left', InitIndex);
                    currentSlide = 6;
                }
            } else if (direction === '+') {
                Dir = '-';
                InitIndex = 0;
            }
            if(currentSlide === 1 && direction === '-'){
                width = doubleWidth;
            }
            $sliderContainer.animate({'margin-left': Dir + '=' + width + 'px'}, animaetionspeed, function () {

                    if (currentSlide === $slides.length) {
                        $controlButton.eq(0).removeClass('buttonActive');
                    }
                    $controlButton.eq(currentSlide - 1).removeClass('buttonActive');
                    if (direction === '+') {
                        currentSlide++;

                        if (currentSlide >= $slides.length) {
                            currentSlide = 1;
                            $sliderContainer.css('margin-left', InitIndex);
                        }
                    }
                    else if (direction === '-') {
                        currentSlide--;
                        if (currentSlide <= 1) {
                            currentSlide = $slides.length;

                            $sliderContainer.css('margin-left', InitIndex);
                            //加在第六个，也就是第二个a上
                            $controlButton.eq(0).addClass('buttonActive');
                        }
                    }
                    $controlButton.eq(currentSlide - 1).addClass('buttonActive');
                });
        }


        function startSlider() {
            interval = setInterval(function () {
                sliderMove('+');
            }, pause);

        }

        function stopSlider() {
            clearInterval(interval);
        }

        $('.goright').on('click', function () {
            sliderMove('+');
        });
        $('.goleft').on('click', function () {
            console.log(currentSlide);
            sliderMove('-');
        });

        $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
        startSlider();


        var $controlButton = $('.controlButton');
        var curPos;
        var inter;
        $controlButton.on('click', function () {
            if(width === doubleWidth){
                width = $slider.width();
            }
            curPos = $(this).index() + 1;
            inter = curPos - currentSlide;

            $controlButton.eq(curPos - 1).addClass('buttonActive');
            $controlButton.eq(currentSlide - 1).removeClass('buttonActive');
            if (inter < 0) {
                $sliderContainer.animate({'margin-left': '+=' + (-inter) * width}, animaetionspeed, function () {
                });
            } else if (inter > 0) {
                $sliderContainer.animate({'margin-left': '-=' + inter * width}, animaetionspeed);
            }

            currentSlide = curPos;

        });

    }
);

</script>
</body>
</html>