图片效果。望大神详细解答，多谢！-JavaSript-爱易网页

图片效果。望大神详细解答，多谢！

日期：2014-05-16　浏览次数：20292 次

求一个图片效果。望大神详细解答，谢谢！！！！！

如图啊点击左右的箭头是图片整体移动。箭头有2种样式一个是正常状态一个是点击跟鼠标放上去的状态。小图上的箭头是用来更改图片位置的，就是点击左箭头就会像左移动一个位置点击右边的就会向右移动一个位置，每个小图都有这个效果。谢谢！！！

图片展示?滚动?移位

------解决方案--------------------
之前写过一个类似的。。

用绝对定位就可以，当点击按钮的时候，动态的改变图片的绝对定位的top和left就可以了。然后设置外围container overflow:hidden。

主要就是操作DOM，改变top和left
------解决方案--------------------
看LZ的意思是來求碼的，這個弄起來還是有點複雜的。

友情幫項吧！
------解决方案--------------------
<html>
    <style type="text/css">

    #demo {
     background: #FFF;
     overflow:hidden;
     border: 1px dashed #CCC;
     width: 510px;
    }
    #demo img {
     border: 3px solid #F2F2F2;
    }
    #indemo {
     float: left;
     width: 800%;
    }
    #demo1 {
     float: left;
    }
    #demo2 {
     float: left;
    }

    #myBtnlast {
     float: left;
    }
     #myBtnNext {
     float: left
    }
</style>

<div style="margin:auto 0;float: left;">

<input type="button" id="myBtnlast" value="<<"/>

</div>
<div style="margin:auto 0;float: left;">
<div id="demo">
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a>
    <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a>
    <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a>
    <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a>

    </div>
    <div id="demo2"></div>
    </div>

    </div>
  </div>
       <div style="margin:auto 0">
<input type="button" onclick="javascript:lastImg();" id="myBtnNext" value=">>"/>
  </div>




    <script>
    var speed=10; //数字越大速度越慢
    var tab=doc

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

图片效果。望大神详细解答，多谢！

相关资料更多>

推荐阅读更多>