Стильный слайдер Dsatyn в блок для сайта
Думаю сейчас очень трудно представить сайт без слайдера, и здесь как раз предоставлена версия JQuery слайдера. Который вы можете установить на свой ресурс в любой блок по правой или левой стороне. Его плюсы в том, что он будет занимать немного места, а вот информация выдавать много будет. Что по самой тематике, здесь думаю ближе подойдет кино онлайн, но не исключаю онлайн магазины, можно также товар показывать. Состоит он из одного корпуса и двух прозрачных кнопок, где вы можете перематывать в любую сторону. По гамме цвета сделан так, что подойдет как на темный или светлый интернет ресурс. Если вы установите больше по размеру изображение или картинку, то здесь все будет смотреться корректно, так как стили ужмут или наоборот расширят и подведут под те значение, которые требуются. Установка: Для начало ищем место, где будем ставить этот код: Код <div class="slider-box"> <div class="slider"> <a href="http://zornet.ru/"><img src="http://zornet.ru/_ld/2/87221870.png" alt=""></a> <a href="#"><img src="http://zornet.ru/_ld/2/29123386.jpg" alt=""></a> <a href="#"><img src="http://zornet.ru/_ld/2/43981783.png" alt=""></a> <a href="#"><img src="http://zornet.ru/_ld/2/72977494.png" alt=""></a> <a href="#"><img src="http://zornet.ru/_ld/2/43981783.png" alt=""></a> </div> <div class="prev"></div> <div class="next"></div> </div> Потом ниже ставим скрипт: Код <script> $(function() { var slider = $('.slider'), sliderContent = slider.html(), slideWidth = $('.slider-box').outerWidth(), slideCount = $('.slider img').length, prev = $('.slider-box .prev'), next = $('.slider-box .next'), sliderInterval = 7500, animateTime = 1000, course = 1, margin = - slideWidth; $('.slider img:last').clone().prependTo('.slider'); $('.slider img').eq(1).clone().appendTo('.slider'); $('.slider').css('margin-left', -slideWidth); function nextSlide(){ interval = window.setInterval(animate, sliderInterval); } function animate(){ if (margin==-slideCount*slideWidth-slideWidth){ slider.css({'marginLeft':-slideWidth}); margin=-slideWidth*2; }else if(margin==0 && course==-1){ slider.css({'marginLeft':-slideWidth*slideCount}); margin=-slideWidth*slideCount+slideWidth; }else{ margin = margin - slideWidth*(course); } slider.animate({'marginLeft':margin},animateTime); } function sliderStop(){ window.clearInterval(interval); } prev.click(function() { if (slider.is(':animated')) { return false; } var course2 = course; course = -1; animate(); course = course2 ; }); next.click(function() { if (slider.is(':animated')) { return false; } var course2 = course; course = 1; animate(); course = course2 ; }); slider.add(next).add(prev).hover(function() { sliderStop(); }, nextSlide); nextSlide(); }); </script> И остается установить стили в CSS, где вы еще можете вывести оттенок цвета. Код .slider-box{ position:relative; width:320px; height:435px; overflow:hidden; } .slider{ position:relative; width:10000px; height:435px; } .slider img{ float:left; width:320px; height:435px; } .slider-box .prev, .slider-box .next{ position:absolute; top:200px; display:block; width:29px; height:29px; cursor:pointer; } .slider-box .prev{ left:10px; background:url(http://zornet.ru/Ajaxoskrip/Aster/slider_controls.png) no-repeat 0 0; } .slider-box .next{ right:10px; background:url(http://zornet.ru/Ajaxoskrip/Aster/slider_controls.png) no-repeat -29px 0; } Также можете поставить в style эти стили и можно не ставить из в CSS, но здесь каждый сам видеть как делать. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 28 | |
| |
1 2 » | |