jQuery實現(xiàn)的圖片分組切換焦點圖插件

更新時間：2015年01月06日 10:32:47 投稿：hebedich

這篇文章主要介紹了jQuery實現(xiàn)的圖片分組切換焦點圖插件,效果非常棒，而且很實用，推薦給有需要的小伙伴。

這是一款基于jQuery的圖片切換焦點圖插件，這款jQuery焦點圖插件的特點是圖片可以分組切換，也就是說一次可以切換多張圖片，相比其他焦點圖插件，它能節(jié)省更多的空間，可以向用戶展示更多的圖片，非常實用。

實現(xiàn)的代碼。

html代碼：

復(fù)制代碼代碼如下:

 <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代碼：

復(fù)制代碼代碼如下:

  $(function () {

            var $number = Math.ceil($('.scroll ul li').length / 4); //獲取滾動幾屏個數(shù)

            var margin = 10; //設(shè)置圖片間距

            var $w = $('.scroll li').width() + margin; // 一屏圖片的寬度

            var $width = $w * $number * 2; //設(shè)置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);

            //鼠標(biāo)懸停，暫停滾動

            $(".scroll ul,.pre,.next").mouseover(function () {

                $('.scroll ul').stop()

                clearInterval(scrollChange);

            });

            // 鼠標(biāo)移走，滾動繼續(xù)

            $('.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 });

            });

        });