Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Автоматический Image Slider с CSS и JQuery (Есть Демо)
Автоматический Image Slider с CSS и JQuery
monoton93Дата: Среда, 08.09.2010, 22:45 | Сообщение # 1
Шептун
Группа: Пользователи
Пользователь №: 188
Сообщений: 22
Награды: 0
Репутация: 0
Статус: оффлайн
Привет ! Хотите на свой сайт вот такой Image Slider ??


Вот что нужно зделать >>>

Для ночало вставьте в свой CSS вот такой код :

Code


*{outline: none;}
img {border: 0;}
.container {
    width: 790px;
    padding: 0;
    margin: 0 auto;
}
.folio_block {
    position: absolute;
    left: 50%; top: 50%;
    margin: -140px 0 0 -395px;
}

/ *-- Главная контейнеров - * /
.main_view {
    float: left;
    position: relative;
}
    / *-- Window / Маскировка стили - * /
.window {
    height:286px;    width: 790px;
    overflow: hidden; / *-- скрывает ничего вне множества width/height-- * /
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left;}

/ *-- Стили Пейджинг - * /
.paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100; / *-- Обеспечивает подкачки остается в верхнем слое - * /
    text-align: center;
    line-height: 40px;
    background: url(/slider/paging_bg2.png) no-repeat;
    display: none; / *-- скрыты по умолчанию, будет показано позднее с JQuery - *    
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;    
    background: #920000;    
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Вот что из этого получяетсо :

Теперь вставим следуюшчий код между тэгами или после HTML кода:

Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
       
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
       
    //Paging + Slider Function
    rotate = function(){    
     var triggerID = $active.attr("rel") - 1; //Get number of times to slide
     var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

     $(".paging a").removeClass('active'); //Remove all active class
     $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
     //Slider Animation
     $(".image_reel").animate({    
      left: -image_reelPosition
     }, 500 );
        
    };    
       
    //Rotation + Timing Event
    rotateSwitch = function(){     
     play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
      $active = $('.paging a.active').next();
      if ( $active.length === 0) { //If paging reaches the end...
       $active = $('.paging a:first'); //go back to first
      }
      rotate(); //Trigger the paging and slider function
     }, 7000); //Timer speed in milliseconds (3 seconds)
    };
       
    rotateSwitch(); //Run function on launch
       
    //On Hover
    $(".image_reel a").hover(function() {
     clearInterval(play); //Stop the rotation
    }, function() {
     rotateSwitch(); //Resume rotation
    });    
       
    //On Click
    $(".paging a").click(function() {    
     $active = $(this); //Activate the clicked paging
     //Reset Timer
     clearInterval(play); //Stop the rotation
     rotate(); //Trigger rotation immediately
     rotateSwitch(); // Resume rotation
     return false; //Prevent browser jump to link anchor
    });    
       
});
</script>

А вот и сам HTML код, его вставим там где хотим видеть слайд :

Code

<div class="container">
       
       <div class="folio_block">
           
           <div class="main_view">

               <div class="window">    
                   <div class="image_reel">
                       <a href="ссылка"><img src="/slider/reel_1.jpg" alt="" /></a>
                       <a href="ссылка"><img src="/slider/reel_2.jpg" alt="" /></a>
                       <a href="ссылка"><img src="/slider/reel_3.jpg" alt="" /></a>
                       <a href="ссылка"><img src="/slider/reel_4.jpg" alt="" /></a>
                   </div>
               </div>
               <div class="paging">

                   <a href="#" rel="1">1</a>
                   <a href="#" rel="2">2</a>
                   <a href="#" rel="3">3</a>
                   <a href="#" rel="4">4</a>
               </div>
           </div>

       </div>    

</div>

Но для начало загрузите файлы на сервер.




Прикрепления: slider.rar(126.1 Kb)



Сообщение отредактировал monoton93 - Среда, 08.09.2010, 22:47
 
вверх
ScytherДата: Четверг, 28.10.2010, 11:00 | Сообщение # 2
Авы нет
Шептун
Группа: Пользователи
Пользователь №: 28
Сообщений: 25
Награды: 0
Репутация: 0
Статус: оффлайн
блин у меня чтото не получается, слайдер кривит sad


Реклама запрещена!
 
вверх
WokasДата: Четверг, 28.10.2010, 13:03 | Сообщение # 3
Говорун
Группа: Пользователи
Пользователь №: 274
Сообщений: 53
Награды: 1
Репутация: 0
Статус: оффлайн
Старая тема! bag


Winter Style - Winter Life (с) Wokas
 
вверх
Love_AngelДата: Суббота, 04.12.2010, 21:07 | Сообщение # 4
Молчун
Группа: Пользователи
Пользователь №: 428
Сообщений: 15
Награды: 0
Репутация: 0
Статус: оффлайн
Помогите мне установить такой слайдер. Я вставляю всё как нужно но слайдер не появляется и появляются лишь цифры 1,2,3,4 на шапке. вот скрин:
http://s49.radikal.ru/i126/1012/f4/c1a495827319.jpg
 
вверх
cechДата: Суббота, 04.12.2010, 23:26 | Сообщение # 5
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Love_Angel, возможно конфликт скриптов ставь перед закрывающимя /BODY скрипты


 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Автоматический Image Slider с CSS и JQuery (Есть Демо)
  • Страница 1 из 1
  • 1
Поиск: