爲圖像提供動畫

我有下面的代碼，工作正常。作爲初學者，我使用了一個非常基本的Java腳本。我需要幫助來爲圖像創建動畫。當我將鼠標懸停到某個按鈕上時，圖像應該從左到右或與其相似。當我將鼠標懸停到第二個按鈕時，它應該執行相同的操作。我有這個至今：爲圖像提供動畫

<html> 
    <head> 
    <title>Images</title> 
    <script> 
     var myInterval=setInterval(function(){changeImage()},2000); 

     function ShowImage(i){ 
      stopImage(); 
      var img = document.getElementById("slideDiv"); 
      var count = document.getElementById("count"); 
      count.value = i; 
      img.innerHTML="<img src=\"Sample" + i + ".png\" style=\"height:70%\" id=\"img1\" name=\"img1\"/>"; 
     }  

     function changeImage(){ 
      var img = document.getElementById("slideDiv"); 
      var count = document.getElementById("count"); 
      count.value = parseInt(count.value) + 1 
      if(count.value>3) 
       count.value = 1; 
      img.innerHTML="<img src=\"Sample" + count.value + ".png\" style=\"height:70%\" id=\"img1\" name=\"img1\"/>"; 
     } 

     function playImage(){ 
      myInterval=setInterval(function(){changeImage()},2000); 
     } 

     function stopImage(){ 
      clearInterval(myInterval); 
     } 
    </script> 
    </head> 
    <body> 
     <center> 
      <div id="slideDiv" name="slideDiv"> 
      <img src="Sample1.png" style="height:70%" id="img1" name="img1"/> 
      </div> 
      <br> 
      <input type="button" onMouseOver="ShowImage(1);" onMouseOut="playImage();" style="border: #FF00FF solid 1px;"> 
      <input type="button" onMouseOver="ShowImage(2);" onMouseOut="playImage();" style="border: #FF00FF solid 1px;"> 
      <input type="button" onMouseOver="ShowImage(3);" onMouseOut="playImage();" style="border: #FF00FF solid 1px;"> 
      <input type="hidden" value="1" id="count" name="count"> 
     </center> 
    </body> 
</html>

來源

2014-03-31 Sakaramatha

使用Jqyery動畫

HTML

<div id="img_container"> 
    <center> 
      <div id="slideDiv" name="slideDiv"> 
      <img src="Sample1.png" id="img1" name="img1"/> 
      </div> 

     </center> 
</div> 
      <br><br> 
      <input type="button" style="border: #FF00FF solid 1px;"> 
      <input type="button" style="border: #FF00FF solid 1px;"> 
      <input type="button" style="border: #FF00FF solid 1px;"> 

      <input type="hidden" value="1" id="count" name="count">

CSS

#img_container{ 
    width:400px; 
    height:200px; 
    overflow:hidden; 
    position:relative; 
    border:1px solid #000 
} 
#img1{ 
    position: absolute; 
    left:-400px; 
    top:0px; 
    width:400px; 
    height:200px 
}

jQuery的

附加Jqyery庫。我正在使用1.6版本進行demopstration。有Jquery網站的最新版本。 Ypu可以試試demo這裏

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script> 

    <script> 
    $(document).ready(function(){ 
    $("input[type=button]") 
    .mouseenter(function() { 

     $("#img1").stop().animate({left:"0px"},500); 

    }) 
    .mouseleave(function() { 
    $("#img1").stop().animate({left:"-400px"},500); 
    }); 

}); 
    </script>

來源

2014-03-31 02:57:17

對不起，但編碼沒有按預期工作。這些按鈕正在被圖像重疊。 – Sakaramatha

它可以由CSS造型哥們改變。 –

我有更新我的答案。檢查它 –

這是我最近用過的sideshow。欲瞭解更多信息，請參閱http://bxslider.com/

你需要從http://bxslider.com/lib/jquery.bxslider.js

<script type="text/javascript" src="jquery.bxslider.js"></script>

這裏下載jquery.bxslider.js文件如何使用它

<script type="text/javascript"> 
    $(function() { 
    $('.bxslider').bxSlider({ 
    mode:'fade', //fade, Horizontal, Verticla 
    easing:'linear', //easing effect http://easings.net/ 
    speed:1000, //Transaction time 
    pause:4000, // duration for image 
    infiniteLoop:true, //Lopping 
    autoControls:true, 
    slideWidth:600, //Size f the slider 
    auto:true, //Start auto 
    controls:true, // Slidercontrols 
    captions:true, // this will show the title of image as caption 
    maxSlides:5, 
    minSlides:2, 
    adaptiveHeight: false 
    }); 
}); 
</script>

還有更多的設置在bxslider.Please訪問http://bxslider.com/

HTML應該是

<div class="bxslider" > 
    <ul> 
     <li><img src='image1.jpg' title='Image caption 1'></li> 
     <li><img src='image2.jpg' title='Image caption 2'></li> 
     <li><img src='image3.jpg' title='Image caption 3'></li> 
     <li><img src='image4.jpg' title='Image caption 4'></li> 
     <li><img src='image5.jpg' title='Image caption 5'></li> 
    </ul> 
</div>

bxslider CSS

<style type="text/css"> 
    .bx-wrapper { 
    position: relative; 
    margin: 0 auto 60px; 
    padding: 0; 
    *zoom: 1; 

} 

