Блог

Главная - Вопросы по программированию - Слайдер изображений с использованием HTML

Слайдер изображений с использованием HTML

#javascript #html #image

#javascript #HTML #изображение

Вопрос:

Я создаю простой слайдер изображений с использованием HTML и Javascript. Я сделал это следующим образом, но мои изображения не меняются. Пожалуйста, помогите мне с исправлением.

 <script type="text/javascript">
var i=0;
var pic=new array()
pic[0].src='scks/0.jpg'
pic[1].src='scks/1.jpg'
pic[2].src='scks/2.jpg'
pic[3].src='scks/3.jpg'
pic[4].src='scks/4.jpg'

function prev()
{
    i--;
    if(i==(-1))
        i=4;
    document.images.slidre.src = eval("pic" i ".src");
}
function next()
{
    i  ;
    if(i==5)
        i=0;
    document.images.slidre.src = eval("pic" i ".src");  
}
</script>
<table style="border:thin green solid" width="400px" align="center">
    <tr>
        <td style="border:thin lime solid"><img src="scks/0.jpg" width="400px" height="300px" name="slidre"/>
        </td>
    </tr>
    <tr>
        <td style="border:thin lime solid">
        <span onclick="prev()" style="float:left">Prev</span>
        <span onclick="next()" style="float:right">Next</span></td>
    </tr>
</table>

Спасибо

Ответ №1:

Первой ошибкой будет инициализация вашего массива, во-вторых, ваши заполняющие объекты в вашем массиве, просто вставьте src непосредственно в ваши изображения.

Последнее замечание: вы не должны использовать eval для получения элемента массива. Код должен выглядеть следующим образом:

 <script type="text/javascript">
var i=0;
var pic=new Array(5);
pic[0]='scks/0.jpg';
pic[1]='scks/1.jpg';
pic[2]='scks/2.jpg';
pic[3]='scks/3.jpg';
pic[4]='scks/4.jpg';

function prev()
{
    i--;
    if(i==(-1))
        i=4;
    document.images.slidre.src = pic[i];
}
function next()
{
    i  ;
    if(i==5)
        i=0;
    document.images.slidre.src = pic[i];  
}
</script>
<table style="border:thin green solid" width="400px" align="center">
    <tr>
        <td style="border:thin lime solid"><img src="scks/0.jpg" width="400px" height="300px" id="slidre"/>
        </td>
    </tr>
    <tr>
        <td style="border:thin lime solid">
        <span onclick="prev()" style="float:left">Prev</span>
        <span onclick="next()" style="float:right">Next</span></td>
    </tr>
</table>

Комментарии:

1. Большое спасибо!! Могу ли я использовать изображения, хранящиеся в массиве, в качестве фона другого тега ‘div’ или ‘td’? По сути, я хочу защитить те изображения, которые легко сохраняются другими пользователями.

Ответ №2:

измените свою функцию

  var i=0;
var pic = new Array()
pic[0]='scks/0.jpg'
pic[1]='scks/1.jpg'
pic[2]='scks/2.jpg'
pic[3]='scks/3.jpg'
pic[4]='scks/4.jpg'
alert(pic.length)
function prev()
{

    i--;
    if(i==(-1))
        i= pic.length;
    document.images.slidre.src = pic[i];
}
function next()
{
    i  ;
    if(i==pic.length)
        i=0;
    document.images.slidre.src =  pic[i] ;  
}