zoukankan      html  css  js  c++  java
  • Javascript+CSS实现漂亮带缓冲效果的图片展示代码

    代码简介:

    名副其实的JS图片幻灯切换特效,风格优美,带动画,图片路径可以轻易修改成从数据库读取,实用性增强,CSS代码可根据你的需要继续优化,确实比较不错。

    代码内容:

    View Code
    <!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>Javascript+CSS实现漂亮带缓冲效果的图片展示代码 - www.webdm.cn</title>
    <style type="text/css" media="all">
    .d1
    {width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
    .loading
    {width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-

    size
    :12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-

    weight
    :bold;}
    .d2
    {width:100%;height:209px;overflow:hidden;}
    .num_list
    {position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-

    size
    :12px;padding:4px 0px;height:20px;overflow:hidden;}
    .num_list span
    {display:inline-block;height:16px;padding-left:6px;}
    img
    {border:0px;}
    ul
    {display:none;}
    .button
    {position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial,

    Helvetica, sans-serif
    ;}
    .b1,.b2
    {background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-

    decoration
    :none;cursor:pointer;}
    .b2
    {color:#FFCC33;background-color:#FF6633;}
    </style>
    <script language="javascript" type="text/javascript">
    /*
    by: /
    */
    //主函数
    var s=function(){
    var interv=2000; //切换时间
    var interv2=10; //切换速速
    var opac1=80; //文字背景的透明度
    var source="fade_focus" //图片容器的id名称
    //
    获取对象
    function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return

    obj.getElementsByTagName(tag)}}
    function getid(id){return document.getElementById(id)};
    var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var

    li
    =getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var

    span
    =document.createElement("span");var button=document.createElement("div");button.className="button";for(var

    i
    =0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout

    (timer);clearTimeout(timer2);clearTimeout(timer3);j
    =parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon

    ();};a.className
    ="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc

    (j)};button.appendChild(a);}
    //控制图层透明度
    function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
    //控制焦点按钮
    function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes

    [n].className
    ="b2";}
    title.className
    ="num_list";title.appendChild(span);alpha

    (title,opac1);id.className
    ="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
    //渐显
    var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha

    (div,opac);
    if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else

    {timer2
    =setTimeout(fadeout,interv);};}
    //渐隐
    var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt

    ();scton
    =1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
    //滚动文字
    var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else

    if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
    fadeon();
    }
    //初始化
    window.onload=s;
    </script>

    </head>

    <body>
    <div id="fade_focus">
    <div class="loading">Loading...<br /><img src="http://www.webdm.cn/images/20091005/logings.gif" width="100"

    height
    ="100" /></div>
    <ul>
    <li><img src="http://www.webdm.cn/images/wall1.jpg" width="443" height="209" alt="展示图片1" /></li>
    <li><img src="http://www.webdm.cn/images/wall2.jpg" width="443" height="209" alt="展示图片2" /></li>
    <li><img src="http://www.webdm.cn/images/wall3.jpg" width="443" height="209" alt="展示图片3" /></li>
    <li><img src="http://www.webdm.cn/images/wall4.jpg" width="443" height="209" alt="展示图片4" /></li>
    </ul>
    </div>
    </body>
    </html>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>

    代码来自http://www.webdm.cn/webcode/d2967238-85a1-4c4f-abcf-04982370a23b.html

  • 相关阅读:
    VS 2008潜在强大的功能:提取EXE文件中的ICO等资源
    园友们注意:淘宝网上QQ会员 4钻 3元 等都为骗子行为
    Comet Async Process Request Handler
    WCF(Sender) to MSMQ to WCF(Receiver)
    ASP.NET Web Form GridView DetailsView Query Edit
    WCF NetTcp AsyncQueue Service
    Xml CDATA 序列化
    Sync Invoke Remoting Async Invoke
    .Net 4.0 Remoting ConcurrentQueue
    Socket Async Receive Data to LinkedList Buffer (telnet proxy server)
  • 原文地址:https://www.cnblogs.com/webdm/p/2289838.html
Copyright © 2011-2022 走看看