图片自动切换

转载 2006年06月02日 10:21:00

<style>
#g_div{text-align:right;overflow:hidden}
.b{width:24px; height:16px; background:#737373; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
.b:hover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
.bhover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
</style>

<div id="g_div" style="width:270px;height:252px"><a
href="#" target=_blank><img
id="g_img" style="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px green solid" src="http://zi.csdn.net/xian.gif">
</a><a
href="http://www.baidu.com/" for="http://zi.csdn.net/xian.gif"  target="_blank">1.CSDN程序员</a><a
href="http://www.126.com/" for="http://zi.csdn.net/microsoft280_187.jpg"  target="_blank">2.CSDN程序员</a><a
href="http://mp3.baidu.com/"  for="http://zi.csdn.net/live.gif"   target="_blank">3.CSDN程序员</a><a
href="http://post.baidu.com/" for="http://zi.csdn.net/new-mba.gif"  target="_blank">4.CSDN程序员</a><a
href="http://top.baidu.com/" for="http://zi.csdn.net/book.jpg"  target="_blank">5.CSDN程序员</a>
</div>

<script language="JavaScript">
function f(){
var g_sec=3          //几秒后切换图片
var g_items=new Array()
var g_div=document.getElementById("g_div")
var g_img=document.getElementById("g_img")
var g_imglink=g_img.parentElement
var arr=g_div.getElementsByTagName("A")
var arr_length=arr.length
var g_index=1

var show_img=function(n){ 
   if (//d+/.test(n)){
var prev=g_index+1
g_index=n-1
   }else{  
var prev=(g_index>arr.length)?(arr_length-1):g_index+1
g_index=(g_index<arr_length-2)?(++g_index):0
   }
   if (document.all){
   g_img.filters.revealTrans.Transition=23;
  g_img.filters.revealTrans.apply();
  g_img.filters.revealTrans.play();
    }
 arr[prev].className="b" 
 arr[g_index+1].className="bhover"
 g_img.src=g_items[g_index].img.src
 g_img.title=g_items[g_index].txt
 g_imglink.href=g_items[g_index].url 
 g_imglink.target=g_items[g_index].target
 
}

for(var i=1;i<arr_length;i++){
g_items.push({txt:arr[i].innerHTML,
url:arr[i].href,
target:arr[i].target,
img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})
arr[i].title=arr[i].innerHTML
arr[i].innerHTML=[i,"&nbsp;"].join("")
arr[i].className="b"
arr[i].onclick=function(){
event.returnValue=false;
show_img(event.srcElement.innerText)
}
}
show_img(1)
var t=window.setInterval(show_img,g_sec*1000)
g_img.onmouseover=function(){window.clearInterval(t)}
g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)} 
}

window.attachEvent("onload",f)
</script>

Android 图片自动切换

Android 图片自动切换 效果图: 思路: 利用 android.support.v4.view.ViewPager 和线程实现图片切换。 1. 首先把图片放入分别放入不同的 Imag...
  • w2298119289j
  • w2298119289j
  • 2017年06月21日 00:08
  • 315

js实现图片自动切换

*{margin:0;padding:0;list-style-type:none;} body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";c...
  • wojiaohuangyu
  • wojiaohuangyu
  • 2015年10月09日 12:39
  • 1194

JQuery实现图片切换(自动切换+手动切换)

JQuery实现图片切换(自动切换+手动切换)
  • huyuyang6688
  • huyuyang6688
  • 2015年01月31日 21:26
  • 12685

使用ViewPager实现图片自动切换

1、ViewPager讲解    ViewPager是中的控件,使用时直接在布局文件中引用,跟正常控件一样。但是,要给ViewPager设置适配器PagerAdapter,其中有四个方法是适配器Pag...
  • supersnow0622
  • supersnow0622
  • 2016年04月13日 19:33
  • 1756

原生js+css3实现图片自动切换,图片轮播

运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 ...
  • pspgbhu
  • pspgbhu
  • 2016年05月21日 03:01
  • 6179

纯css3实现图片自动切换

实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容。 大致思路是这样的: 1、将图片设置为li的背景图片; 2、规定一个@keyframes的规则使得图片按照这个规则进行切换; 3...
  • HL141916
  • HL141916
  • 2017年05月25日 20:44
  • 1865

ViewPager实现每隔两秒自动切换图片

布局代码: 1 RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns...
  • wonghoman
  • wonghoman
  • 2014年05月20日 07:19
  • 866

android--图片的水平自动切换

实现该功能用到了Gallery组件,该组件能够水平方向显示图片内容,并可以拖动; 主要属性: ...
  • hanyuboke
  • hanyuboke
  • 2015年09月29日 21:42
  • 885

JQuery中图片自动切换和手动切换

先看网页代码: 天猫精选 1吃货节sdfsfsfdsfsd
  • chaplinlong
  • chaplinlong
  • 2016年05月04日 23:03
  • 485

使用js实现图片的自动切换

*{margin:0;border:0;padding:0}  #main{width:450px;height:400;background-color:green;margin:auto}  ...
  • pqx1993
  • pqx1993
  • 2013年03月02日 12:46
  • 3282
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片自动切换
举报原因:
原因补充:

(最多只允许输入30个字)