Необходима помощь в вёрстке слайд-шоу

@EgorZ · Регистрация: 17.06.2016

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

Здравствуйте. Извините, если не в ту тему пишу, я в этом деле новичок.
Начнем) Мне нужна помощь в прокрутке слайдов:

Этот код сделан с помощь html и css. Хотелось бы не создавать много ссылок под каждую фотографию, а чтобы все было на одной странице(если конечно это возможно) и было немного анимировано при прокрутке фотографии)
Буду очень благодарен за вашу помощь. Спасибо.

p.s извините за "грязный" код)

CSS

    body {
    background-size: cover;
    background-size: no-repeat;
    }
    
    .block {
    opacity: 0.3;
    border-radius: 25px;
    transition: 1s;
    }
 
    .block:hover {
    opacity: 1.0;
    }
    
    img {
    border-radius: 20px;
    border: 2px solid white;
    }

HTML5

<html>
<head>
<title>Карусель</title>
</head>
<body background="1.jpg">
 
<center>
<img src="3.jpg" width="70%">
</center>
 
<table align="center">
    <tr>
        <td class="block"><a href="слайд-шоу2.html"><img src="2.jpg" width="150"></a></td>
        <td class="block2"><img src="3.jpg" width="220"></td>
        <td class="block"><img src="4.jpg" width="150"></td>
        <td class="block"><img src="5.jpg" width="150"></td>
        <td class="block"><img src="6.jpg" width="150"></td>
    </tr>   
</table>
 
</body>
</html>

@EgorZ · 18.06.2016, 12:20 **[ТС]**

Забыл отметить. Стрелки предназначены для прокрутки следующих фотографий, а не для включения следующей фотографии(фотографий будет штук 200). Буду очень благодарен, если вы напишете все с нуля) Спасибо.

@WeMeSder · 18.06.2016, 12:22

HTML5

<center>
<img src="ggg/3.jpg" width="70%">
</center>
 
<table><tr><td>
    <span class = "left" onclick = "goLeft()">слайд-шоу2.html</span>
</td><td>
    <div id = "listImg" align="center">
</td><td valign = "center">
    <span class = "right" style = "cursor:pointer;" onclick = "goRight();">слайд-шоу2.html</span>
</td></tr></table>
</div>

++

Javascript

    var img = new Array('ggg/1.jpg', 'ggg/2.png', 'ggg/3.jpg', 'ggg/4.jpg', 'ggg/5.jpeg', 'ggg/6.jpg', 'ggg/7.jpg', 'ggg/8.jpg', 'ggg/9.jpg', 'ggg/10.jpg');
    var count = 4;
    var first = 0;
    var last = first + count;
    function scroll() {
        document.getElementById('listImg').innerHTML = '';
        for(i = first; i < last; i++) {
            ni = document.createElement('img');
            ni.src = img[i];
            ni.height = '150';
            document.getElementById('listImg').appendChild(ni);
        }
    }
    function goRight() {
        first++;
        last = first + count;
        scroll();
    }
    function goLeft() {
        first--;
        last = first + count;
        scroll();
    }
    scroll();

@EgorZ 0 / 0 / 0 Регистрация: 17.06.2016 Сообщений: 14
	18.06.2016, 12:20 [ТС]	2
	Забыл отметить. Стрелки предназначены для прокрутки следующих фотографий, а не для включения следующей фотографии(фотографий будет штук 200). Буду очень благодарен, если вы напишете все с нуля) Спасибо. 0

	18.06.2016, 12:22

Необходима помощь в вёрстке слайд-шоу

Решение