jQuery實現的圖片分組切換焦點圖插件

2019-11-20 13:29:12

字體：大中小

來源：轉載

供稿：網友

這是一款基于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 });
            });
        });