Мобильная версияВ настоящее время она работает по клику; теперь я хочу перемещаться по нему также с помощью кнопки (кнопка «предыдущий», кнопка «следующий»).
Я не хочу сохранять историю.
Когда я нажимаю кнопку «Предыдущая» или «Далее», я не хочу выделять изображение, на которое пользователь нажал ранее.
Я хочу выделить изображение, которое находится следующим в навигации,
например, если выделен img id=02, то при следующем нажатии кнопки должно быть выделено 03.
Как это возможно?
Код: Выделить всё
function switchVisible() {
if (document.getElementById('mapButtons')) {
if (document.getElementById('mapButtons').style.display == 'none') {
document.getElementById('mapButtons').style.display = 'block';
document.getElementById('modelButtons').style.display = 'none';
}
else {
document.getElementById('mapButtons').style.display = 'none';
document.getElementById('modelButtons').style.display = 'block';
}
}
}
function flip() {
$('.side').toggleClass('rotated');
}
var img_id = 2;
$(function() {
$('area').mouseover(function() {
var imgid=$(this).data('imgid');
// $('#demo').text("Mouseover for "+imgid);
$('#'+imgid)
.toggleClass('invert',true)
.css('z-index',2);
}).mouseout(function() {
var imgid=$(this).data('imgid');
// $('#mi').text("Mouseout for "+imgid);
$('#'+imgid)
.toggleClass('invert',false)
.css('z-index',1);
}).click(function() {
var imgid=$(this).data('imgid');
//$('#demo').text("click for "+imgid);
$('.pressed').removeClass('pressed');
img_id= imgid;
// $('#d').text("new function "+img_id);
$('#'+imgid)
.toggleClass('pressed')
.css('z-index',2);
});
});
$(function() {
var img = img_id;
$('#d').text("new function "+img);
//var img = 2;
var min = 2;
var max = 12;
$('.prevButton').on('click',function(e) {
if (img > min) {
removeAllBorders();
img--;
$('#' + img).toggleClass('pressed');
}
});
$('.nextButton').on('click',function(e) {
if (img < max) {
removeAllBorders();
img++;
$('#' + img).toggleClass('pressed');
}
});
function removeAllBorders() {
$('img').removeClass('pressed');
}
});Код: Выделить всё
#container img {position: absolute;}
img.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}
img.pressed {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}
.side {
position: absolute;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.side.rotated {
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
}
.back {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#mapButtons { position:absolute;top:90%;}
#modelButtons {
display: none;
position:absolute;top:90%;
}
.block {
width: 100%;
height: 100%;
-webkit-perspective:100%;
-moz-perspective:100%;
-ms-perspective:100%;
-o-perspective:100%;
perspective:100%;
}
#flip-button {
background: white;
font-family:'open sans';
font-weight: 400;
color: #5b5b5b;
border-radius: 5px;
margin-top: 1em;
}
.prevButton img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.prevButton:hover img {
opacity: .5;
}
.nextButton img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.nextButton:hover img {
opacity: .3;
}Код: Выделить всё
[img]leftovers_ch01.png[/img]
[img]http://i.imgur.com/fpqmClk.png[/img]
[img]http://i.imgur.com/TfhyWZs.png[/img]
[img]http://i.imgur.com/mUKWK5P.png[/img]
[img]http://i.imgur.com/R1JhAT9.png[/img]
[img]http://i.imgur.com/yMGFR2V.png[/img]
[img]http://i.imgur.com/rpCnGxL.png[/img]
[img]http://i.imgur.com/FWRCUs4.png[/img]
[img]http://i.imgur.com/Aw3NhT9.png[/img]
[img]http://i.imgur.com/gWhUtyJ.png[/img]
[img]http://i.imgur.com/IIJqsxf.png[/img]
[img]http://i.imgur.com/a9UW5mj.png[/img]
[img]blbl.png[/img]
[img]http://i.imgur.com/PjVnMY1.png[/img]
[img]mapButton1.png[/img]
[img]http://i.imgur.com/sR3xfJl.png[/img]
[img]prevButton.png[/img]
[img]modelButton1.png[/img]
[img]nextButton.png[/img]
Подробнее здесь: https://stackoverflow.com/questions/359 ... next-or-pr
