图片自动切换的效果，上面的数字导航是用flash做的吗？

就是比如说共有五张图片自动切换，会自动按顺序切换，图片上面有数字1-5，点击数字显示相应的图片，这种数字浮于图片之上，是用flash做的吗？我怎么感觉用js做这种很费力

解决方案 »

  1.   

    有的是flash有的是JS，不过目前，JS这种图片轮转特效，还是挺多的楼主可以查百度一下JS图片轮转。有很多相应代码。喜欢了，就copy一个来用
      

  2.   

    纯js的也有，js+flash的也有，纯flash的也有推荐用 js + flash的
      

  3.   

    感觉用js还是蛮方便的，用flash的话，改起来也不方便的
      

  4.   

    这东东，你去懒人图库上去找多多的，有js写的，也有flash+xml写的很全的
      

  5.   

    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> 
    <title>pic player</title> 
    <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script> 
    <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script> 
    </head> 
    <style type="text/css"> 
    img{border:0;} 
    </style> 
    <body> 
    <div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;"> 
    there is a pic-player 
    </div> 
    <script> 
    var p = $('#picplayer'); 
    var pics1 = [{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:5000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:4000},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:6000}]; 
    initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]); 
    // 
    // 
    function initPicPlayer(pics,w,h) 
    { 
    //选中的图片 
    var selectedItem; 
    //选中的按钮 
    var selectedBtn; 
    //自动播放的id 
    var playID; 
    //选中图片的索引 
    var selectedIndex; 
    //容器 
    var p = $('#picplayer'); 
    p.text(''); 
    p.append('<div id="piccontent"></div>'); 
    var c = $('#piccontent'); 
    for(var i=0;i<pics.length;i++) 
    { 
    //添加图片到容器中 
    c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>'); 
    } 
    //按钮容器，绝对定位在右下角 
    p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div>'); 
    // 
    var btnHolder = $('#picbtnHolder'); 
    btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>'); 
    var btns = $('#picbtns'); 
    // 
    for(var i=0;i<pics.length;i++) 
    { 
    //增加图片对应的按钮 
    btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> '); 
    $('#picbtn'+i).data('index',i); 
    $('#picbtn'+i).click( 
    function(event) 
    { 
    if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src')) 
    { 
    return; 
    } 
    setSelectedItem($(this).data('index')); 
    } 
    ); 
    } 
    btns.append(' '); 
    /// 
    setSelectedItem(0); 
    //显示指定的图片index 
    function setSelectedItem(index) 
    { 
    selectedIndex = index; 
    clearInterval(playID); 
    //alert(index); 
    if(selectedItem)selectedItem.fadeOut('fast'); 
    selectedItem = $('#picitem'+index); 
    selectedItem.fadeIn('slow'); 
    // 
    if(selectedBtn) 
    { 
    selectedBtn.css('backgroundColor','#eee'); 
    selectedBtn.css('color','#000'); 
    } 
    selectedBtn = $('#picbtn'+index); 
    selectedBtn.css('backgroundColor','#000'); 
    selectedBtn.css('color','#fff'); 
    //自动播放 
    playID = setInterval(function() 
    { 
    var index = selectedIndex+1; 
    if(index > pics.length-1)index=0; 
    setSelectedItem(index); 
    },pics[index].time); 
    } 
    } </script> 
    </body> 
    </html>http://www.cnblogs.com/a36040343/archive/2010/11/17/1880092.html
      

  6.   

    许多jquery插件，做这种东西举手之劳。实际上假设你们将来招聘javascript程序员，只招聘编写插件的程序员就好了，不用招聘做网页的程序员。（网页由美工来做就好了）