简单的html轮播图片怎么做的,简单的HTML+js图片轮播?

Love The Way You Lie 2022-10-06 07:49 240阅读 0赞

这个我写过，不知道你是否有什么特殊的要求。

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

html

head

meta http-equiv=Content-Type content=text/html; charset=utf-8

titleinsert /title

script language=javascript

var arr=new Array(img1.jpeg,img2.jpeg,img3.jpeg,img4.jpeg,img5.jpeg,img6.jpeg,img7.jpeg,img8.jpeg,img9.jpeg,img10.jpeg);

var arr1=new Array(img9.jpeg,img1.jpeg,img2.jpeg,img3.jpeg,img4.jpeg,img5.jpeg,img6.jpeg,img7.jpeg,img8.jpeg);

var length=9;

var len=arr.length;

var newarr=new Array();

function roll()\{

//var len=arr.length;

if(newarr.length==0)\{

\}else\{

arr=newarr;

\}

for(var i=0;ilength;i++)\{

var div=document.getElementById(div+(i+1));

if(i==0)\{

div.innerHTML=img|i==length-2)\{

div.innerHTML=img|i==length-3)\{

div.innerHTML=img|i==length-2)\{

div.innerHTML=img|i==length-3)\{

div.innerHTML=img style='width:60px;height:80px'src='+arr\[i-1\]+' οnclick=''/;

\}else if(i!=length-1)\{

div.innerHTML=img style='width:80px;height:80px'src='+arr\[i-1\]+' οnclick=''/;

\}else if(i==length-1)\{

div.innerHTML=img style='width:20px;height:80px'src='+arr\[i-1\]+' οnclick=''/;

\}

\}

var temp=arr\[len-1\];

//alert(temp);

arr.pop();

arr.reverse();

arr\[len-1\]=temp;

newarr=arr.reverse();

/\*for(var i=0;inewarr.length;i++)\{

alert(newarr\[i\]);

\}\*/

\}

/script

body

table

tr

tddiv id=div1img style=width:20px;height:80pxsrc=img1.jpeg οnclick=//divtd

tddiv id=div2img style=width:40px;height:80pxsrc=img2.jpeg οnclick=//divtd

tddiv id=div3img style=width:60px;height:80pxsrc=img3.jpeg οnclick=//divtd

tddiv id=div4img style=width:80px;height:80pxsrc=img4.jpeg οnclick=//divtd

tddiv id=div5img style=width:80px;height:80pxsrc=img5.jpeg οnclick=//divtd

tddiv id=div6img style=width:80px;height:80pxsrc=img6.jpeg οnclick=//divtd

tddiv id=div7img style=width:60px;height:80pxsrc=img7.jpeg οnclick=//divtd

tddiv id=div8img style=width:40px;height:80pxsrc=img8.jpeg οnclick=//divtd

tddiv id=div9img style=width:20px;height:80pxsrc=img9.jpeg οnclick=//divtd

/tr

tr

td colspan=4 align=leftinput type=buttonvalue=next οnclick=roll()//td

td colspan=5align=rightinput type=buttonvalue=previous οnclick=rollBack()//td

tr

/table

/body

/html

这个需要有相应的图片。

取消

评论

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 html简单图片轮播居中,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][] ![s3.jpg][] 在这个html的

蔚落/ 2022年10月06日 10:52/ 0 赞/ 447 阅读

相关 html 图片轮播实例,简单实现轮播图效果的实例

一、要点： 1.页面加载时，图片重合，叠在一起\[绝对定位\]; 2.第一张显示，其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去，显示

- 日理万妓/ 2022年10月06日 07:56/ 0 赞/ 295 阅读

相关简单的html轮播图片怎么做的,简单的HTML+js图片轮播?

这个我写过，不知道你是否有什么特殊的要求。 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html

Love The Way You Lie/ 2022年10月06日 07:49/ 0 赞/ 241 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 359 阅读

相关 html网页简单实现图片轮播效果,CSS3简单实现图片切换轮播

HTML代码： A B C CSS代码：.pic-switch\{ width: 500px; height: 300px; margin: 0px auto;

曾经终败给现在/ 2022年10月06日 06:59/ 0 赞/ 310 阅读

相关 html轮播图用什么语言,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][s1.jpg] ![s3.jpg

不念不忘少年蓝@/ 2022年10月05日 12:46/ 0 赞/ 269 阅读

相关 html简单实现自动轮播代码怎么写,HTML图片轮播代码怎么写？

贴一个超级简单的JS代码，不需要插件图片轮播代码 body\{max-width: 640px;margin: 0 auto;\} \lunbo ul li\{widt

客官°小女子只卖身不卖艺/ 2022年10月05日 10:46/ 0 赞/ 286 阅读

相关 html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 <!DOCTYPE HTML> <html> <head>

港控/mmm°/ 2022年08月03日 14:36/ 0 赞/ 417 阅读

相关使用jQuery做简单的图片轮播效果

使用jQuery做简单的图片轮播效果一、本特效主要用到的前端知识点 CSS中绝对定位（absolute） CSS实现垂直居中 jQuery中简单

女爷i/ 2022年06月07日 23:52/ 0 赞/ 316 阅读

相关轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播

空话就不多说了，开始。。。简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下 ![轮播和

川长思鸟来/ 2022年03月31日 02:12/ 0 赞/ 478 阅读