鼠标按下图片轮播

最新推荐文章于 2022-03-17 15:29:53 发布

wis2007

最新推荐文章于 2022-03-17 15:29:53 发布

阅读量260

点赞数

分类专栏：技术文章

本文链接：https://blog.csdn.net/wis2007/article/details/53331371

版权

技术文章专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>