Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2015, 16:03
Интересующийся
Отправить личное сообщение для TRIGUN Посмотреть профиль Найти все сообщения от TRIGUN
 
Регистрация: 13.04.2014
Сообщений: 26

Интересный слайдер (ротатор)
Всем доброго времени суток.
Заметил на одном сайте интересный слайдер (ротатор), теперь мучаюсь тем, как реализовать у себя такой же.
Сайт
И там чуть ниже середины тот самый слайдер.


Кто мог бы помочь в создании такого же слайдер для html странички?
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2015, 17:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,976

Очень простой слайдер на jQuery
TRIGUN,
таких много ...
берём Вариант ... с генерацией кнопок вперёд назад и лёгким движением руки ставим в function sliderJS в нужный вам эффект ...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>Очень простой слайдер на jQuery</title>
	<style type="text/css">
	body {
		background: #eee;
		margin: 0;
		font-family: arial;
	}
	.wrapper {
		background: #fff;
		width: 700px;
		padding: 1px 15px 15px;
		margin: 0 auto;
	}
	.slider {
		z-index: 9;
		width: 700px;
		height: 290px;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
	}
	.slider ul,
	.slider li {
		padding: 0;
		margin: 0;
		list-style-type: none;

	}
	.slider ul {
		width: 9999px;
	}
	.slider ul li {
		list-style-type: none;
		float: left;
		width: 700px;
		height: 290px;
	}
	.slider .nav {
		position: absolute;
		left: 15px;
		bottom: 12px;
	}
	.slider .nav span {
		opacity: 0.9;
		background: #fff;
		margin: 0 8px 0 0;
		width: 16px;
		height: 16px;
		border-radius: 8px;
		cursor: pointer;
		overflow: hidden;
		display: block;
		float: left;
		box-shadow: 0 1px 2px #000;
	}
	.slider .nav span.on {
		background: #2e9419;
	}

.slider .prev {
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -20px;
	opacity: .5;
	cursor: pointer;
    text-decoration:  none;
}
.prev:after{
  content: '\25c4';
  color: rgb(255, 255, 255);
    font: 28px ;
}
.slider:hover .prev{
  opacity: 1;
}
.slider .next {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -20px;
	opacity: .5;
	cursor: pointer;
    text-decoration:  none;
}
.next:after{
  content: '\25ba';
  color: rgb(255, 255, 255);
    font: 28px;
}
.slider:hover .next{
  opacity: 1;
}

	</style>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
	$(document).ready(function()
	{
		$(".slider").each(function ()
		{
			var obj = $(this);
			$(obj).append("<div class='nav'></div>");

			$(obj).find("li").each(function ()
			{
				$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>");
				$(this).addClass("slider"+$(this).index());
			});
            $.each(['prev','next'],function ()
			{
			   $("<a/>",{'class' : this, href : ''}).appendTo(obj);
			});

			$(obj).find("span").first().addClass("on");
		});



    });

	function sliderJS (obj, sl) // slider function
	{
		var ul = $(sl).find("ul");
		var bl = $(sl).find("li.slider"+obj);
        $('li',ul).not(bl.fadeIn(800)).fadeOut(600);
   	}

	$(document).on("click", ".slider .nav span", function() // slider click navigate
	{
		var sl = $(this).closest(".slider");
		$(sl).find("span").removeClass("on");
		$(this).addClass("on");
		var obj = +$(this).attr("rel");
		sliderJS(obj, sl);
		return false;
	});
 $(document).on("click", ".slider .next, .slider .prev", function(b) {
     b.preventDefault();
     b = $(this).closest(".slider");
     var c = b.find(".nav span"),
         a = c.filter(".on");
     a.removeClass("on");
     a = +a.attr("rel");
     a += $(this).is(".next") ? 1 : -1;
     a == c.length && (a = 0);
     0 > a && (a = c.length - 1);
     c.eq(a).addClass("on");
     sliderJS(a, b);
 });

</script>
</head>
<body>

	<h1>Простой слайдер изображений на jQuery</h1>
	<div class="slider">
		<ul>
			<li><img src="http://dedushka.org/demo/slider/i/1.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/2.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/3.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/4.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/5.jpg" alt="" /></li>
		</ul>
	</div>
    <p></p>
    <div class="slider">
		<ul>
			<li><img src="http://dedushka.org/demo/slider/i/1.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/2.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/3.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/4.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/5.jpg" alt="" /></li>
		</ul>
	</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2015, 17:37
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

Сообщение от TRIGUN
Сайт
О боже, разработчикам бы руки оторвать.
Подключат целую кучу готовых плагинов и довольны, а сайт крутить невозможно, тормозит очень сильно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
интересный слайдер в песочнице imediasun1 Элементы интерфейса 3 26.01.2014 12:32
Связать ползунковый слайдер и аккордеон... All_ex74 Элементы интерфейса 1 31.05.2013 12:20
Конфликтуют два скрипта.1-й Слайдер сайта.2-й ротатор контента ilyashis jQuery 3 23.02.2013 09:26
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 23.07.2011 23:19
Ротатор контента warhammerrr Элементы интерфейса 4 30.06.2011 22:18