18.08.2017, 12:13
|
|
Новичок на форуме
|
|
Регистрация: 18.08.2017
Сообщений: 8
|
|
|
Случайная подмена блоков div
Ребят SOS! Нужна помощь!
Вот смотрите у меня есть слайдер :
<div class="slide active" data-order="1" data-color="#blue" data name="23">
<div class="slide-content ">
<div class="clip-svg">
<a href="#30"> <img class="" src="sl1.jpg" alt="" /> </a>
<div class="title-wrapper">
<h2>ТЕКСТ</h2>
<img id="waves" src="w1.jpg" alt="" />
<h1></h1>
</div>
</div>
</div>
</div>
<div class="slide " data-order="20" data-color="#f59600" data-name="Далее">
<div class="slide-content ">
<div class="clip-svg">
<img class="" src="sl2.jpg" alt="" />
<div class="title-wrapper bigger">
<h2>ТЕКСТ</h2>
<img id="waves" src="w1.jpg" alt="" />
<h1>Серфер ответит</h1>
</div>
</div>
</div>
</div>
<div class="slide " data-order="2" data-color="#f59600" data-name="Далее">
<div class="slide-content ">
<div class="clip-svg">
<img class="" src="sl2.jpg" alt="" />
<div class="title-wrapper bigger">
<h2>ТЕКСТ</h2>
<img id="waves" src="w1.jpg" alt="" />
<h1>Серфер ответит</h1>
</div>
</div>
</div>
</div>
Мне нужно чтобы эти блоки кроме активного ( менялись active случайно
Как такое реализовать ?
Нашел на просторах код
<script>
window.onload = function ()
{
function mix(b) {
for (var c = document.createElement("<div"), d = 0; d < b.length; d++) {
var a = Math.floor(Math.random() * b.length),
e = b[d],
f = e.parentNode,
a = b[a],
g = a.parentNode;
f.insertBefore(c, e);
g.insertBefore(e, a);
f.insertBefore(a, c)
}
c.parentNode.removeChild(c)
};
mix(document.getElementsByTagName("<div>"))
}
</script>
Но как указать чтобы целый блок:
<div class="slide">
</div>
Помогите пожалуйста !
|
|
18.08.2017, 12:14
|
|
Новичок на форуме
|
|
Регистрация: 18.08.2017
Сообщений: 8
|
|
|
К сожалению на новичек в js (
|
|
18.08.2017, 12:38
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,841
|
|
StaticArt, не понял, что значит "кроме активного".
Сделать так, чтобы класс «active» единоразово перешел от одного эл-та к другому можно так ( не тестировал):
var slides=document.getElementsByClassName('.slide'),
rand=(Math.floor(Math.random()*(slides.length-1+1))+1)-1;
for(var i=0;i<slides.length;i++){
var item=slides[i].classList;
item.remove('active');
if(i==rand)
item.add('active');
}
|
|
18.08.2017, 12:52
|
|
Новичок на форуме
|
|
Регистрация: 18.08.2017
Сообщений: 8
|
|
Да вы правы ! Именно так , но я не вижу куда вставить в JS
var mySlider = {
config : {
slider : '.slider-content',
activeSlide : '.slide.active',
button: '.next-button',
transition: 500,
delay: function() {return this.transition;},
navigation : '.control-nav'
},
init : function(config) {
this.createNav();
$(mySlider.config.button).
click(function() {
mySlider.animateSlide($(this));
});
},
getActiveSlide : function() {
return $(mySlider.config.activeSlide);
},
getNextSlide : function() {
var nextSlide = mySlider.getActiveSlide().next();
if ( nextSlide.length === 0 ){
nextSlide = $(mySlider.config.slider).find('.slide').eq(0);
}
return nextSlide;
},
getNextSlideColorAndName : function() {
var colorAndName = {};
var nextSlidenext = mySlider.getNextSlide().next();
var nextSlideColor = nextSlidenext.data('color');
var nextSlideName = nextSlidenext.data('name');
colorAndName.color = nextSlideColor;
colorAndName.name = nextSlideName;
if ( nextSlidenext.length === 0 ) {
nextSlidenext = $(mySlider.config.slider).find('.slide').eq(0);
nextSlideColor = nextSlidenext.data('color');
nextSlideName = nextSlidenext.data('name');
colorAndName.color = nextSlideColor;
colorAndName.name = nextSlideName;
}
return colorAndName;
},
createNav : function() {
var totalSlides = $(mySlider.config.slider).find('.slide').length;
var controlNav = $(mySlider.config.navigation).find('ul');
var nav;
for( var i=0; i < totalSlides; i++ ){
var active = "";
if(i === 0){
active = 'active';
}
controlNav.append('<li class="slider-nav nav-'+i+' '+active+' "></li>')
}
},
animateNav : function() {
var activeNav = $('li.active');
var nextNav = activeNav.next();
if(nextNav.length === 0){
nextNav = $('.control-nav li').eq(0);
}
activeNav.removeClass('active');
nextNav.addClass('active');
},
animateSlide : function(button) {
var activeSlide = mySlider.getActiveSlide();
var nextSlide = mySlider.getNextSlide();
var delay = mySlider.config.delay();
var clipPath = $('.clip-svg');
clipPath.css('transition-duration', mySlider.config.transition+'ms');
button.css('pointer-events', 'none');
nextSlide.css('z-index',10);
button.css('background', mySlider.getNextSlideColorAndName().color);
button.prev().find('.color').html(mySlider.getNextSlideColorAndName().name);
nextSlide.addClass('active').css('opacity', 1);
setTimeout(function() {
activeSlide.removeClass('active').css('opacity', 0);
}, delay);
setTimeout(function() {
nextSlide.css('z-index','');
button.css('pointer-events', 'auto');
}, delay + 300);
mySlider.animateNav();
}
}
$(document).ready(function() { mySlider.init(); });
|
|
18.08.2017, 12:57
|
|
Новичок на форуме
|
|
Регистрация: 18.08.2017
Сообщений: 8
|
|
т.е я вставляю в в 72 строчке
for(var i=0;i<slides.length;i++){
var item=slides[i].classList;
item.remove('active');
if(i==rand)
item.add('active');
}
заменив код с 72-75 и не работает( |
|
18.08.2017, 13:12
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,841
|
|
StaticArt,
в строку 94 затолкайте это:
activateRandSlide:function(){
$('.slide').removeClass('active').eq((Math.floor(Math.random()*(slides.length-1+1))+1)-1).addClass('active');
return this;
},
Между строками 19 и 20 вставьте это:
var self=this;
this.config.cycle_stopped=false;
this.config.__cycle_timeout=false;
this.startCycle=function(triggered){
if(!triggered)
self.config.cycle_stopped=false;
if(self.config.__cycle_timeout)
clearTimeout(__cycle_timeout);
if(!self.config.cycle_stopped)
return;
self.config.__cycle_timeout=setTimeout(function(){
self.activateRandSlide();
self.startCycle(true);
},self.config.transition)
return self;
}
this.stopCycle=function(){
self.config.cycle_stopped=true;
return self;
}
this.startCycle();
Последний раз редактировалось Nexus, 18.08.2017 в 13:37.
Причина: Bugfix
|
|
18.08.2017, 13:26
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Nexus,
может так?
.eq(Math.floor(Math.random()*slides.length)
|
|
18.08.2017, 13:36
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,841
|
|
|
j0hnik, может быть.
|
|
18.08.2017, 13:41
|
|
Новичок на форуме
|
|
Регистрация: 18.08.2017
Сообщений: 8
|
|
Посмотрите пожалуйста , вставил ,
Не знаю работает или нет, но вообщем кнопка next теперь не работает ((( что делать ?
var mySlider = {
config : {
slider : '.slider-content',
activeSlide : '.slide.active',
button: '.next-button',
transition: 500,
delay: function() {return this.transition;},
navigation : '.control-nav'
},
init : function(config) {
this.createNav();
$(mySlider.config.button).
click(function() {
mySlider.animateSlide($(this));
});
var self=this;
this.config.cycle_stopped=false;
this.config.__cycle_timeout=false;
this.startCycle=function(triggered){
if(!triggered)
self.config.cycle_stopped=false;
if(self.config.__cycle_timeout)
clearTimeout(__cycle_timeout);
if(!self.config.cycle_stopped)
return;
self.config.__cycle_timeout=setTimeout(function(){
self.startCycle(true);
},self.config.transition)
return self;
}
this.stopCycle=function(){
self.config.cycle_stopped=true;
return self;
}
this.startCycle();
},
getActiveSlide : function() {
return $(mySlider.config.activeSlide);
},
getNextSlide : function() {
var nextSlide = mySlider.getActiveSlide().next();
if ( nextSlide.length === 0 ){
nextSlide = $(mySlider.config.slider).find('.slide').eq(0);
}
return nextSlide;
},
getNextSlideColorAndName : function() {
var colorAndName = {};
var nextSlidenext = mySlider.getNextSlide().next();
var nextSlideColor = nextSlidenext.data('color');
var nextSlideName = nextSlidenext.data('name');
colorAndName.color = nextSlideColor;
colorAndName.name = nextSlideName;
if ( nextSlidenext.length === 0 ) {
nextSlidenext = $(mySlider.config.slider).find('.slide').eq(0);
nextSlideColor = nextSlidenext.data('color');
nextSlideName = nextSlidenext.data('name');
colorAndName.color = nextSlideColor;
colorAndName.name = nextSlideName;
}
return colorAndName;
},
createNav : function() {
var totalSlides = $(mySlider.config.slider).find('.slide').length;
var controlNav = $(mySlider.config.navigation).find('ul');
var nav;
for( var i=0; i < totalSlides; i++ ){
var active = "";
if(i === 0){
active = 'active';
}
controlNav.append('<li class="slider-nav nav-'+i+' '+active+' "></li>')
}
},
animateNav : function() {
var activeNav = $('li.active');
var nextNav = activeNav.next();
if(nextNav.length === 0){
nextNav = $('.control-nav li').eq(0);
}
activateRandSlide:function(){
$('.slide').removeClass('active').eq((Math.floor(Math.random()*(slides.length-1+1))+1)-1).addClass('active');
return this;
}
activeNav.removeClass('active');
nextNav.addClass('active');
},
animateSlide : function(button) {
var activeSlide = mySlider.getActiveSlide();
var nextSlide = mySlider.getNextSlide();
var delay = mySlider.config.delay();
var clipPath = $('.clip-svg');
clipPath.css('transition-duration', mySlider.config.transition+'ms');
button.css('pointer-events', 'none');
nextSlide.css('z-index',10);
button.css('background', mySlider.getNextSlideColorAndName().color);
button.prev().find('.color').html(mySlider.getNextSlideColorAndName().name);
nextSlide.addClass('active').css('opacity', 1);
setTimeout(function() {
activeSlide.removeClass('active').css('opacity', 0);
}, delay);
setTimeout(function() {
nextSlide.css('z-index','');
button.css('pointer-events', 'auto');
}, delay + 300);
mySlider.animateNav();
}
}
$(document).ready(function() { mySlider.init(); });
|
|
18.08.2017, 13:42
|
|
Новичок на форуме
|
|
Регистрация: 18.08.2017
Сообщений: 8
|
|
|
Ребят скажите скайп свой пожалуйста , просто дело срочное (
|
|
|
|
