Показать сообщение отдельно
  #9 (permalink)  
Старый 22.04.2015, 13:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,137

Простой слайдер вариант мах
Babyslam,
не учли css
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
    <style type='text/css'>
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,hr,td{margin:0;padding:0}
    table{border-collapse:collapse;border-spacing:0}
    fieldset,img,abbr,acronum{border:0}
    address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
    ol,ul{list-style:none}
    caption,th{text-align:left}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
    q:before,q:after{content:''}
    html,body{height:100%;font:normal 12px/18px Arial,san-serif}
    .slider_wrap{margin:100px auto 0;width:680px;height:400px;position:relative;overflow:hidden}
    .slider_wrap img{opacity:0;width:640px;height:auto;display:block;position:absolute;top:0;left:-640px}
    .slider_wrap img:first-child{left:20px;opacity:1}
    .slider_wrap span{margin-top:-13px;width:15px;height:26px;display:block;position:absolute;top:50%;cursor:pointer;background:url(http://hostingfortraineeship.esy.es/Java4/slider2_arrow.png) no-repeat}
    .slider_wrap span.next{right:0;background-position:-15px 0}
    .slider_wrap span.next:hover{background-position:-15px -26px}
    .slider_wrap span.prev{left:0;background-position:0 0}
    .slider_wrap span.prev:hover{background-position:0 -26px}
    </style>



    <script>
        $(window).load(function() {
            $(function() {
                var elWrap = $('#slider'),
                    el = elWrap.find('img'),
                    indexImg = 1,
                    indexMax = el.length,
                    phase = 2000,
                    timer;
                var radios = $('[name="rad"]');

                function change(v) {
                    if (radios[0].checked == true) {

                        el.stop(true, true);
                        var next = el.eq(indexImg - 1);
                        el.not(next).animate({
                            "left": v ? -680 : 680,
                            opacity: 1
                        }, 800);
                        next.css({
                            left: v ? 620 : -620
                        }).animate({
                            "left": 20,
                            opacity: 1
                        }, 800)
                    } else if (radios[1].checked == true) {
                        el.stop(true, true).css({
                            opacity: 1
                        });
                        var next = el.eq(indexImg - 1);
                        next.appendTo(elWrap).css({
                            left: v ? 620 : -620
                        }).animate({
                            "left": 20
                        }, 800)
                    } else {
                        el.stop(true, true).css({
                            "left": 20
                        });
                        var next = el.eq(indexImg - 1);
                        el.not(next.animate({
                            opacity: 1
                        }, 800)).animate({
                            opacity: 0
                        }, 800);
                    }
                }

                elWrap.append('<span class="next"></span><span class="prev"></span>');
                var btnNext = $('span.next'),
                    btnPrev = $('span.prev');

                btnNext.click(function() {
                    window.clearTimeout(timer)
                    indexImg++;
                    if (indexImg == indexMax) {
                        btnNext.hide();
                    }
                    btnPrev.show();
                    change(true);

                });
                btnPrev.click(function() {
                    window.clearTimeout(timer)
                    indexImg--;
                    if (indexImg == 1) {
                        btnPrev.hide()
                    }
                    change();
                    btnNext.show();

                }).hide();
            });

        });
    </script>


</head>

<body>
    <div id="slider" class="slider_wrap">
        <img src="http://hostingfortraineeship.esy.es/Java4/slider_image2.jpg" alt="2" />

        <img src="http://hostingfortraineeship.esy.es/Java4/slider_image3.jpg" alt="3" />

        <img src="http://hostingfortraineeship.esy.es/Java4/slider_image1.jpg" alt="3" />
    </div>

    <ul>
        <li>
            <input type="radio" class="example" name="rad">
        </li>
        <li>
            <input type="radio" class="example" name="rad">
        </li>
        <li>
            <input type="radio" class="example" name="rad">
        </li>
    </ul>

</body>


</html>

Последний раз редактировалось рони, 22.04.2015 в 14:19.
Ответить с цитированием