js 图片滑动切换效果

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

源码下载地址
http://down.111cn.net/down/code/js/jiaodiantu/2010/0914/20795.html

时间: 2024-10-27 20:27:58

js 图片滑动切换效果的相关文章

js 图片幻灯切换效果代码

picChange图片切换特效 - version:0.3.2 - 2010.5.31修改 代码示例:$pic("picChange").picChange({changeStyle:"fade",time:250}); 当前模式:淡出效果,250毫秒. 切换效果淡出效果移出效果联动效果直接切换效果切换时间ms: 切换方向上下左右点击切换(默认鼠标停留时切换) 定时切换[New!]ms(留空则不切换)

js图片自动切换效果处理代码_javascript技巧

复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5

JS图片左右切换效果的代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" " http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <style>     *{ margin:0; padding:0} #lbcaption { display:block; font-size:12px; font-weight:100;

163多站js图片幻灯切换效果

网易学院05年软件评选结果 经过大家的热情投票和我们的辛劳整理,网易学院2005年年度软件评选结果终于出炉啦.点击进入查看--详细 颠覆丛林动物生存法则 群居动物的这种行为颠覆了我们通常认为的,在动物世界通行的 "丛林法则",动物不都自私,不都是弱肉强食的.详细 WAPI并非贸易阴谋 近日国家做出决定:"将向其他的国内及国外企业公布该算法".事实证明中国WAPI标准并非是贸易阴谋.详细 新视野号探测冥王星特别专题 美国宇航局将于北京时间18日凌晨2时24分发射新视野

javascript鼠标点击控制圆点的图片滑动切换效果

JavaScript 图片滑动切换效果

默认缓动方式1方式2

js 图片幻灯切换效果

加载图片说明-- 计算图片数量--

js图片幻灯切换效果

基于javascript实现图片左右切换效果_javascript技巧

本文实例介绍了javascript实现图片左右切换效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>JS图片左右切换效果</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0; padding:0; } .images-scroll{ border: