jQuery Simple Fade Slider

jQuery Simple Fade Slider

JavaScript Document

//-----------------------------------------------------------------------------------------	jQuery
document.write("<script type='text/javascript' src='https://code.jquery.com/jquery-latest.min.js'></script> ");
window.onload = function () {
    $(document).ready(function () {
        var delay = 1000;
        var auto = 5000;
        var timeout = setTimeout(function () {
            $('.next').click();
        }, auto);
 
        $('#slider p').each(function (index, element) {
            $('#round').append('<b></b>');
        });
 
        $('#round b:first').addClass('active');
 
        $('.next').click(function () {
            changeSlide('next');
        });
        $('.prev').click(function () {
            changeSlide('prev');
        });
 
        function changeSlide(btn) {
            clearTimeout(timeout);
 
            if (btn == 'next') {
                var direction = $('#slider p.active').next('p');
            } else if (btn == 'prev') {
                var direction = $('#slider p.active').prev('p');
            }
 
            $('#slider p.active').removeClass().fadeOut();
 
            if (direction.length) {
                direction.addClass('active').fadeIn(delay);
            } else {
                if (btn == 'next') {
                    $('#slider p:first').addClass('active').fadeIn(delay);
                } else {
                    $('#slider p:last').addClass('active').fadeIn(delay);
                }
            }
            $('#round .active').removeClass();
            $('#round b').eq($('#slider .active').index('#slider p')).addClass('active');
            timeout = setTimeout(function () {
                $('.next').click();
            }, auto);
        }
 
    });
}

HTML

<div id="slider">
	<a href="#" class="prev">prev</a>
	<a href="#" class="next">next</a>
		<p class="active" style="display:block;">
			<img src="materials/img/slider/img1.png" alt="" />
		</p>
		<p>
			<img src="materials/img/slider/img2.png" alt="" />
		</p>
		<p>
			<img src="materials/img/slider/img3.png" alt="" />
		</p>
		<div id="round"></div>
	</div>

CSS

/*---================== SLIDER ===---*/
#slider{
	height:335px;
	margin-top:85px;
	position:relative;
}
#slider p{
	position:absolute;
	width:100%;
	text-align:center;
	top:0;
	margin:0;
	z-index:-1;
	display:none;
}
a.prev, a.next{
	position:absolute;
	background:url(../img/slider/prev.png);
	width:40px;
	height:40px;
	display:block;
	text-indent:-9999px;
	z-index:999;
	left:50%;
	margin-left:-515px;
	top:150px;
}
a.next{
	margin-left:475px;
	background:url(../img/slider/next.png);
}
#round{
	text-align:center;
	position:absolute;
	width:100%;
	z-index:999;
	top:295px;
}
#round b{
	display: inline-block;
	height:10px;
	width:10px;
	background:#b0b0b0;
	margin:5px;
	border-radius:5px;
}
#round b.active{
	background:#59a0bf;
}

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *