jQuery实现的图片分组切换焦点图插件

前端技术 2023/09/07 JavaScript

这是一款基于jQuery的图片切换焦点图插件，这款jQuery焦点图插件的特点是图片可以分组切换，也就是说一次可以切换多张图片，相比其他焦点图插件，它能节省更多的空间，可以向用户展示更多的图片，非常实用。

实现的代码。

html代码：

js代码：

复制代码代码如下:

$(function () {
            var $number = Math.ceil($(\'.scroll ul li\').length / 4); //获取滚动几屏个数
            var margin = 10; //设置图片间距
            var $w = $(\'.scroll li\').width() + margin; // 一屏图片的宽度
            var $width = $w * $number * 2; //设置ul宽度
            var pre = $(\'.device .pre\');
            var next = $(\'.device .next\');
            if ($number == 1) { pre.hide(); next.hide(); }
            $(\'.scroll ul\').width($width);
            var num = 0;
            function autoscroll() {
                num++;
                if ($number == 1) { return false }
                if (num == $number) {
                    num = 0;
                }
                var distance = -2 * $w * num;
                $(\'.scroll ul\').stop().animate({ left: distance });
            }
            var scrollChange = setInterval(autoscroll, 8000);
            //鼠标悬停，暂停滚动
            $(\".scroll ul,.pre,.next\").mouseover(function () {
                $(\'.scroll ul\').stop()
                clearInterval(scrollChange);
            });
            // 鼠标移走，滚动继续
            $(\'.scroll ul,.pre,.next\').mouseout(function () {
                scrollChange = setInterval(autoscroll, 8000);
            });
            //下一组
            next.click(function () {
                num++;
                if (num >= $number) { num = 0 }
                var leftdis = -2 * $w * num;
                $(\'.scroll ul\').stop().animate({ left: leftdis });
            });
            //上一组
            pre.click(function () {
                num--;
                if (num < 0) { num = $number - 1 }
                var rightdis = -2 * $w * num;
                $(\'.scroll ul\').stop().animate({ left: rightdis });
            });
        });

本文地址：https://www.stayed.cn/item/20130

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)