js图片轮播切换殊效,没有行使flash

发布时间：2018-08-26 02:38:48 所属栏目：编程来源：站长网

导读：关于图片轮播，我们在早年的文章中说到过许多例子，譬喻：滑动门式的图片轮播切换结果、JavaScript+Css打造的图片轮播幻灯片等，猛火首页的消息图片轮播也是这样的结果，与早年差异，原本我们常常用到flash做幻灯片消息结果，此刻用flash的越来越少了，尤

　　关于图片轮播，我们在早年的文章中说到过许多例子，譬喻：滑动门式的图片轮播切换结果、JavaScript+Css打造的图片轮播幻灯片等，猛火首页的消息图片轮播也是这样的结果，与早年差异，原本我们常常用到flash做幻灯片消息结果，此刻用flash的越来越少了，尤其HTML5的到来，我们要学着放弃flash。

　　下面是一款样式很是简朴的轮播图片结果，已经实现了手动轮播的成果，没有加以CSS修饰，由于看上去不太雅观，但这是进修的好对象，新手可以多看看。

　　请看下面的实例：

<!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-Type" content="text/html; charset=gb2312" /> <title>Js图片切换</title> </head> <style> *{ margin:0px; padding:0px;} #jpg1{width:600px; height:400px; } #jpg1 img{width:600px; height:400px;} #jpg2 ul{list-style:none;} #jpg2 ul li { float:left; width:100px; height:100px;} #jpg2 img{ width:90px; height:80px;} </style> <script> function change(i){ document.getElementById("jpg1").innerHTML="<img src='/uploads/common/images/liehuo_net_600x400_"+i+".jpg' />"; } var i=1; function go(){ i++; if(i==5){i=1;} document.getElementById("jpg1").innerHTML="<img src='/uploads/common/images/liehuo_net_600x400_"+i+".jpg' />"; } function back(){ i--; if(i==0){i=4} document.getElementById("jpg1").innerHTML="<img src='/uploads/common/images/liehuo_net_600x400_"+i+".jpg' />"; } </script> <body> <div id="jpg1"><img src="/uploads/common/images/liehuo_net_600x400_1.jpg" /></div> <div id="jpg2"> <ul> <li onclick="go()">提高</li> <li><img src="/uploads/common/images/sliehuo_net_600x400_1.jpg" onclick="change('1')" id="li1"/></li> <li><img src="/uploads/common/images/sliehuo_net_600x400_2.jpg" onclick="change('2')" id="li2"/></li> <li><img src="/uploads/common/images/sliehuo_net_600x400_3.jpg" onclick="change('3')" id="li3"/></li> <li><img src="/uploads/common/images/sliehuo_net_600x400_4.jpg" onclick="change('4')" id="li4"/></li> <li onclick="back()">退却</li> </ul> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys