Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > js实现幻灯片播放图片示例代码_javascript技巧

js实现幻灯片播放图片示例代码_javascript技巧

WBOY
Freigeben： 2016-05-16 17:17:01
Original
1344 Leute haben es durchsucht

1，在页面添加下面的元素。展示出置出图片文件列表文件。

复制代码 代码如下:



2，播放文件列表的方法。主要是遍历文件列表并把图片展示在相应的图片容器就可以显示出幻灯片的效果。

可以用延时的方法调用遍历方法：window.setInterval("PlayPics()", speed);
复制代码 代码如下:

/**
* 播放图片的处理方法
* */
function PlayPics()
{
var sel = document.getElementById("img_date");
if(sel.length==0)//没有图片时直接返回
{
return;
}
else
{
if(sel.selectedIndex>0)//被选中的下标大于0时就设置上一图片项被选中。
{
sel.options[sel.selectedIndex-1].selected=true;
}
else{//如果是被选中项的下标是0，就设置最后一张图片为被选中。
sel.options[sel.length-1].selected=true;
}
ChangePic(sel.options[sel.selectedIndex].value);//获取选中的图片，并把图片的url设置到相应的图片容器中。

//这个方法可以根据自己的需要进行修改。
}
};
Verwandte Etiketten：
幻灯片
Quelle：php.cn
Vorheriger Artikel：JavaScript中this的使用详解_基础知识 Nächster Artikel：jqGrid日期格式的判断示例代码(开始日期与结束日期)_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Alle 3 Elemente umschließen ein übergeordnetes Element Ich möchte nur alle 3 Divs mit einer Klasse für die Audiosuche ein Div mit der Slideshow-K...
Aus 2024-04-02 13:11:31
0
2
262
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage