鼠标按下图片轮播

来源：互联网发布：淘宝宝贝评价采集工具编辑：程序博客网时间：2024/04/29 00:54

js代码：

if($(".friends-bar").length>0){            var num=0;            var li_width=0;            var nav_move=0;//滚动的宽度            var ul_w=0;//ul的宽度            var s_num=1;//当前滚动的次数            var s_long=0;//当前滚动的长度            $(".friends-bar li").each(function(){                li_width+=$(this).width();            })            ul_w=li_width;            $(".friends-bar ul").css("width",ul_w);            var time;            var obj=$(".friends-bar")[0];            $(".friends-btn").on({                'mousedown':function (e) {                    var _this=$(this);                    var w=$(".friends-bar").width();//ul外的div宽度                    var move_w=ul_w-w;//滚动条滚动的总长度                    obj.timer=setInterval(function () {                        num++;                        if(_this.hasClass("friends-right")){//右侧滚动                            s_long=s_long-2*num;                            if(Math.abs(s_long)>=Math.abs(move_w)){                                //alert('已经到最后页');                                $(".friends-bar").css('-webkit-transform','translateX(-'+move_w+'px)');                                s_long=-move_w;                                clearInterval(obj.timer);                            }else{                                var t=s_long;                                $(".friends-bar").css('-webkit-transform','translateX('+t+'px)');                            }                        }else{//左侧滚动                            s_long=s_long+2*num;                            if(s_long>=0){                                //alert('已经到第一页')                                $(".friends-bar").css('-webkit-transform','translateX(0)');                                s_long=0;                                clearInterval(obj.timer);                            }else{                                var t=s_long;                                $(".friends-bar").css('-webkit-transform','translateX('+t+'px)');                            }                        }                    },100)                },                "mouseup":function () {                    clearInterval(obj.timer);                }            })        }

html代码：

<a href="javascript:;" id="rightBtn" class="friends-right friends-btn"></a><a href="javascript:;" id="leftBtn" class="friends-left friends-btn"></a><ul>                    <li>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                        <a href="#"><img src="images/h1.png"> </a>                    </li>                    </ul>

0 0