.bx-wrapper img { 
    max-width: 100%; 
    margin-top: 90px!important; 

    width:610px; 
    height: 400px!important; 
    display: block; 
} 


/** THEME 
===================================*/ 

.bxslider{ 

    width: 620px!important; 
    margin: 0 auto; 
    padding-left: -5px; 
    margin-top: -100px; 

} 

.bx-wrapper .bx-viewport { 

    left: -5px; 
    background: #fff; 
    margin-left: 5px; 
    width: 605px!important; 
    height:480px!important; 
    margin-top: 5px; 
    margin-left: -5px; 
} 

.bx-wrapper { 
    position: relative; 
    height:450px!important; 
    width: 620px!important; 
    overflow: hidden; 
} 


.bx-wrapper .bx-pager, 
.bx-wrapper .bx-controls-auto { 
    position: absolute; 
    width: 100%;   
} 

/* LOADER */ 

.bx-wrapper .bx-loading { 
    min-height: 50px; 
    background: url(images/bx_loader.gif) center center no-repeat #fff; 
    height: 250px; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2000; 
} 

/* PAGER */ 

.bx-wrapper .bx-pager { 
    text-align: center; 
    font-size: .85em; 
    font-family: Arial; 
    font-weight: bold; 
    color: #666; 

} 

.bx-wrapper .bx-pager .bx-pager-item, 
.bx-wrapper .bx-controls-auto .bx-controls-auto-item { 
    display: inline-block; 
    *zoom: 1; 
    *display: inline; 
} 

.bx-wrapper .bx-pager.bx-default-pager a { 
    background: #fff; 
    text-indent: -9999px; 
    display: block; 
    width: 6px; 
    height: 6px; 
    margin: 0 5px; 
    outline: 0; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border:3px solid #45372f; 
} 

.bx-wrapper .bx-pager.bx-default-pager a:hover, 
.bx-wrapper .bx-pager.bx-default-pager a.active { 
    color: #fff; 
    border:3px solid #fff; 
} 

/* DIRECTION CONTROLS (NEXT/PREV) */ 

.bx-wrapper .bx-prev { 
    position: absolute; 
    left: 5px; 
    top: 430px!important; 
    width: 39px!important; 
    height: 39px!important; 
    background: url(images/controls.png) no-repeat 0 -32px; 
    background-size: 75% 

} 

.bx-wrapper .bx-next { 
    left: 35px; 
    top: 430px!important; 
    width: 39px!important; 
    height: 39px!important; 
    background: url(images/controls.png) no-repeat -43px -32px; 
    background-size: 75% 

} 

.bx-wrapper .bx-prev:hover { 
    /*background-position: 0 0;*/ 
    background: url(images/prev_a.png) no-repeat; 
    background-size: 75% 

} 

.bx-wrapper .bx-next:hover { 
    /*background-position: -43px 0;*/ 
    background: url(images/next_a.png) no-repeat; 
    background-size: 75% 
} 

.bx-wrapper .bx-controls-direction a { 
    position: absolute; 
    top: 50%; 
    margin-top: -16px; 
    outline: 0; 
    width: 32px; 
    height: 32px; 
    text-indent: -9999px; 
    z-index: 9999; 
} 

.bx-wrapper .bx-controls-direction a.disabled { 
    display: none; 
} 

/* AUTO CONTROLS (START/STOP) */ 

.bx-wrapper .bx-controls-auto { 
    text-align: center; 
} 

.bx-wrapper .bx-controls-auto .bx-start { 
    display: block; 
    text-indent: -9999px; 
    width: 10px; 
    height: 11px; 
    outline: 0; 
    background: url(images/controls.png) -86px -11px no-repeat; 
    margin: 0 3px; 
} 

.bx-wrapper .bx-controls-auto .bx-start:hover, 
.bx-wrapper .bx-controls-auto .bx-start.active { 
    background-position: -86px 0; 
} 

.bx-wrapper .bx-controls-auto .bx-stop { 
    display: block; 
    text-indent: -9999px; 
    width: 9px; 
    height: 11px; 
    outline: 0; 
    background: url(images/controls.png) -86px -44px no-repeat; 
    margin: 0 3px; 
} 



.bx-wrapper .bx-controls-auto .bx-stop:hover, 
.bx-wrapper .bx-controls-auto .bx-stop.active { 
    background-position: -86px -33px; 
} 

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ 

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { 
    text-align: left; 
    width: 80%; 
} 

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { 
    right: 0; 
    width: 35px; 
} 

/* IMAGE CAPTIONS */ 

.bx-wrapper .bx-caption { 
    position: absolute; 
    bottom: -36; 
    right: -5; 
    height: 50px; 
    background: #fff; 

    width: 400px; 
    float: right; 
    text-align: right; 


} 

.bx-wrapper .bx-caption span { 
    color: #000; 
    font-family: "Calibri"; 
    font-size: 12px; 
    display: block; 
    font-size: .85em; 
    padding: 10px; 
} 


</style>

controls.png enter image description here bx_loader.gif

我希望你能找到我的答案東西。

來源

2014-04-01 04:47:54

非常感謝您的幫助 – Sakaramatha

爲圖像提供動畫

回答

相關問題