注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

浮游生物的博客

以扯蛋的态度面对操蛋的人生

 
 
 

日志

 
 

带外框的图片JS自动滚动效果  

2011-06-23 15:08:08|  分类: js+jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
带外框的图片JS自动滚动效果 - ljty11 - 浮游生物的博客
 
 

 <!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">


<link href="ALi_Index.css" rel="stylesheet" type="text/css">

 

<script language="javascript" src="public.js"></script>

 

        
            <div >
             <div id="focus_img">
<div id="au">
<div class="undis" id="b1"><a target="_blank" href="http://www.007.mx/jtxm/reg110620-youxia.html?sid=youxia-

jdt&amp;game=jtxm"><img src="20110530150012478.jpg"></a></div>
<div class="dis" id="b2"><a target="_blank" href="http://shop.ali213.com/"><img src="pal5.jpg"></a></div>
<div class="undis" id="b3"><a target="_blank" href="http://www.ali213.net/news/html/2011/18080.html"><img

src="2011062016574165.jpg"></a></div>
<div class="undis" id="b4"><a target="_blank" href="http://www.ali213.net/news/html/2011/18027.html"><img

src="20110618182133311.jpg"></a></div>
<div class="undis" id="b5"><a target="_blank" href="http://www.ali213.net/news/html/2011/17808.html"><img

src="WEYX6_0.jpg"></a></div>
</div>
<div id="slt">
<div onmouseout="setAuto();" onmouseover="play('1');clearAuto();" class="uns" id="s1"><a target="_blank"

href="http://www.007.mx/jtxm/reg110620-youxia.html?sid=youxia-jdt&amp;game=jtxm"><img

src="20110530145751316.jpg"></a></div>
<div onmouseout="setAuto();" onmouseover="play('2');clearAuto();" class="s" id="s2"><a target="_blank"

href="http://shop.ali213.com/"><img src="pal51.jpg"></a></div>
<div onmouseout="setAuto();" onmouseover="play('3');clearAuto();" class="uns" id="s3"><a target="_blank"

href="http://www.ali213.net/news/html/2011/18080.html"><img src="20110620165741982.jpg"></a></div>
<div onmouseout="setAuto();" onmouseover="play('4');clearAuto();" class="uns" id="s4"><a target="_blank"

href="http://www.ali213.net/news/html/2011/18027.html"><img src="20110618181819470.jpg"></a></div>
<div onmouseout="setAuto();" onmouseover="play('5');clearAuto();" class="uns" id="s5"><a target="_blank"

href="http://www.ali213.net/news/html/2011/17808.html"><img src="weyx6sm.jpg"></a></div>
</div>
</div>

            </div>

//////////////////////////////////////////////////////////////////////////////////////////////////////////

ALi_Index.css

 

body{margin:0;font-size:12px;font-family:"宋体",Arial,Helvetica,sans-serif;background-color:#fff;color:#555;text-align:center;}
img{border:0px;}
form,input,select,div,ul,li,p,h,h1,h2{margin:0;padding:0;}
li{list-style-type:none;}
td{font-size:12px;}


#focus_img{BACKGROUND:url(ali_bg.gif) no-repeat -12px -800px;WIDTH:380px;HEIGHT:251px;}
#au{width:372px;height:194px;padding:4px 4px 0px 4px;}
#au .dis{HEIGHT:194px;width:372px;}
#au .dis IMG{HEIGHT:194px;width:372px;}
#au .undis{DISPLAY:none;}
#slt{width:375px;height:50px;margin:1px 1px 0px 4px;}
#slt .s{width:75px;height:50px;float:left;}
#slt .s IMG{width:71px;height:42px;padding-left:2px;padding-bottom:2px;padding-right:2px;padding-top:6px;display:inline;BACKGROUND: url(ali_bg1.gif) no-repeat}
#slt .uns{width:72px;height:42px;float:left;margin-right:3px;margin-left:0px;display:inline;}
#slt .uns IMG{width:72px;height:42px;padding-top:6px;display:inline;filter:Alpha(opacity=75);opacity:.75;}
//////////////////////////////////////////////////////////////////////////////////////////////////

public.js

 

try{
 var marqueesHeight1 = 26;
 var stopscroll1= false;

 var scrollElem1 = document.getElementById("icefable1");
 with(scrollElem1){
  //style.width = 140;
  style.height = marqueesHeight1;
  style.overflow = 'hidden';
  noWrap = true;
 }

 scrollElem1.onmouseover = new Function('stopscroll1 = true');
 scrollElem1.onmouseout  = new Function('stopscroll1 = false');

 var preTop1 = 0;
 var currentTop1 = 0;
 var stoptime1 = 0;

 var leftElem1 = document.getElementById("indexchannel1");
 scrollElem1.appendChild(leftElem1.cloneNode(true));

 init_srolltext1();
}catch(e){}

function init_srolltext1(){
 scrollElem1.scrollTop = 0;
 setInterval('scrollUp1()', 20);
}

function scrollUp1(){
 if(stopscroll1) return;
 currentTop1 += 1;
 if(currentTop1 == 27) {
  stoptime1 += 1;
  currentTop1 -= 1;
  if(stoptime1 == 180) { //此处数字越小越快
   currentTop1 = 0;
   stoptime1 = 0;
  }
 }else{
  preTop1 = scrollElem1.scrollTop;
  scrollElem1.scrollTop += 1;
  if(preTop1 == scrollElem1.scrollTop){
   scrollElem1.scrollTop = 0;
   scrollElem1.scrollTop += 1;
  }
 }
}
//-->
//专题导航切换
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}

//专题导航切换
function setTab1(name,cursel,n){
 for(i=1;i<=n;i++){
  var topname=document.getElementById("topname"+i);
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
  topname.style.display=i==cursel?"block":"none";
 }
}
/*
Flash控制
*/  
function play(k)//播放的函数
{
 for(l=1;l<=5;l++){
  if(l==k){
   document.getElementById("b"+k).className="dis";
   document.getElementById("s"+k).className="s";
  }else{
   document.getElementById("b"+l).className="undis";
   document.getElementById("s"+l).className="uns";
  }
 } 
}
var n=1;
setAuto();
function clearAuto() {clearInterval(autoStart);};
function setAuto(){autoStart=setInterval("auto(n)", 5000)}
function auto()
{
 n++;
 if(n>5)n=1;
 play(n);
}

 

里面还有些多余的代码,最近忙,有空再剔出来,附上背景图

带外框的图片JS自动滚动效果 - ljty11 - 浮游生物的博客
  评论这张
 
阅读(940)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018