jQuery 的一个自动向上翻页的效果

  jQuery效果的制作还是相对与JS来所容易简便得多，今天分享的制作的一个jQuery效果是图片 自动向上翻页的一个特效，这特效对于商城来说还是比较常见的下面是代码：

<!DOCTYPE html>
<html>
<head>
    <title>upDown1</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">

        * { margin:0; padding:0;}
        ul, li { list-style:none;}
        body{
            text-align:center;
        }
        .play{
            width:400px;
            height:80px;
            position:relative;
            overflow:hidden;
            background:#DDD;
            margin:10px 0;
        }
        .playimg{
            width:400px;
            height:80px;
            background:red;
            position:absolute;
        }
        .playimg li{
            height:80px;
            background:green;
            margin:5px 0;
            overflow:hidden;
        }
        .playimg img{
            width:80px;
            height:80px;
        }

    </style>
</head>
<body>
<script type="text/javascript">
    function $(id){return document.getElementsByClassName(id)}
    function moveElement(elementID,n,final_x,final_y,interval) {
        if (!document.getElementsByClassName) return false;
        if (!document.getElementsByClassName(elementID)) return false;
        var elem = document.getElementsByClassName(elementID)[n];
        if (elem.movement) {
            clearTimeout(elem.movement);
        }
        if (!elem.style.left) {
            elem.style.left = "0px";
        }
        if (!elem.style.top) {
            elem.style.top = "0px";
        }
        var xpos = parseInt(elem.style.left);
        var ypos = parseInt(elem.style.top);
        if (xpos == final_x && ypos == final_y) {
            return true;
        }
        if (xpos < final_x) {
            var dist = Math.ceil((final_x - xpos)/10);
            xpos = xpos + dist;
        }
        if (xpos > final_x) {
            var dist = Math.ceil((xpos - final_x)/10);
            xpos = xpos - dist;
        }
        if (ypos < final_y) {
            var dist = Math.ceil((final_y - ypos)/10);
            //ypos = dist + ypos; //往下切换回第一张
            ypos = dist - ypos; //往上切换回第一张
        }
        if (ypos > final_y) {
            var dist = Math.ceil((ypos - final_y)/10);
            ypos = ypos - dist;
        }

        elem.style.left = xpos + "px";
        elem.style.top = ypos + "px";
        var repeat = "moveElement('"+elementID+"',"+n+","+final_x+","+final_y+","+interval+")";
        elem.movement = setTimeout(repeat,interval);
    }
    function imgChange(num,n){//切换内容
        if(!$('play')) return false;
        var piclist=$('playimg')[n].getElementsByTagName('img');
        var imgheight=piclist[0].offsetHeight;
        var moveY=-(imgheight*num);

        moveElement('playimg',n,0,moveY,5);
    }
    function classToggle(arr,n){//切换当前样式Class
        for(var i=0;i<arr.length;i++){
            arr[i].className='';
        }
        arr[n].className='current';
    }

    function autoChange(btns){
        if(!$(btns)) return false;
        if(!autokey) return false;

        for(var j=0;j<$(btns).length;j++){
            var arr=$(btns)[j].getElementsByTagName('li');

            for(var i=0;i<arr.length;i++){
                if(arr[i].className=='current'){
                    var n=i+1;
                }
            }
            if(n>=arr.length) n=0;
            classToggle(arr,n);
            imgChange(n,j);
        }
    }

    var autokey = true;
    setInterval("autoChange('playimg')",3000);

</script>
<div class="play">
    <ul class="playimg">
        <li class="current"><img  alt="" src="./public/img/1.jpg" />11111111</li>
        <li><img  alt="" src="./public/img/1.jpg" />222222222</li>
    </ul>
</div>


<div class="play">
    <ul class="playimg">
        <li class="current"><img  alt="" src="./public/img/1.jpg" />11111111</li>
        <li><img  alt="" src="./public/img/1.jpg" />222222222</li>
        <li><img  alt="" src="./public/img/2.jpg" />333333333</li>
    </ul>
</div>

<div class="play">
    <ul class="playimg">
        <li class="current"><img  alt="" src="./public/img/1.jpg" />11111111</li>
        <li><img  alt="" src="./public/img/1.jpg" />222222222</li>
        <li><img  alt="" src="./public/img/1.jpg" />333333333</li>
        <li><img  alt="" src="./public/img/1.jpg" />444444444</li>
    </ul>
</div>

</body>
</html>

 

posted @ 2015-08-16 22:31  int_max  阅读(1541)  评论(0)  编辑  收藏  举报