js实现图片左右滚动

JavaScript014

js实现图片左右滚动,第1张

代码:

    <title></title>

    <style>

        body{

            margin:0

            padding:0

            background-color:transparent

        }

        div{

            width:350px

            overflow:hidden

        }

        table img{

            width:100px

            height:100px

        }

    </style>

</head>

<body>

    <div id="picScroll">

        <table>

            <tr>

                <td><a><img src="../pic/1.jpg" /></a></td>

                <td><a><img src="../pic/2.jpg"></a></td>

                <td><a><img src="../pic/3.jpg"></a></td>

                <td><a><img src="../pic/4.jpg"></a></td>

                <td><a><img src="../pic/5.jpg"></a></td>

            </tr>

        </table>

    </div>

</body>

</html>

<script>

    var target = $('#picScroll')

    var left = 0

    var speed = 30

    function Marqeen() {

        if (target[0].offsetWidth <= left) {

            left -= target[0].offsetWidth

        }

        else {

            left++

        }

        target.scrollLeft(left)

    }

    $(function () {

        var marQueen = window.setInterval(Marqeen, speed)

        target.mouseover(function () {

            clearInterval(marQueen)

        })

        target.mouseout(function () {

            marQueen = window.setInterval(Marqeen, speed)

        })

    })

</script>

函数

描述

$(selector).hide()

隐藏被选元素

$(selector).show()

显示被选元素

$(selector).toggle()

切换(在隐藏与显示之间)被选元素

$(selector).slideDown()

向下滑动(显示)被选元素

$(selector).slideUp()

向上滑动(隐藏)被选元素

$(selector).slideToggle()

对被选元素切换向上滑动和向下滑动

$(selector).fadeIn()

淡入被选元素

$(selector).fadeOut()

淡出被选元素

$(selector).fadeTo()

把被选元素淡出为给定的不透明度

$(selector).animate()

对被选元素执行自定义动画

speed

参数规定显示或隐藏的速度。可以设置这些值:"slow",

"fast",

"normal"

或毫秒。

callback

参数是在

hide

show

函数完成之后被执行的函数名称

自己整理,绝非抄袭!

用jquery写的,代码很简洁:

<script src="jquery.js"></script>

<script>

function AutoScroll(obj){

$(obj).find("ul:first").animate({

marginTop:"-25px"

},500,function(){

$(this).css().find("li:first").appendTo(this)

})

}

$(document).ready(function(){

setInterval('AutoScroll("#scrollDiv")',2000)

)}

</script>

<div id="scrollDiv">

<ul>

<li>滚动内容</li>

</ul>

</div>

希望对你有所帮助