0顶

分享一个图片切换的效果

稿源：互联网 2022-04-09 15:16:20 点击： 2314 撤稿纠错

一个很酷的图片切换效果，右边显示小图，左边显示大图。

以下讨论的是和特效相关的分享一个图片切换的效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" /> <style type="text/css" media="all"> body { margin:0px; padding:0px; font-size:12px; font-family:"宋体", Arial, Helvetica, sans-serif; background-color:#000000; } img { border:0px; } a { cursor:pointer; } .content{ width:590px; height:auto; overflow:hidden; margin:0px auto; margin-top:60px; padding:10px 0px 0px 0px; } .left{ width:417px; height:auto; overflow:hidden; float:left; padding:36px 0px 0px 20px; position:relative; } .pic{ width:414px; height:auto; overflow:hidden; border:#C6B6A0 2px solid; } .right{ height:auto; overflow:hidden; float:left; padding:0px 0px 0px 0px; text-align:center; color:#C6C5C1; font-weight:bold; font-size:16px; } .right ul { margin:0px; padding:0px 11px 0px 21px; list-style:none; height:auto; overflow:hidden; } .right li { padding:0px 0px 2px 0px; height:80px; overflow:hidden; } .right li img { border:#ACA79E 1px solid; cursor:pointer; width:103px; height:77px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity:0.5; } .right li:hover img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1; } .lighton { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important; -moz-opacity:1 !important; } .lightoff { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity:0.3; } .top { padding-left:21px; width:126px; height:21px; overflow:hidden; cursor:pointer; } .slide_content { width:auto; height:246px; overflow:hidden; } .bottom { padding-left:21px; width:126px; height:19px; overflow:hidden; cursor:pointer; } .txt{ width:414px; padding:2px 0px 0px 0px; height:20px; overflow:hidden; color:#FFFBD0; text-align:center; position:absolute; right:2px; bottom:1px; line-height:19px; background-color:#333333; opacity:0.50; filter:alpha(opacity=50); } .txt span{ display:block; width:100%; } </style> <script language="javascript" type="text/javascript"> //slide var scontainer,scHeight,listH,sint,sinum=0,sdir=1,cnum,cstop,step,isinit,txts,txtint; window.onload=function(){ scontainer=getid("inner_slide"); scHeight=scontainer.offsetHeight; listH=scontainer.getElementsByTagName("ul")[0].offsetHeight; for(var i=0;i<scontainer.getElementsByTagName("li").length;i++){ scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].index=i+1; scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].onclick=function(){showp(this.index)} } } function inner_slide(n){ if(n==1){sdir=(-1)}else{sdir=1} if(scontainer.scrollTop<=0&&n==1){return false;}else if(scontainer.scrollTop>=(listH-scHeight)&&n==2){return false;} sinum=0; step=6; cstop=scontainer.scrollTop; sint=setInterval(inner_mov,2); return true; } function inner_mov(){ scontainer.scrollTop+=(step*sdir); if(step>2){ step-=1} sinum+=step; if(sinum>=82){clearInterval(sint);scontainer.scrollTop=cstop+82*sdir;showp(scontainer.scrollTop/82+1)} if(scontainer.scrollTop<=0){getid("sbutton1").style.visibility="hidden";}else{getid("sbutton1").style.visibility="visible";} if(scontainer.scrollTop>=(listH-scHeight)){getid("sbutton2").style.display="none";}else{getid("sbutton2").style.display="block";} } function txtm(){ if(txts>0){txts--;}else{clearInterval(txtint)} getid("txt").style.marginTop=txts+"px"; } function showp(n){ getid("photo").src=scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].getAttribute("src"); getid("txt").innerHTML=scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].getAttribute("alt"); txts=20; clearInterval(txtint); txtint=setInterval("txtm()",10); for(var i=0;i<scontainer.getElementsByTagName("li").length;i++){scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].className="lightoff";} scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].className="lighton"; } function getid(id){return document.getElementById(id);} </script> <title>客服中心</title> </head> <body> <div class="content"> <div class="left"><div class="pic"><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" id="photo"/></div><div class="txt">墙上是大家的大头贴拼图</div></div> <div class="right"> <div class="top" onclick="inner_slide(1)" id="sbutton1">Δ</div> <div class="slide_content" id="inner_slide"> <ul> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" alt="墙上是大家的大头贴拼图" class="lighton"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/2.jpg" alt="服务器中聊得火热的留言板背后"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/3.jpg" alt="忙碌的一天开始了"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/4.jpg" alt="墙上是大家的大头贴拼图"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" alt="服务器中聊得火热的留言板背后"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/2.jpg" alt="忙碌的一天开始了"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/3.jpg" alt="墙上是大家的大头贴拼图"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/4.jpg" alt="服务器中聊得火热的留言板背后"/></li> </ul> </div> <div class="bottom" onclick="inner_slide(2)" id="sbutton2">&#8711;</div> </div> </div> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于分享一个图片切换的效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20081120374.shtml方便下次再访问哦。

·上一篇： js仿LightBox内容显示效果
·下一篇： 仿flash导航菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

分享一个图片切换的效果

文章分类LIST >>返回首页

最新游戏

最新新闻