您好,欢迎访问一九零五行业门户网

基于javascript实现样式清新图片轮播特效_javascript技巧

本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下
一、实现效果
如上图:
1、图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称
2、鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片;鼠标移开后图片继续轮换
3、鼠标移到小图标上时,大图片区域会显示对应的大图;鼠标移开则从当前图片开始继续轮换
二、代码
带小图标的js图片轮换
1 2 3 4 5

三、多张图片轮换调试笔记
js源代码:
//实现几张图片的轮换var num = 0; //显示的图片序号,刚开始时是第一张图片function changeimg1() { var arr = new array(); arr[0]=../images/hao123/7.jpg; arr[1]=../images/hao123/8.jpg; arr[2]=../images/hao123/9.jpg; var photo = document.getelementbyid(topphoto); if (num == arr.length - 1) num = 0; //如果显示的是最后一张图片,则图片序号变为第一张的序号 else num += 1; //图片序号加一 photo.src = arr[num];}setinterval(changeimg1(),5000); //每隔5000毫秒调用一次changimg1()函数
html代码:
在使用的时候最好定义一下图片的样式,把图片的长宽都统一,这样图片动态显示的效果会更好一些。
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
其它类似信息

推荐信息