Я хотел бы кодировать слайдер с JQuery от царапин

-2

Hy все,Я хотел бы кодировать слайдер с JQuery от царапин

Моя задача состоит в том, чтобы реализовать слайдер с чистым HTML/код JQuery.

Шаблон является продолжением

My Slider

и HTML код для верхнего шаблона последующей

<div id="viewport-container"> 
    <section id="sliding-container"> 
     <article id="slide-0" class="slide"><span></span></article> 
     <article id="slide-1" class="slide"><span></span></article> 
     <article id="slide-2" class="slide"><span></span></article> 
     <article id="slide-3" class="displayed-slide"><span></span></article> 
    </section> 
</div> 
<nav id="slider-nav"> 
    <a href="#slide-0" class="active"></a> 
    <a href="#slide-1"></a> 
    <a href="#slide-2"></a> 
    <a href="#slide-3"></a> 
</nav>

Начнем с кнопкой {# слайд-0}, которые отображают статьи { ID = "слайд-0"}; когда мы выберем другую кнопку, допустим, {# slide-3}, затем статья с {ID = "слайд-0"} исчезает, а статья с {ID = "слайд-3} исчезает, когда мы выбираем другую кнопку, скажем {# slide-1}, тогда статья с {ID = "слайд-3"} исчезает, а статья с {ID = "слайд-1} исчезает; и так далее.

Я начал бороться с этой целью неделю назад, и поэтому прошу помочь вам.

Много большого спасибо

источник

2013-12-02 LarAnto

извините, но где вы застряли? Какой у Вас вопрос? –

Ну, слайдер pips 'index' относится к слайду' index', поэтому вы должны начать с него .... –

Покажите нам какой-нибудь код, работающий на вашем слайдере jquery, где вы получили ошибку. Здесь вы просите нас сделать эту работу за вас. Поскольку вы новичок, обратите внимание, что мы можем помочь вам, если вы застряли в чем-то, а не код для вас. – fscore

Я сделал это (phew !!)

Теперь это CSS

#viewport-container { 
height: 250px; 
width: 980px; 
margin: 0 auto; 
overflow: hidden; 
} 

#sliding-container { 
width: 100%; 
} 

#slide-0 { 
background-image: url(/Images/slide_home.jpg); 
height: 250px; 
width: 980px; 
position: absolute; 
} 

#slide-1 { 
background-image: url(/Images/slide_informatica.jpg); 
height: 250px; 
width: 980px; 
position: absolute; 
} 

#slide-2 { 
background-image: url(/Images/slide_musica.jpg); 
height: 250px; 
width: 980px; 
position: absolute; 
} 

#slide-3 { 
background-image: url(/Images/slide_recensioni.jpg); 
height: 250px; 
width: 980px; 
position: absolute; 
} 

#slider-nav { 
text-align: center; 
margin: 10px 0 0 0; 
} 

#slider-nav a { 
width: 10px; 
height: 10px; 
display: inline-block; 
background: #ddd; 
border-radius: 50%; 
} 

#slider-nav a.active { 
background: #999; 
}

это HTML

<head> 
<title></title> 
<script src="Scripts/jquery-2.0.3.min.js"></script> 
<link href="CSS/Slider.css" rel="stylesheet" /> 

</head> 
<body> 
<div id="viewport-container"> 
<section id="sliding-container"> 
<article id="slide-0" class="displayed" style="display:block;"><span></span></article> 
<article id="slide-1" style="display:none"><span></span></article> 
<article id="slide-2" style="display:none"><span></span></article> 
<article id="slide-3" style="display:none"><span></span></article> 
</section> 
</div> 
<nav id="slider-nav"> 
<a id="btn-0" href="#slide-0" class="active"></a> 
<a id="btn-1" href="#slide-1"></a> 
<a id="btn-2" href="#slide-2"></a> 
<a id="btn-3" href="#slide-3"></a> 
</nav>

и это скрипт

<script> 
$(document).ready(function() { 
var $navButtons = $("#slider-nav > a"); 

$navButtons.click(
function() { 
var $selectedButton = $(this); 
var rawIdSlideToFadeIn = $selectedButton.attr("href"); 

$navButtons.removeClass("active"); 
$selectedButton.addClass("active"); 

crossFading(rawIdSlideToFadeIn); 
}); 

function crossFading(rawIdSlideToFadeIn) { 
var $slideToFadeIn = $(rawIdSlideToFadeIn);     
var $slideToFadeOut = $("article.displayed"); 
var idSlideToFadeIn = $slideToFadeIn.attr("id"); 
var idSlideToFadeOut = $slideToFadeOut.attr("id");     

if(idSlideToFadeIn != idSlideToFadeOut) 
{ 
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut(); 
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn(); 
} 
} 
}); 
</script>

Да, какая-то часть этого кода должна быть улучшено, но ядро построено,

Особая благодарность Суши Балбохе: его намек показал мне правильный путь.

Большое спасибо

источник

2013-12-03 16:23:18 LarAnto

Почему вы не поставить яваскрипт функции в вашем HREF, которые могут просто изменить класс вашей статьи.

При изменении класса вашей статьи, вы можете отображать их или нет (как мы можем видеть, класс = слайд или отображаться слайд)

Я не знаю, если это то, что вы хотите сделать?

Вы что-то пробовали?

источник

2013-12-02 11:48:42 SushiBalboha

Большое спасибо за предложение – LarAnto

Это позволит вам двигаться. Вам потребуется: - http://jquery.com/ - JQuery - http://jqueryui.com/ -JQueryUI

С помощью этих двух вашей работы легко. Первая ссылка JQuery на ваш сайт, тогда вы ссылаетесь на JQueryUI.

Тогда вы будете делать что-то подобное в вашем собственном JQuery Код:

В HTML:

<div id="slider"> 
    <div id="firstSlide"> 
     <img class="active" src="pics/home/1.1.gif"/> 
     <img src="pics/home/1.2.gif"/> 
     <img src="pics/home/1.3.gif"/> 
    </div> 
</div>

CSS-:

#slider 
    { 
     position: relative; 
     height: 180px; 
     border-bottom: 3px solid black; 
     z-index: 1; 
     box-shadow: 0px 0px 10px black; 
    } 

    #firstSlide 
    { 
     position: absolute; 
     width: 198px; 
     height: 100%; 
     left: 0%; 
     border: 1px solid black; 
    } 

    #firstSlide img 
    { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 0px; 
     left: 0px; 
     z-index: 1; 
    } 

    #firstSlide img.active 
    { 
     z-index: 3; 
    }

JQuery:

var howLongEffectLasts = 1000; 
var timerInterval = 7000; 
var slideDelay = 300; 
var slideEffect = 'slide'; 
var slideDirection = 'up'; 

var timer = setInterval('DoIt1()', timerInterval); 

function DoIt1() 
{ 
    var $active = $('#firstSlide' + ' .' + 'active'); 
    var $next = ($active.next().length > 0) ? $active.next() : $('#firstSlide' + ' ' + 'img:first'); 
    $next.css('z-index',2); 
    $active.toggle(slideEffect, { direction: slideDirection }, howLongEffectLasts, function() { 
     $active.css('z-index',1).show().removeClass('active'); 
     $next.css('z-index',3).addClass('active'); 
    }); 
    setTimeout(function() { DoIt1(); }, slideDelay); 
}

В JQuery, просто измените var на ваши нужды. Кроме того, измените CSS и т. Д. В соответствии с вашими потребностями. Z-ИНДЕКСЫ ОЧЕНЬ важны здесь, поэтому будьте осторожны, когда вы меняете CSS, который я вам дал.

источник

2013-12-02 12:06:29

Большое спасибо за предложение – LarAnto

Удовольствие. Это позволит вам использовать различные типы слайдов. А именно: Fade, Explode, Blind, Pop, Bounce, Shake ... да, их немало. –

Я хотел бы кодировать слайдер с JQuery от царапин

ответ

Смежные вопросы