鼠标拖动图片效果

【Javascript】

下载

新闻

文章

本想做一个手机里划动切换广告的效果，于是先做了一个鼠标拖动切换图片效果。

本想做一个手机里划动切换广告的效果，于是先做了一个鼠标拖动切换图片效果。但这可不能兼容手机划动，鼠标可不等于手触屏呀，坑爹爹！

<div style="text-align: center">
    <div id="out_div">
        <div id="pic_div">
            <div id="pic">
                <img src="http://down.scscms.com/scs/pic/1.jpg" alt="" width="400" /><img src="http://down.scscms.com/scs/pic/2.jpg" alt="" width="400" /><img src="http://down.scscms.com/scs/pic/3.jpg" alt="" width="400" /><img src="http://down.scscms.com/scs/pic/4.jpg" alt="" width="400" />
            </div>
        </div>
        <div id="mark"></div>
        <ul id="sign">
            <li style="background-color:#f00"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var pic_div=document.getElementById("pic_div");
    var pic     =document.getElementById("pic");
    var li=document.getElementsByTagName("li");
    var speed=10;
    var i_width=400;
    pic.onmousedown=function (e) {
        var oe=e||window.event;
        var $this = this;
        var i,scs;
        var startX = oe.clientX - $this.offsetLeft;
        var $i=pic_div.scrollLeft;
        clearInterval(scs);
        document.onmousemove = function (e) {
            var oe = e || window.event;
            i=oe.clientX - startX;
            pic_div.scrollLeft=$i-i;
        };
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
            $i=pic_div.scrollLeft;
            scs=setInterval(function(){
                if(i<0){
                    $i+=speed;
                }else{
                    $i-=speed;
                }
                if($i%i_width>speed){
                    pic_div.scrollLeft=$i;
                }else{
                    for(var l=0;l<li.length;l++){
                        li[l].style.backgroundColor="#fff";
                    }
                    for(var n=0;n<4;n++){
                        if($i>i_width*n-speed){
                            pic_div.scrollLeft=i_width*n;
                        }
                    }
                    li[pic_div.scrollLeft/i_width].style.backgroundColor="#f00";
                    clearInterval(scs);
                }
            },10);
            if ($this.releaseCapture) {
                $this.releaseCapture();
            }
        };
        if ($this.setCapture) {
            $this.setCapture();
        }
        return false;
    }
</script>

效果看这里！