当前位置：首页 → 问答吧 → 图片切换就是左边是几个小图图右边显示大图不点的时候自动循环

图片切换就是左边是几个小图图右边显示大图不点的时候自动循环

时间：2010-05-10

来源：互联网

图片切换效果就是左边是几个小图右边显示大图不点的时候自动循环点击那个显示那个的大图我在论坛搜索了很久没有找到
类似的哪个兄弟有看到过的发给我看下类似效果就可老板要求今天必须完成这个工作求大家帮忙了谢谢在线等

作者: guilinmc 发布时间: 2010-05-10

看来没人帮我了呜呜

作者: guilinmc 发布时间: 2010-05-10

http://www.rhdydd.com/
这有个类似的。

作者: ellefan 发布时间: 2010-05-10

网上搜一下图片切换就有很多了
发一个我写的图片变换，里面有教程

作者: cloudgamer 发布时间: 2010-05-10

比较简陋，看阁下是否能用上

<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> body{ font-size:12px; font-family:"宋体",Arial,Verdana; line-height:150%; margin:0; padding:0; color:#424242; } div{margin:0 auto; padding:0;} h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,img,p{ margin:0; padding:0; border:none; list-style-type:none; } .foucs{width:300px; height:350px; background:#faf1e2; position: relative; border:1px solid #ccc; margin-top:50px;} #focuscont{width:232px;height:350px;position:absolute;left:0;top:0;} #focustab{width:70px; height:350px; position:absolute;right:0; top:0;} #focustab img{ height:68px; width:48px;} #focuscont .text{width:232px;position:absolute;top:325px;left:0px;color:#000; font-weight:bold; font-size:14px; padding:0 10px; text-align:left;} .focuscont p img{width:230px; height:320px;} .filt{position:absolute;top:325px;left:0px;height:20px;width:232px;} #focustab li{width:70px; height:80px; border-bottom:1px solid #ab946a;} #focustab li a{display:block; padding:6px 0 6px 10px;} #focustab li a.act{background:url(bg.gif) no-repeat; z-index:99;}/*bg.gif为右边小图获得焦点时的背景图，可以自己替换一下*/ #focustab li a.act img{border:none;} </style> <script type="text/javascript"> function initAutoFocus(){ autoShiftFocus("focustab", "a", "focuscont", "div"); function autoShiftFocus(tabsid, tabstagname, contentid, contenttagname){ var autotpc = setInterval(autoSlideTopic, 3000); var tabs = document.getElementById(tabsid).getElementsByTagName(tabstagname); var contents = document.getElementById(contentid).getElementsByTagName(contenttagname); var cur_index_num = 0; if (tabstagname == "a") { for (var a = tabs.length - 1; a >= 0; a--) { tabs[a].onclick = function(){ return false; } } } function getContentsArr(){ var contentsarr = new Array(); for (var z=0;z<contents.length; z++) { if(contents[z].id.indexOf(contentid)>=0){ contentsarr[contentsarr.length] = contents[z]; } } return contentsarr; } var contarr=getContentsArr(); function autoSlideTopic(){ for (var a = tabs.length - 1; a >= 0; a--) { tabs[a].className = ""; } for (var b = contarr.length - 1; b >= 0; b--) { contarr[b].style.display = "none"; } contarr[cur_index_num].style.display = "block"; tabs[cur_index_num].className = "act"; var total_num = tabs.length; cur_index_num++; if (cur_index_num >= total_num) { cur_index_num = 0; } } for (var c = tabs.length - 1; c >= 0; c--) { tabs[c].onmouseover = function(){ clearInterval(autotpc); changeTabs(this.name); } tabs[c].onmouseout = function(){ autotpc = setInterval(autoSlideTopic, 3000); } } function changeTabs(num){ var thenum = num - 1; for (var n = tabs.length - 1; n >= 0; n--) { tabs[n].className = ""; } tabs[thenum].className = "act"; for (var m = contarr.length - 1; m >= 0; m--) { contarr[m].style.display = "none"; } contarr[thenum].style.display = "block"; cur_index_num = thenum; } } } </script> </head> <body> <div class="foucs"> <div class="f_l hbtpc"> <div id="focuscont"> <p class="filt"></p> <div class="focuscont" id="focuscont1"> <p><a href=""><img src="http://img1.gtimg.com/ent/pics/hv1/71/106/516/33580001.jpg" /></a></p> <div class="text"> <p>第44届台湾电视金钟奖10月</p> </div> </div> <div class="focuscont" id="focuscont2" style="display:none"> <p><a href=""><img src="http://mat1.qq.com/lady/images/index/2010/05/10/QQ2.jpg" /></a></p> <div class="text"> <p>第22届东京国际电影节</p> </div> </div> <div class="focuscont" id="focuscont3" style="display:none"> <p><a href=""><img src="http://img1.gtimg.com/blog/pics/hv1/58/39/516/33562903.jpg" /></a></p> <div class="text"> <p>美国歌手碧昂斯即将</p> </div> </div> <div class="focuscont" id="focuscont4" style="display:none"> <p><a href=""><img src="http://img1.gtimg.com/gamezone/pics/hv1/28/114/516/33581998.jpg" /></a></p> <div class="text"> <p>美国歌手碧昂444</p> </div> </div> </div> <ul id="focustab" class="focustab"> <li><a class="act" href="#" name="1" ><img src="http://img1.gtimg.com/ent/pics/hv1/71/106/516/33580001.jpg" /></a></li> <li><a href="#" name="2"><img src="http://mat1.qq.com/lady/images/index/2010/05/10/QQ2.jpg" /></a></li> <li><a href="#" name="3"><img src="http://img1.gtimg.com/blog/pics/hv1/58/39/516/33562903.jpg" /></a></li> <li style="border-bottom:none;"><a href="#" name="4"><img src="http://img1.gtimg.com/gamezone/pics/hv1/28/114/516/33581998.jpg" /></a></li> </ul> </div> </div> <script>initAutoFocus();</script> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 laowanga 于 2010-5-10 16:36 编辑 ]

作者: laowanga 发布时间: 2010-05-10