Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.85/13: Рейтинг темы: голосов - 13, средняя оценка - 4.85
kot56
0 / 0 / 1
Регистрация: 01.04.2012
Сообщений: 42
1

Читалка.перелистывание страниц

14.08.2013, 02:53. Просмотров 2640. Ответов 7
Метки нет (Все метки)

Надо организовать на сайте читалку, пока решил сделать чего попроще и сразу пришел в тупик. Допустим в папке есть картинки от 1 до 23 с такими же именами 1.jpg 2.jpg и тп.

Я пытался брать путь к картинкам, и подставлять в него 1, 2, 3 увеличивая или уменьшая значения через функцию, тем самым перелистывая, но что-то ничего не выходит.

Может подскажите в каком направлении надо копать?
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.08.2013, 02:53
Ответы с готовыми решениями:

Перелистывание страниц с помощью стрелочек клавиатуры
Здравствуйте! Такой вопрос. Допустим у меня есть 2 страницы page1.php и page2.php Как...

Перелистывание блоков
Всем доброго времени суток! Помогите пожалуйста с реализацией идеи. Например есть 10 блоков....

Перелистывание влево
что нужно поменять в функции, чтобы картинка двигалась влево? function moveright() { if...

Перелистывание картинок javascript
Мне нужно создать круговое перелистывание картинок.Тоесть у меня есть 7 картинок , ниже их 2 кнопки...

Календарь Перелистывание по месяцам
Есть следующий календарь <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...

7
kalabuni
супермизантроп
Эксперт JS
3417 / 2703 / 647
Регистрация: 18.04.2012
Сообщений: 8,217
14.08.2013, 04:06 2
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var ind = 1;
function myFunc (x)
{
ind += x;
with (document)
   getElementById ('pic').src = 'field/' + ind + '.jpg',
   getElementById ('bck').style.visibility = (ind == 1) ? 'hidden' : 'visible',
   getElementById ('nxt').style.visibility = (ind == 23) ? 'hidden' : 'visible';
}
</script>
 
<u id="bck" style="cursor: pointer; visibility: hidden" onclick="myFunc (-1)">Назад</u>
<img id="pic" src="field/1.jpg">
<u id="nxt" style="cursor: pointer" onclick="myFunc (1)">Вперёд</u>
0
kot56
0 / 0 / 1
Регистрация: 01.04.2012
Сообщений: 42
14.08.2013, 19:34  [ТС] 3
Спасибо и теперь еще такой вопрос

Не могу тут понять, где правильно написать, чтобы при idn = 1 не отображалась кнопка перелистывания назад и при idn = 23 не показывалась кнопка перелистывания вперед

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var ind = 1;
var puth = 'images/comics/ArtComic_02/';
function next(x){
    ind += x;
    var orig = puth + ind + '.jpg';
    $('#page').attr('src', orig);
 
//  $('#next_page').(ind == 5) ? 'hide()' : 'show()';
                }       
 
 
$(document).ready(function()
{
    
//Элементы управления перелистыванием страниц
$('#next_page,#prev_page').fadeTo(0,0);
//$('#next_page').hover(function(){$(this).fadeIn(1000)},function(){$(this).fadeOut(1000)});
$('#next_page,#prev_page').mouseleave(function(){$(this).fadeTo(200,0)});
$('#next_page,#prev_page').mouseenter(function(){$(this).fadeTo(200,0.3);});
 
        
        
    var id_img = 1;
    var demo = $('#page').attr('src');
    $('#page').attr('src',demo+id_img+'.jpg');  
        
});
HTML5
1
2
3
4
5
<div id="reader">
                    <div id="prev_page" title="Предыдущая страница" onclick="next(-1)"></div>
                    <div id="next_page" title="Следующая страница" onclick="next(1)"></div>
                    <img id="page" src="images/comics/ArtComic_02/">
</div>
0
kalabuni
супермизантроп
Эксперт JS
3417 / 2703 / 647
Регистрация: 18.04.2012
Сообщений: 8,217
14.08.2013, 20:32 4
извините, но я собачьего JQuery языка не понимаю

мой код вы запускали?
кнопки "Назад" и "Вперёд" в нём в нужный момент исчезают
разберитесь - всё у вас перед глазами
0
14.08.2013, 20:32
newJS
Эксперт JSЭксперт HTML/CSS
2406 / 1082 / 307
Регистрация: 23.06.2011
Сообщений: 3,379
14.08.2013, 22:06 5
Цитата Сообщение от kalabuni Посмотреть сообщение
мой код вы запускали?
А оно ему надо?
Не говоря от том, что это усложняет и использование и код и заставляет браузер выполнять бессмысленную работу по перерисовке страницы, одни минусы у этого подхода.
0
kot56
0 / 0 / 1
Регистрация: 01.04.2012
Сообщений: 42
15.08.2013, 01:38  [ТС] 6
kalabuni,
Javascript
1
2
 getElementById ('prev_page').style.visibility = (ind == 1) ? 'hidden' : 'visible',
    getElementById ('next_page').style.visibility = (ind == 23) ? 'hidden' : 'visible';
не подходит для моего кода

Добавлено через 2 часа 13 минут
Сделал такое решение. Все работает, но есть один баг, если не убирать мышку с элемента который должен исчезнуть, когда ind равно 1, то он не исчезает и можно перелистнуть в пустоту, просмотрел другие события мышь, вроде подходящего не нашел, мб кто-то знает, как пофиксить?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var ind = 1;
var puth = 'images/comics/ArtComic_02/';
function next(x){
    $('#next_page,#prev_page').css('visibility','visible');
    ind += x;
    var orig = puth + ind + '.jpg';
    $('#page').attr('src', orig);
    
//  $('#next_page').(ind == 5) ? 'hide()' : 'show()';
                }       
 
 
$(document).ready(function()
{
    
//Элементы управления перелистыванием страниц
$('#next_page,#prev_page').fadeTo(0,0);
$('#next_page,#prev_page').mouseleave(function(){$(this).fadeTo(200,0)});
        // getElementById ('prev_page').style.visibility = (ind == 1) ? 'hidden' : 'visible',
//      getElementById ('next_page').style.visibility = (ind == 23) ? 'hidden' : 'visible';
 
$('#prev_page').mouseover(function(e) {
    if(ind==1){$(this).css('visibility','hidden');} else {$(this).fadeTo(200,0.3);}
});
$('#next_page').mouseover(function(e) {
    if(ind==6){$(this).css('visibility','hidden');} else {$(this).fadeTo(200,0.3);}
});
 
        
    //задаем первичный путь картинки 
    var id_img = 1;
    var demo = $('#page').attr('src');
    $('#page').attr('src',demo+id_img+'.jpg');
 
//управление перелистыванием стрелками
$(document).keydown(function(e) {
    if(e.which == 39) next(1);
    if(e.which == 37) next(-1);
});     
        
        
        
        
        
        
        
        
        
        
        
});
0
kot56
0 / 0 / 1
Регистрация: 01.04.2012
Сообщений: 42
06.10.2013, 16:09  [ТС] 7
И снова привет всем, нужна помощь по той же читалке. Выплыл баг, когда загружаю картинку с расширением .пнг, то все ломается. Какими способами можно узнать расширение картинки и передавать его потом в скрипт?
0
kalabuni
супермизантроп
Эксперт JS
3417 / 2703 / 647
Регистрация: 18.04.2012
Сообщений: 8,217
06.10.2013, 23:59 8
Цитата Сообщение от kot56 Посмотреть сообщение
Какими способами можно узнать расширение картинки и передавать его потом в скрипт?
только серверные методы с этим справятся
javascript тут не при делах
0
06.10.2013, 23:59
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.10.2013, 23:59

Как создается перелистывание слайдов мышью?
Как создается такой эффект в слайдере, когда перелистывание осуществляется с помощью захвата...

Перелистывание картинок
Доброго времени суток. Столкнулся с вопросом. Есть массив путей к картинкам (php), мне нужно...

Автоматическое перелистывание картинок
нашел скрипт в интернете перелистывание картинок. Переписал &quot;под себя&quot; в итоге в консоли хрома...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.