js实现简单的图片轮播

js代码如下

 1 <script type="text/javascript">
 2 var n=1;
 3 var map=new Array();
 4 map[0]=new Image();
 5 map[1]=new Image();
 6 map[2]=new Image();
 7 map[3]=new Image();
 8 map[4]=new Image();
 9 map[5]=new Image();
10 map[0].src="images/0.jpg";
11 map[1].src="images/1.jpg";
12 map[2].src="images/2.jpg";
13 map[3].src="images/3.jpg";
14 map[4].src="images/4.jpg";
15 map[5].src="images/5.jpg";
16 function disp()
17 {
18 document.getElementById("img1").src=map[n].src;
19 n=n+1;
20 if (n>5)
21 n=0;
22 window.setTimeout("disp();",2000);
23 }
24 window.setTimeout("disp();",2000);
25 </script>

自己替换掉图片地址和名称,以及切换时间。2000表示2秒 。

然后在<body>和</body>中间加上下面一段代码。

1 <div id="content1">
2 <img id="img1" src="images/0.jpg" width="100%" height="300px">
3 </div>
时间: 2024-10-13 18:37:25

js实现简单的图片轮播的相关文章

js最简单焦点图片轮播代码

将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.js"></script> 注意:代码中图片路径修改为你自己的图片地址 var widths=725; //焦点图片宽 var w=0; var widthss=widths+w; var heights=295; //焦点图片高 var heightss=heightss+w; v

简单的图片轮播效果

用js代码来实现一个简单的图片轮播效果 鼠标移入图片后显示左右箭头按钮,点击就可以实现图片的切换. 以下分别是html代码和js代码,欢迎批评和讨论! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> *{padding:0px; margin:0px;

js/jquery中实现图片轮播

一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片轮播 jq(左右切换)</title> <style type="text/css">   body,div,ul,li,a,

js原生代码之图片轮播

话不多说说,直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="./public/js/jquery-1.11.2-min.js">&l

原生js和jquery实现图片轮播

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

cssSlidy.js 响应式手机图片轮播

cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container">      <figure id="slidy">          <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条&

简单的图片轮播jquery

转自:http://www.oschina.net/code/snippet_590876_14396 html代码 <!--getmy轮播--> <div class='contentone'> <div class='checkone'> <a><img src='http://images.mangocity.com/upload/6998122/201172320545.jpg'/></a> <a class='site

一个简单的图片轮播功能(图片自动播放,点击控件可直接跳转对对应图片)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-