新手提问 想要背景图片自动滑动切换应该如何实现？

如题 最后能给个能用的例子！

解决方案 »

  1.   

    操作图片所在标签就行了
    <div style="width:100%;height:300px;">
     <img src="img/xxx.png"></img>
    </div>
    <div style="position:absolute;margin-top:300px;">内容</div>
      

  2.   

    <div style="width:100%;height:300px;">
     <img id="back" src="img/xxx.png" style="display:none;"></img>
    </div>
    <div style="position:absolute;margin-top:-300px;">内容</div> 
    <script type="text/javascript">
        $('#back').show(3000);
    </script>就这样就行，然后用jquery写动画效果
      

  3.   


    <div style="width:100%;height:300px;">
     <img id="back" src="img/xxx.png" style="display:none;"></img>
    </div>
    <div style="position:relative;top:-300px;">内容</div> 
    <script type="text/javascript">
        $('#back').show(3000);
    </script>
      

  4.   

    jq的动画怎么写呢，实现多幅图片自动循环播放？var imgs = [
        'img/img1.png','img/img2.png','img/img3.png'
    ];setInterval(function(){
         $('#back').hide(2000,function(){
            index++;
            if(index>=imgs.length) index = 0;
            $('#back').attr('src',imgs[index]).show(2000);
         });
    },6000);
      

  5.   

    jq的动画怎么写呢，实现多幅图片自动循环播放？var imgs = [
        'img/img1.png','img/img2.png','img/img3.png'
    ];setInterval(function(){
         $('#back').hide(2000,function(){
            index++;
            if(index>=imgs.length) index = 0;
            $('#back').attr('src',imgs[index]).show(2000);
         });
    },6000);<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>bgchange</title>
    <script language="javascript" src="jquery.js"></script>
    <script type="text/javascript">var imgs = [
         'Desert.jpg','Lighthouse.jpg'
     ];
     
    setInterval(function(){
          $('#back').hide(2000,function(){
             index++;
             if(index>=imgs.length) index = 0;
             $('#back').attr('src',imgs[index]).show(2000);
          });
     },6000);
    </script>
    </head>
    <body><div style="width:100%; height:100%;">
      <img id="back" src="Desert.jpg" style="display:none;"></img>
     </div>
    </body>
    </html>
    这样吗？没有显示东西。。您看看哪里错了~
      

  6.   

    var index = 0;
    var imgs = [
         'Desert.jpg','Lighthouse.jpg'
     ];
     
    setInterval(function(){
          $('#back').hide(2000,function(){
             index++;
             if(index>=imgs.length) index = 0;
             $('#back').attr('src',imgs[index]).show(2000);
          });
     },6000);
      

  7.   

    再问下哈 
    我现在代码是这样的
    <html>
    <head>
    <title>bgchange</title>
    <script language="javascript" src="jquery.js"></script>
    <script type="text/javascript">
    var index = 0;
    var imgs = [
         'Desert.jpg','Lighthouse.jpg'
     ];
    setInterval(function(){
          $('#back').hide(2000,function(){
             index++;
             if(index>=imgs.length) index = 0;
             $('#back').attr('src',imgs[index]).show(2000);
          });
     },6000);
    </script>
    </head>
    <body><div style="width:100%; height:100%; position:absolute;">
      <img id="back" height = "100%" width = "100%" src="Desert.jpg" style="display:none; position:fixed;"></img>
     </div>
    </body>
    </html>
    这样的效果是图片从左上角出现，填充满整个屏幕之后又缩小回去 换下一张图。 有什么办法可以让他平移进来 在平移出去？
      

  8.   

    再问下哈 
    我现在代码是这样的
    <html>
    <head>
    <title>bgchange</title>
    <script language="javascript" src="jquery.js"></script>
    <script type="text/javascript">
    var index = 0;
    var imgs = [
         'Desert.jpg','Lighthouse.jpg'
     ];
    setInterval(function(){
          $('#back').hide(2000,function(){
             index++;
             if(index>=imgs.length) index = 0;
             $('#back').attr('src',imgs[index]).show(2000);
          });
     },6000);
    </script>
    </head>
    <body><div style="width:100%; height:100%; position:absolute;">
      <img id="back" height = "100%" width = "100%" src="Desert.jpg" style="display:none; position:fixed;"></img>
     </div>
    </body>
    </html>
    这样的效果是图片从左上角出现，填充满整个屏幕之后又缩小回去 换下一张图。 有什么办法可以让他平移进来 在平移出去？
    你可以用animate函数，具体看jquery的API
      

  9.   

    再问下哈 
    我现在代码是这样的
    <html>
    <head>
    <title>bgchange</title>
    <script language="javascript" src="jquery.js"></script>
    <script type="text/javascript">
    var index = 0;
    var imgs = [
         'Desert.jpg','Lighthouse.jpg'
     ];
    setInterval(function(){
          $('#back').hide(2000,function(){
             index++;
             if(index>=imgs.length) index = 0;
             $('#back').attr('src',imgs[index]).show(2000);
          });
     },6000);
    </script>
    </head>
    <body><div style="width:100%; height:100%; position:absolute;">
      <img id="back" height = "100%" width = "100%" src="Desert.jpg" style="display:none; position:fixed;"></img>
     </div>
    </body>
    </html>
    这样的效果是图片从左上角出现，填充满整个屏幕之后又缩小回去 换下一张图。 有什么办法可以让他平移进来 在平移出去？
    你可以用animate函数，具体看jquery的API
    谢谢指点！太感谢了！