Я сделал простой код для смены div... Но я подумал, что было бы неплохо, если бы он автоматически переключался с некоторым таймаутом.
A создал все, только проблема в том, что я не программист js.
HTML A хочу сохранить, как сейчас, если это возможно.. Я бы изменил только js. Я думаю, что код js не очень хорошо, но почему-то нужно начинать :)
HTML ->
<div class="container">
<!-- helper class -->
<div class="green-section hover push">
<div class="col-md-3"></div>
<!-- Text inner -->
<div class="col-md-6">
<div class="text-inner">
<p class="text-centered web-description"><span class="webdesign">Work
great on all device <i class="icon-magic"></i></span> Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<p class="text-centered app-description"><span class="appdev">Mobile
friendly <i class="icon-beaker"></i></span> Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</p>
<p class="text-centered doc-description"><span class="doc">Detailed
documentation <i class="icon-info"></i></span> Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</p>
<p class="text-centered clean-description"><span class="clean">Clean
code <i class="icon-list-ul"></i></span> Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>
</div>
</div>
<!-- Text inner end -->
<!-- helper class -->
<div class="col-md-3"></div>
</div>
</div>
<!-- ||||| Welcome End ||||| -->
<!-- ||||| Features ||||| -->
<div class="container">
<div class="features">
<!-- first box -->
<div class="col-md-3 padding-5 dark text-center btn1 hover"><i class="icon-3x icon-code"></i>
</div>
<!-- second box -->
<div class="col-md-3 padding-5 dark text-center btn2 hover"><i class="icon-3x icon-copy"></i>
</div>
<!-- third box -->
<div class="col-md-3 padding-5 dark text-center btn3 hover"><i class="icon-3x icon-mobile-phone"></i>
</div>
<!-- fourth Box -->
<div class="col-md-3 padding-5 laptop-bg text-center btn4 hover"><i class="icon-3x icon-laptop"></i>
</div>
</div>
<!-- features end -->
</div>
<!-- container end -->
JS
$(".btn1").on("click", function () {
$('.btn1').css("background-color", "#7fe5b2");
$('.btn2,.btn3,.btn4').css("background-color", "#222222");
});
$(".btn2").on("click", function () {
$('.btn2').css("background-color", "#7fe5b2");
$('.btn3,.btn4,.btn1').css("background-color", "#222222");
});
$(".btn3").on("click", function () {
$('.btn3').css("background-color", "#7fe5b2");
$('.btn4,.btn2,.btn1').css("background-color", "#222222");
});
$(".btn4").on("click", function () {
$('.btn4').css("background-color", "#7fe5b2");
$('.btn3,.btn2,.btn1').css("background-color", "#222222");
});
$(".toggle-btn").on("click", function () {
$('.green-section').css("background", "#222222");
});
$(".btn3").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$(".app-description").show();
$(".web-description, .clean-description, .doc-description").hide();
});
$(".btn4").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$(".web-description").show();
$(".app-description, .clean-description, .doc-description").hide();
});
$(".btn2").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$(".doc-description").show();
$(".app-description, .clean-description, .web-description").hide();
});
$(".btn1").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$(".clean-description").show();
$(".app-description, .web-description, .doc-description").hide();
});
Извините за мой английский... и спасибо за любую помощь парням :)
Без изменения вашего html вообще, вот что у меня есть:
// link the btns and the descriptions
$('.btn1').data('description', '.clean-description');
$('.btn2').data('description', '.doc-description');
$('.btn3').data('description', '.app-description');
$('.btn4').data('description', '.web-description');
// for each div in the .features section (btns) add a click event
$(".features div").on("click", function (e) {
e.preventDefault();
$('.features div').removeClass('selected');
$(this).addClass('selected');
$('.green-section .text-inner p').hide();
$($(this).data('description')).show();
});
// Add a function to click the next btn in the .features section
function clickNext() {
var divs = $('.features div.selected').next();
if (divs.length) {
divs[0].click();
} else {
$('.features div')[0].click();
}
}
// add an interval to click the next btn every 4 seconds
setInterval(function () {
clickNext();
}, 4000);
Но я бы рекомендовал добавить теги данных в html и убедиться, что в разделе "Зеленые разделы" и "Функции" есть идентификаторы. Это позволит вам настроить правильные вещи с помощью кода jquery.
добавьте это в конец js
autoToggle = function (no)
{
$(".btn"+no).click();
if(no == 4)
{
no=1;
}
else
{
no++;
}
setTimeout("autoToggle("+no+")",2000);
}
autoToggle(1);
Вы должны добавить интервал в свой javascript, чтобы он мог пропустить их. Вы также можете изменить способ выполнения цветов. Попробуйте добавить классы к ним намного опрятно и легче контролировать
var selectedDiv = 1;
$(document).ready(function(){
setInterval(rotate,5000);
});
function rotate(){
console.log("ASDFASFD");
switch(selectedDiv)
{
case 1:
$(".btn2").click();
break;
case 2:
$(".btn3").click();
break;
case 3:
$(".btn4").click();
break;
case 4:
$(".btn1").click();
break;
}
}