关于JS图片切换

doudoudmj 2010-11-02 03:54:30

现在我需要写一个js用于切换网站上的广告，因为所有的图片和图片外的div和样式都是动态生成的，下载了一些代码总是不合适，我自己又不太会写js，请教高手帮我写一段代码。下面是例子
下面有一个div中有四个图片，例如他是读取出来后的图片，我需要这四张图片中显示一张其他三张隐藏，然后隔一段时间就显示它下面的图片，一直循环下去。就是四张图片的循环变换，请高手指教一下应该怎么写呢~~比较着急，谢谢了~~



<div id="ads_1">

<a href="adsclick.aspx?id=1"  target="_blank"><img src="http://www.codefans.net/jscss/demoimg/200904/a1.jpg" width="473" height="79" border="0"  /></a>

<a href="adsclick.aspx?id=1" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/200904/a2.jpg" width="473" height="79" border="0"  /></a>

<a href="adsclick.aspx?id=1"   target="_blank"><img src="http://www.codefans.net/jscss/demoimg/200904/a3.jpg" width="473" height="79" border="0"  /></a>

<a href="adsclick.aspx?id=1" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/200904/a4.jpg" width="473" height="79" border="0"  /></a>

</div>

...全文

92 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

doudoudmj 2010-11-03

打赏
举报

[Quote=引用 3 楼 liuwei2500 的回复:]

HTML code

<div id="ads_1">
<a href="adsclick.aspx?id=1" target="_blank" style ="display:block"><img src="http://www.codefans.net/jscss/demoimg/200904/a1.jpg" width="473" height="79" border="0" />……
[/Quote]

特别的感谢你~~
忘了结贴了

liuwei2500 2010-11-02

打赏
举报



<div id="ads_1">

<a href="adsclick.aspx?id=1"  target="_blank" style ="display:block"><img src="http://www.codefans.net/jscss/demoimg/200904/a1.jpg" width="473" height="79" border="0"  /></a>

<a href="adsclick.aspx?id=1" target="_blank"  style ="display:none"><img src="http://www.codefans.net/jscss/demoimg/200904/a2.jpg" width="473" height="79" border="0"  /></a>

<a href="adsclick.aspx?id=1"   target="_blank"  style ="display:none"><img src="http://www.codefans.net/jscss/demoimg/200904/a3.jpg" width="473" height="79" border="0"  /></a>

<a href="adsclick.aspx?id=1" target="_blank"  style ="display:none"><img src="http://www.codefans.net/jscss/demoimg/200904/a4.jpg" width="473" height="79" border="0"  /></a>

</div>







<script language="javascript" type="text/javascript">



var CurrentIndex = 0;

function ShowImage()

{

    CurrentIndex++;

    var divads = document.getElementById("ads_1");

    var Nodes = divads.getElementsByTagName("a");

    if(CurrentIndex>=Nodes.length)

    CurrentIndex = 0;

    for(var i = 0 ; i <Nodes.length; i ++)

    {

        var Node = Nodes[i];

        Node.style.display = "none";

        if(i == CurrentIndex)

        {

            Node.style.display = "block";

        }

    }

}

setInterval("ShowImage()",1000);

</script>

porschev 2010-11-02

打赏
举报



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

<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script> 

<style type="text/css"> 

* {margin:0;padding:0;font-size:12px;font-family:Verdana;} 

img {border:0} 

#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;} 

#play{position:absolute;margin-left:200px;margin-top:-30px;} 

#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;} 

</style> 

<script type="text/javascript"> 

var _c = _h = 0; 

$(function(){ 

    $('#play > a').click(function(){ 

        var i = $(this).attr('alt') - 1; 

        clearInterval(_h); 

        _c = i; 

        play(); 

        change(i);        

    }) 

    $("#pic img").hover(function(){clearInterval(_h)}, function(){play()}); 

    play(); 

}) 

function play() 

{ 

    _h = setInterval("auto()", 1000); 

} 

function change(i) 

{ 

    $('#play > a').css('background-color','#E8FCEB').eq(i).css('background-color','#C6FF5E').blur(); 

    $("#pic img").hide().eq(i).fadeIn('slow'); 

} 

function auto() 

{    

    _c = _c > 2 ? 0 : _c + 1; 

    change(_c); 

} 

</script> 

<title>js图片播放轮换</title> 

</head> 



<body> 

<div id="pic"> 

    <img src="http://www.cssrain.cn/demo/pic/cssrain-logo.JPG" width="300" height="200" alt="" /> 

    <img src="http://www.cssrain.cn/demo/pic/usbmingpian.jpg" width="300" height="200" alt="" /> 

    <img src="http://www.cssrain.cn/demo/pic/ganyingdeng2.jpg" width="300" height="200" alt="" /> 

    <img src="http://www.cssrain.cn/demo/pic/ganyingdeng.jpg" width="300" height="200" alt="" /> 

</div> 

<div id="play"> 

    <a href="###" alt="1" style="background-color:#C6FF5E">1</a> 

    <a href="###" alt="2" >2</a> 

    <a href="###" alt="3" >3</a> 

    <a href="###" alt="4" >4</a> 

</div> 



<br/><br/><br/><br/> 

<div>转:<a href="http://koyoz.com">koyoz.com</a>  </div> 

</body> 

</html>