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

@kot56 · Регистрация: 01.04.2012

Студворк — интернет-сервис помощи студентам

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

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

Может подскажите в каком направлении надо копать?

@kalabuni · 14.08.2013, 04:06

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>

@kot56 · 14.08.2013, 19:34 **[ТС]**

Спасибо и теперь еще такой вопрос

Не могу тут понять, где правильно написать, чтобы при 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>

@kalabuni · 14.08.2013, 20:32

извините, но я ~~собачьего~~ JQuery языка не понимаю

мой код вы запускали?
кнопки "Назад" и "Вперёд" в нём в нужный момент исчезают
разберитесь - всё у вас перед глазами

@newJS · 14.08.2013, 22:06

Сообщение от kalabuni

мой код вы запускали?

А оно ему надо?

Не говоря от том, что это усложняет и использование и код и заставляет браузер выполнять бессмысленную работу по перерисовке страницы, одни минусы у этого подхода.

@kot56 · 15.08.2013, 01:38 **[ТС]**

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);
});     
        
        
        
        
        
        
        
        
        
        
        
});

@kot56 · 06.10.2013, 16:09 **[ТС]**

И снова привет всем, нужна помощь по той же читалке. Выплыл баг, когда загружаю картинку с расширением .пнг, то все ломается. Какими способами можно узнать расширение картинки и передавать его потом в скрипт?

@kalabuni · 06.10.2013, 23:59

Сообщение от kot56

Какими способами можно узнать расширение картинки и передавать его потом в скрипт?

только серверные методы с этим справятся
javascript тут не при делах

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@kot56 0 / 0 / 1 Регистрация: 01.04.2012 Сообщений: 42

	Читалка.перелистывание страниц 14.08.2013, 02:53. Показов 4704. Ответов 7 Метки нет (Все метки) Надо организовать на сайте читалку, пока решил сделать чего попроще и сразу пришел в тупик. Допустим в папке есть картинки от 1 до 23 с такими же именами 1.jpg 2.jpg и тп. Я пытался брать путь к картинкам, и подставлять в него 1, 2, 3 увеличивая или уменьшая значения через функцию, тем самым перелистывая, но что-то ничего не выходит. Может подскажите в каком направлении надо копать? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	14.08.2013, 20:32
	извините, но я ~~собачьего~~ JQuery языка не понимаю мой код вы запускали? кнопки "Назад" и "Вперёд" в нём в нужный момент исчезают разберитесь - всё у вас перед глазами 0

@kot56 0 / 0 / 1 Регистрация: 01.04.2012 Сообщений: 42
	06.10.2013, 16:09 [ТС]
	И снова привет всем, нужна помощь по той же читалке. Выплыл баг, когда загружаю картинку с расширением .пнг, то все ломается. Какими способами можно узнать расширение картинки и передавать его потом в скрипт? 0