为图像提供动画

时间：2014-03-31 02:40:29

标签： javascript html slideshow

我有下面的代码可以正常工作。作为初学者，我使用了一个非常基本的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>

2 个答案:

答案 0 :(得分：0)

使用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>

答案 1 :(得分：0)

这是我最近使用的旁观。有关详细信息，请参阅http://bxslider.com/

您需要从http://bxslider.com/lib/jquery.bxslider.js下载jquery.bxslider.js文件

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

这里如何使用

<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中有更多设置。请访问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 enter image description here

我希望你能从我的回答中找到答案。

相关问题
最新问题