0

Привет! Возможно заголовок не понятен, объясню так: у меня есть несколько картинок в диве, мне нужно чтобы они сами по себе менялись, но так же чтобы пользователь мог их листать, как галерея, только с баннерами ;)

4
  • 1
    А что мешает взять любой из миллиона плагинов слайдшоу и использовать его?
    – Deonis
    27 авг 2013 в 19:00
  • @Lektor, Согласно правилам форума, вопросы не должны сводиться к решению либо завершению учебных заданий за учащихся. Пожалуйста, уточните, что вы сделали сами и что не получилось.
    – zb'
    27 авг 2013 в 19:15
  • гуглите jquery cycle 27 авг 2013 в 19:47
  • nivo-slider dev7studios.com/nivo-slider
    – ims
    28 авг 2013 в 12:21

2 ответа 2

1

Я в своё время использовал вот этот: jQuery.carouFredSel. Хотя он и очень "жирный", зато хорошо настраивается под любую задачу.

-1

Это в шапку:

 слайдер на jQuery.

Настройки скрипта:

hwSlideSpeed - Скорость анимации перехода слайда.
hwTimeOut - время до автоматического перелистывания слайдов.
hwNeedLinks - включает или отключает показ ссылок "следующий - предыдущий". Значения true или false

(function ($) {
var hwSlideSpeed = 1400;
var hwTimeOut = 5000;
var hwNeedLinks = true;

$(document).ready(function(e) {
    $('.slide').css(
        {"position" : "absolute",
         "top":'18%', "left": '0', "width":'100%'}).hide().eq(0).show();
    var slideNum = 0;
    var slideTime;
    slideCount = $("#slider .slide").size();
    var animSlide = function(arrow){
        clearTimeout(slideTime);
        $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
        if(arrow == "next"){
            if(slideNum == (slideCount-1)){slideNum=0;}
            else{slideNum++}
            }
        else if(arrow == "prew")
        {
            if(slideNum == 0){slideNum=slideCount-1;}
            else{slideNum-=1}
        }
        else{
            slideNum = arrow;
            }
        $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
        $(".control-slide.active").removeClass("active");
        $('.control-slide').eq(slideNum).addClass('active');
        }
if(hwNeedLinks){
var $linkArrow = $('<a id="" href="#"></a><a id="" href="#"></a>')
    .prependTo('#slider');      
    $('#nextbutton').click(function(){
        animSlide("next");
        return false;
        })
    $('#prewbutton').click(function(){
        animSlide("prew");
        return false;
        })
}
    var $adderSpan = '';
    /*$('.slide').each(function(index) {
            $adderSpan += '<span class = "control-slide">' + index + '</span>';
        });*/
    $('<div class ="sli-links">' + $adderSpan

+'</div>').appendTo('#slider-wrap'); $(".control-slide:first").addClass("active"); $('.control-slide').click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);} } /$('#slider-wrap').hover(
function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); });
/ rotator(); }); })(jQuery);

вот здесь картинки

<div id="slider-wrap" style="position:relative;z-index:35;left:18%;top:2%;opacity:1;width:80%">
    <div id="slider" >      <div class="slide"  ><center><div id="head"><a href="index.php"><img src="img/scool3.png"
></a></div></center></div>      <div class="slide" ><center><div id="head1"><a href="birthday.php"><img src="img/birth.png"
></a></div></center></div>  </div> </div> <div id="logo"><img src="img/logo1.jpg" width="100%" style="border-radius:8px;"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.