js 图片滑动切换效果-百分百源码网

js 图片滑动切换效果

发布时间：01/15 来源：浏览：关键词：

文章提供的这款图片滑动切换效果是一款迅雷音乐频道焦点图代码，他可以根据用户移到文字标题，然后图片就自动切换哦。

<!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" />
<title>迅雷音乐频道</title>
<link href="css教程/demolayout.css" rel="stylesheet" type="text/css" media="all" />
<link rev=stylesheet media=all href="css/news.css" type=text/css rel=stylesheet>
</head>
<body>

<h1 id="rsseeheader">迅雷音乐频道焦点图</h1>
<div align="center">
<script language=网页特效>
   var currenthotscreen = 0 ;
   function sethotquerylist(screen){
    var vmotion = "forward" ;
    var maxscreen = 7 ;
    if (screen >= maxscreen) {
     screen = 0 ;
     vmotion = "reverse" ;
    }
    cleanallstyle();
    document.getelementbyid("focus_"+screen).classname = "up" ;

     if(null!=hot_query_td.filters){
    hot_query_td.filters[0].apply();
    hot_query_td.filters[0].motion = vmotion;
     }
     for (i=0;i<maxscreen;i++) {
    document.getelementbyid("switch_"+i).style.display = "none" ;
     }
     document.getelementbyid("switch_"+screen).style.display = "block" ;
     if(null!=hot_query_td.filters){
    hot_query_td.filters[0].play();
     }
    currenthotscreen = screen ;
   }
   function refreshhotquery(){
    refreshhotquerytimer = null;
    sethotquerylist(currenthotscreen+1);
    refreshhotquerytimer = settimeout('refreshhotquery();', 5000);
   }
</script>

<div class=newsmain>
<div class=topnewsbox>
<div class=topnews>
<div class=topnewspic>
<table>
<tbody>
<tr>
    <td id=hotsearchlist
    style="filter: progid:dximagetransform.microsoft.gradientwipe(gradientsize=0.25,wipestyle=0,motion=forward)">
      <div id=switch_0><a onclick=setclick();
      href="http://www.111cn.net/"
      blockid="931" target="_blank"><img alt="信宣传新专辑与徐静蕾合作很紧张"
      src="images/01.jpg"></a></div>
      <div id=switch_1><a onclick=setclick();
      href="http://www.111cn.net/"
      blockid="931" target="_blank"><img alt="蒲巴甲北京录新歌首张ep杀青在即"
      src="images/02.jpg"></a></div>
      <div id=switch_2><a onclick=setclick();
      href="http://www.111cn.net/"
      blockid="931" target="_blank"><img alt="尚雯婕为演唱会携天价古董拍海报"
      src="images/03.jpg"></a></div>
      <div id=switch_3><a onclick=setclick();
      href="http://www.111cn.net/"
      blockid="931" target="_blank"><img alt="曹格穿透明装与辣妹热舞　爸妈齐助阵"
      src="images/04.jpg"></a></div>
      <div id=switch_4><a onclick=setclick();
      href="http://www.111cn.net/"
      blockid="931" target="_blank"><img alt="周杰伦女友江语晨拍mv 邀小朋友助阵"
      src="images/05.jpg"></a></div>
      <div id=switch_5><a onclick=setclick();
      href="http://www.111cn.net/"
      blockid="931" target="_blank"><img alt="阿朵唱功遭质疑撩裙露臀卖肉博眼球"
      src="images/06.jpg"></a></div>
      <div id=switch_6><a onclick=setclick();
href="http://www.111cn.net/" target="_blank"
blockid="931"><img alt=林俊杰mv中惨遭意外车祸痛失女友
      src="images/07.jpg"></a></div></td></tr></tbody></table></div>
<div class=topnewslist>
<img src="images/jrjd.jpg" width="253" height="25" />
<ul>
<li><a class=up id=focus_0 onmouseo教程ver=show_focus_image(0);
title="信宣传新专辑与徐静蕾合作很紧张" onclick=setclick();
href="http://www.111cn.net/" target="_blank"
blockid="931">信宣传新专辑与徐静蕾合作很紧张</a> </li>
<li><a id=focus_1 onmouseover=show_focus_image(1); title="蒲巴甲北京录新歌首张ep杀青在即"
onclick=setclick();
href="http://www.111cn.net/" target="_blank"
blockid="931">蒲巴甲北京录新歌首张ep杀青在即</a> </li>
<li><a id=focus_2 onmouseover=show_focus_image(2); title="尚雯婕为演唱会携天价古董拍海报"
onclick=setclick();
href="http://www.111cn.net/" target="_blank"
blockid="931">尚雯婕为演唱会携天价古董拍海报</a> </li>
<li><a id=focus_3 onmouseover=show_focus_image(3); title="曹格穿透明装与辣妹热舞　爸妈齐助阵"
onclick=setclick();
href="http://www.111cn.net/" target="_blank"
blockid="931">曹格穿透明装与辣妹热舞　爸妈齐助阵</a> </li>
<li><a id=focus_4 onmouseover=show_focus_image(4); title="周杰伦女友江语晨拍mv 邀小朋友助阵"
onclick=setclick();
href="http://www.111cn.net/" target="_blank"
blockid="931">周杰伦女友江语晨拍mv 邀小朋友助阵</a> </li>
<li><a id=focus_5 onmouseover=show_focus_image(5); title="阿朵唱功遭质疑撩裙露臀卖肉博眼球"
onclick=setclick();
href="http://www.111cn.net/" target="_blank"
blockid="931">阿朵唱功遭质疑撩裙露臀卖肉博眼球</a> </li>
<li><a id=focus_6 onmouseover=show_focus_image(6); title="林俊杰mv中惨遭意外车祸痛失女友"
onclick=setclick();
href="http://www.111cn.net/" target="_blank"
blockid="931">林俊杰mv中惨遭意外车祸痛失女友</a> </li></ul></div></div>
<div class=topnewsbg></div></div>
<script>

   function cleanallstyle() {
    for (i=0;i<7;i++) {
     document.getelementbyid("focus_"+i).classname = "" ;
    }
   }
   function show_focus_image(index) {
    cleartimeout(refreshhotquerytimer);
    sethotquerylist(index);
    refreshhotquerytimer = settimeout('refreshhotquery();', 5000);
   }
   function setclick() {
    cleartimeout(refreshhotquerytimer);
   }
    var refreshhotquerytimer = null ;
    var hot_query_td = document.getelementbyid('hotsearchlist');
    sethotquerylist(currenthotscreen);
    refreshhotquerytimer = settimeout('refreshhotquery();', 5000);

   </script></div>

</div>
</body>
</html>