现在的位置: 首页 > 综合 > 正文

(转)迅雷的图片轮换效果

2012年06月08日 ⁄ 综合 ⁄ 共 3766字 ⁄ 字号 评论关闭

HTML页:

<!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%22%3E%3Chead>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>imgnews</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<link href="style/imgnews.css" rel="stylesheet" type="text/css">
<script src="style/imgnews.js" type="text/javascript" language="javascript"></script>
</head><body>
<div class="inner">
<div class="focus clearfix">
 <div class="big_img" id="div_big_news_img">
  <a href="http://www.biao168.com%22%3e%3cimg/ src="images/2497.jpg"></a>
  <a href="http://www.biao168.com%22%3e%3cimg/ src="images/2419.jpg"></a>
  <a href="http://www.biao168.com%22%3e%3cimg/ src="images/2484.jpg"></a>
  <a href="http://www.biao168.com%22%3e%3cimg/ src="images/2392.jpg"></a>
  <a href="http://www.biao168.com%22%3e%3cimg/ src="images/1812.jpg"></a>
 </div>
 <ul id="ul_big_news_item" class="home">      
         <li onmouseover="B.turn(0)" onmouseout="B.auto()" class="up">
   <a href="http://www.biao168.com%22%3e%3cimg/ src="images/2497.jpg"></a>
   <dl><dt><a href="http://www.biao168.com/">《我的兄弟叫顺溜》央视革命战争剧</a></dt><dd>王宝强张国强主演,收视率超《亮剑》</dd></dl>
  </li>
  <li onmouseover="B.turn(1)" onmouseout="B.auto()" class="">
   <a href=http://www.biao168.com"><img src="images/2419.jpg"></a>
   <dl><dt><a href="http://www.biao168.com/">《仙剑奇侠传三》荧屏暑期档必看剧</a></dt><dd>人气游戏改编,迅雷看看高清全集首播</dd></dl>
  </li>
                <li onmouseover="B.turn(2)" onmouseout="B.auto()" class="">
   <a href="http://www.biao168.com%22%3e%3cimg/ src="images/2484.jpg"></a>
   <dl><dt><a href="http://www.biao168.com/">《人间正道是沧桑》孙红雷革命史诗</a></dt><dd>央视高收视剧,献礼新中国成立60周年</dd></dl>
  </li>
                <li onmouseover="B.turn(3)" onmouseout="B.auto()" class="">
   <a href="http://www.biao168.com%22%3e%3cimg/ src="images/2392.jpg"></a>
   <dl><dt><a onclick="L('B0041《微笑在我心》传授你七大泡妞绝招;')" href="http://www.biao168.com/">《微笑在我心》传授你七大泡妞绝招</a></dt><dd>张嘉倪、明道打造青春励志爱情偶像剧</dd></dl>
  </li>
                <li onmouseover="B.turn(4)" onmouseout="B.auto()" class="">
   <a href="http://www.biao168.com%22%3e%3cimg/ src="images/1812.jpg"></a>
   <dl><dt><a href="http://www.biao168.com%22%3evancl/挑战极限购物体验全场免运费</a></dt><dd>双珠地双扣短袖polo衫,任选4件199元</dd></dl>
  </li>
 </ul>
</div><!-- //focus clearfix -->
</div><!-- //inner -->
</body></html>

 

JS文件;

<!--
var B=BigNews={current:0,next:0,scrollInterval:0,autoScroller:0};
BigNews.turn=function(index){
 clearInterval(BigNews.autoScroller);
 BigNews.scroll(index);
}
BigNews.scroll=function(index){
 if(!$('ul_big_news_item')){
  clearInterval(BigNews.autoScroller);
  return;
 }
 var count=0;
 var step=227;
 var duration=16;
 var b=BigNews;
 b.next=index;
 if(index!=b.current&&count>duration/8){
  return;
 }
 clearInterval(b.scrollInterval);
 var items=$('ul_big_news_item').getElementsByTagName('li');
 for(var i=0;i<5;i++){
  items[i].className='';
 }
 items[index].className='up';
 var span=index-b.current;
 var begin_value=$('div_big_news_img').scrollTop;
 var chang_in_value=span*step+(b.current*step-begin_value);
 b.scrollInterval=setInterval(function(){doit(begin_value,chang_in_value)},10);
 function $(s){return document.getElementById(s);}
 function doit(b,c){
  $('div_big_news_img').scrollTop=cpu(count,b,c,duration);
  count++;
  if(count==duration){
   clearInterval(BigNews.scrollInterval);
   scrollInterval=0;
   count=0;
   $('div_big_news_img').scrollTop=b+c;
   BigNews.current=index;
  }
 }
 function cpu(t,b,c,d) {return c*((t=t/d-1)*t*t+1)+b;};
}
BigNews.auto=function(){
 clearInterval(BigNews.autoScroller);
 BigNews.autoScroller=setInterval(function(){
  BigNews.scroll(BigNews.current==4?0:BigNews.current+1);
 },5000);
}
if(window.addEventListener){
 window.addEventListener('onload', BigNews.auto, false);
}else if(window.attachEvent){
 window.attachEvent('onload',BigNews.auto);}
else{
 //
};
-->

抱歉!评论已关闭.