Двойная полоса прокрутки images не работает - HELP!
Есть проблема, решения найти не могу, хотя решение понимаю что есть...
Задача сделать в одной таблице две полосы прокрутки! Использовал любезно предоставленный скрипт с сайта: SDWS Тут всё понятно и просто, и одна полоса работает отлично... Но не могу разобраться как переделать скрипт и где именно правильно вставить идентификаторы что-бы появилась мультифункциональность? Просто поменять <div id="photos">не даёт результат с учётом смены АйдИ в строке скрипта
var obj = document.getElementById('photos');
Подскажите прошу... Внешний вид того, что пытаюсь сделать на СТРАНИЧКЕ Хочу что-бы можно было прокручивать в разные стороны и цветы и вазоны... Что делать?:help: |
Загляни в консоль ошибок:
Цитата:
|
Это да. Но вопрос как переделать предлагаемый СКРИПТ, что-бы работало одновременно 2 полосы прокруток ИЗОБРАЖЕНИЙ!
|
J.Strannik,
заменить тупо все переменные и названия функций и id но лучше найдите плагин карусели -- этот скрипт не критичен к множественному запуску |
Заменить "ТУПО" идея не плохая! Но именно так менял и ни чего не вышло! )
Нужно же не весь скрипт дублировать, а только его часть и в ней менять АйДи, но какие? И какую часть скрипта копировать?
var Timer;
var currentID = 0;
function Rotate(id) {
var obj = document.getElementById('photos');
obj.scrollLeft = id;
if (obj.scrollLeft != id) clearInterval(Timer);
currentID = obj.scrollLeft;
}
function ScrollBrands(value) {
Timer = setInterval("Rotate(currentID+"+value+")", 5);
}
// прокрутка по центру
function SetCenter() {
var obj = document.getElementById('photos');
obj.scrollLeft = 1000000;
obj.scrollLeft = obj.scrollLeft / 2;
currentID = obj.scrollLeft;
}
|
С учётом того, что переменных в самой таблице не так и много?!?!
<a onmouseout="clearInterval(Timer);" onmouseover="ScrollBrands(-2);"> <img src="arrow.gif" alt='<' border='0' width='20' height='128'> </a> </td> <td> <div id="photos" class="pictures"> Создавай другую строку , меня АйДи "photos" на другой, и копируя два разу верхний скрипт меняя только переменную "photos" не даёт результата, и вообще скрипт перестаёт работать (( |
J.Strannik,Timer currentID Rotate 'photos' ScrollBrands SetCenter везде на новое
|
рони, Если не сложно, укажите пример с произвольными айди на при примере
var Timer;
var currentID = 0;
function Rotate(id) {
var obj = document.getElementById('photos');
obj.scrollLeft = id;
if (obj.scrollLeft != id) clearInterval(Timer);
currentID = obj.scrollLeft;
}
function ScrollBrands(value) {
Timer = setInterval("Rotate(currentID+"+value+")", 5);
}
// прокрутка по центру
function SetCenter() {
var obj = document.getElementById('photos');
obj.scrollLeft = 1000000;
obj.scrollLeft = obj.scrollLeft / 2;
currentID = obj.scrollLeft;
}
|
<style>
body{
text-align: center;
}
.scroller{
margin-bottom: 10px;
}
.scroll-area{
width: 700px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
white-space: nowrap;
}
.scroll-control{
height: 230px;
line-height: 230px;
display: inline-block;
vertical-align: middle;
border: 1px solid #ccc;
padding: 0 10px;
}
</style>
<div class="scroller" id="scroller1">
<span class="scroll-control" data-step="-2">«</span>
<div class="scroll-area">
<img src="http://vazonchik.net.ua/cvetok_stroka/g01.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g02.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g03.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g04.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g05.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g06.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g07.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g08.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g09.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g10.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g11.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g12.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g13.png" alt="" />
</div>
<span class="scroll-control" data-step="+2">»</button>
</div>
<div class="scroller" id="scroller2">
<span class="scroll-control" data-step="-2">«</span>
<div class="scroll-area">
<img src="http://vazonchik.net.ua/cvetok_stroka/g01.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g02.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g03.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g04.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g05.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g06.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g07.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g08.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g09.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g10.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g11.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g12.png" alt="" />
<img src="http://vazonchik.net.ua/cvetok_stroka/g13.png" alt="" />
</div>
<span class="scroll-control" data-step="+2">»</button>
</div>
<script>
var Scroller = function(container) {
this.container = container;
this.buttons = container.querySelectorAll('.scroll-control');
this.element = container.querySelector('.scroll-area');
this.timerId = null;
var scroller = this;
for (var i = 0; i < this.buttons.length; i++) {
this.buttons[i].onmouseover = function() {
scroller.start(this.getAttribute('data-step')|0);
};
this.buttons[i].onmouseout = function() {
scroller.stop();
};
}
};
Scroller.prototype = {
start: function(step) {
var scroller = this;
this.stop();
this.timerId = setInterval(function(){
if (!scroller._scroll(step))
this.stop();
});
},
stop: function() {
clearInterval(this.timerId);
},
_scroll: function(step) {
var scrollLeft = this.element.scrollLeft;
this.element.scrollLeft += step;
return this.element.scrollLeft - scrollLeft;
}
};
</script>
<script>
new Scroller(document.getElementById('scroller1'));
new Scroller(document.getElementById('scroller2'));
</script>
|
К слову сайт не влазиит на экран 1024px, а дизайн чуть более чем уныл. Это так, для поднятия настроения )
|
| Часовой пояс GMT +3, время: 02:27. |