Двойная полоса прокрутки 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, время: 00:10. |