js图片轮播切换特效,没有使用flash

发布时间：2018-10-22 18:47:19 所属栏目：Asp教程来源：站长网

导读：关于图片轮播，我们在以前的文章中说到过很多例子，例如：滑动门式的图片轮播切换效果、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>
提示：可修改后代码再运行!

（编辑：衡阳站长网）

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