服务器之家

服务器之家 > 正文

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

时间:2021-06-23 17:04     来源/作者:jQuery之家

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

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

实现的代码。

html代码:

 

复制代码 代码如下:

 <div class="device">
        <h2>
            <a href="javascript:;" class="pre">上一组</a><a href="javascript:;" class="next">下一组</a></h2>
        <div class="scroll">
            <ul>
                <li><a href="#">
                    <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
                <li><a href="#">
                    <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
            </ul>
        </div>
    </div>

 

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 });
            });
        });
标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部