Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2013, 05:22
Аватар для Anton Essential
Интересующийся
Отправить личное сообщение для Anton Essential Посмотреть профиль Найти все сообщения от Anton Essential
 
Регистрация: 28.05.2013
Сообщений: 14

Помогите пожалуйста минимизировать код
Доброе Утро ! Сегодня решил написать мини слайдер , в общем получился огромнейший код ,
причем такой армейский, как говориться перекладываем с места на место.
Имеется див с слайдами и див с переключателями, по умолчанию 3 дива с слайдами стоят как дисплей нон , по событию клик один слайд уходит влево а второй появляется и при этом к кружку на который был произведен клик добавляется класс селектед а с пред идущего убирается . В общем намутил я дерибасов в скрипте , такой советский код получился . Я так полагаю мои эти мутки можно сократить . По возможности, помогите решить мою задачу.
С уважением Антон.


<div class="medium-slider-wrap">
    <div class="medium-slide-1">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>
    <div class="medium-slide-2">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div> 
    <div class="medium-slide-3">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div> 
    <div class="medium-slide-4">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>     
</div>
<div class="switch">
    <ul>
        <li class="sl-1"><a class="selected"></a></li>
        <li class="sl-2"><a></a></li>
        <li class="sl-3"><a></a></li>
        <li class="sl-4"><a></a></li>
    </ul>
</div>


// JavaScript Document
$(document).ready(function() {
	$('.sl-1').click(function(){
		$(".sl-1 > a").addClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).show( "slide",{ direction: "right" }, 500 );
	});
	$('.sl-2').click(function(){
		$(".sl-2 > a").addClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-2" ).show( "slide",{ direction: "right" }, 500 );
	});
		$('.sl-3').click(function(){
		$(".sl-3 > a").addClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).show( "slide",{ direction: "right" }, 500 );
	});
		$('.sl-4').click(function(){
		$(".sl-4 > a").addClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).show( "slide",{ direction: "right" }, 500 );
	});
});
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2013, 06:01
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<style type="text/css">
div[class^="medium-slide-"]{
 display:none; 
}
div.medium-slide-1{
 display:block; 
}
.switch li{
 cursor:pointer;
}
</style>


<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('li[class^="sl-"]').click(function(){

		var liClass = $(this).attr('class').replace(/^([^\s]+).*$/ig,"$1");
		var num = liClass.replace("sl-","");
		$(this).parent().find("li a").removeClass('selected');
		$(this).find("a").addClass('selected');

		$('div[class^="medium-slide-"]').not('div.medium-slide-'+num).hide();
		$('div.medium-slide-'+num).show();

	});
});

</script>



<div class="medium-slider-wrap">
    <div class="medium-slide-1">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>
    <div class="medium-slide-2">
        <a href="#"><img src="images/logo-1.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo1"></a>
    </div> 
    <div class="medium-slide-3">
        <a href="#"><img src="images/logo-1.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo2"></a>
    </div> 
    <div class="medium-slide-4">
        <a href="#"><img src="images/logo-1.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo3"></a>
    </div>     
</div>
<div class="switch">
    <ul>
        <li class="sl-1"><a class="selected">1</a></li>
        <li class="sl-2"><a>2</a></li>
        <li class="sl-3"><a>3</a></li>
        <li class="sl-4"><a>4</a></li>
    </ul>
</div>

C .hide( "slide",{ direction: "left" }, 500 ); и .show( "slide",{ direction: "right" }, 500 ); - разбирайтесь сами
ибо обычно делаю через animate()

Последний раз редактировалось Deff, 19.06.2013 в 06:45.
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2013, 08:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Deff
C .hide( "slide",{ direction: "left" }, 500 ); и .show( "slide",{ direction: "right" }, 500 ); - разбирайтесь сами
это http://api.jqueryui.com/hide/
на всякий случай

вот этого непонял

$('li[class^="sl-"]').click(function(){ 
var liClass = $(this).attr('class').replace(/^([^\s]+).*$/ig,"$1"); 
var num = liClass.replace("sl-","");

не проще
$('.switch a').click(function(){
var num = +$(this).text();
//или  var num = ++$('.switch a').index(this);
Ответить с цитированием
  #4 (permalink)  
Старый 19.06.2013, 13:39
Аватар для ANAGAMA
Аспирант
Отправить личное сообщение для ANAGAMA Посмотреть профиль Найти все сообщения от ANAGAMA
 
Регистрация: 29.05.2013
Сообщений: 49

а все почему? Да потому, что с алгоритмами люди научились работать, а вот с данными нет
Ответить с цитированием
  #5 (permalink)  
Старый 19.06.2013, 13:53
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

Ну не сразу же все профессорами становяться..
Ответить с цитированием
  #6 (permalink)  
Старый 19.06.2013, 15:30
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от рони
Это не проще
var num = +$(this).text();
Показал специально: как вычленить класс
Ответить с цитированием
  #7 (permalink)  
Старый 23.06.2013, 14:18
Аватар для Anton Essential
Интересующийся
Отправить личное сообщение для Anton Essential Посмотреть профиль Найти все сообщения от Anton Essential
 
Регистрация: 28.05.2013
Сообщений: 14

Большое спасибо !
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пожалуйста вычислить общую сумму katalizator Общие вопросы Javascript 15 22.03.2013 16:26
Оцените пожалуйста код. newbie7 Оффтопик 13 16.03.2013 20:54
Ребята проверьте пожалуйста .js код Alenka1990 Общие вопросы Javascript 1 16.03.2013 12:34
ошибка в setAttributeNode - помогите пожалуйста Dron13 Events/DOM/Window 1 14.01.2011 23:20
Помогите код оптимизировать. Suharik Events/DOM/Window 2 27.05.2010 11:59