jQuery焦點圖切換特效外掛程式封裝實例_jquery

網站焦點圖是一種網站內容的展現形式，可簡單理解為一張圖片或多張圖片展現在網頁上就是網站焦點圖。在網站很明顯的位置，用圖片組合播放的形式，類似焦點新聞的意思只不過加上了圖片。一般多使用在網站首頁版面或頻道首頁版面，因為是透過圖片的形式，所以有一定的吸引性、視覺吸引性。容易引起訪客的點擊，根據國外的設計機構調查統計，網站焦點圖的點擊率明顯高於純文字，轉換率高於文字標題5倍。由此看來焦點圖的能讓遊客對企業的第一印像大大提升，以下就為大家介紹一個我們專案中封裝使用的漂亮大氣的全螢幕焦點圖。如下圖：

可添加多個 圖片，設定圖片鏈接，導航隨滑鼠移動切換圖片，在發布文章的時候把圖片壓縮了有點失真。

使用本特效首先需要引入對jquery的使用，插件已經封裝成jquery函數，代碼如下：

複製代碼程式碼如下:

/*
* jQuery图片轮播(焦点图)插件
*/
(function ($) {
    $.fn.slideBox = function (options) {
        var defaults = {
            direction: 'left',
            duration: 0.6,
            easing: 'swing',
            delay: 3,
            startIndex: 0,
            hideClickBar: true,
            clickBarRadius: 5,
            hideBottomBar: false
        };
        var settings = $.extend(defaults, options || {});
        var wrapper = $(this),
        ul = wrapper.children('ul.items'),
        lis = ul.find('li'),
        firstPic = lis.first().find('img');
        var li_num = lis.size(),
        li_height = 0,
        li_width = 0;
        var order_by = 'ASC';
        var init = function () {
            if (!wrapper.size()) return false;
            li_height = lis.first().height();
            li_width = lis.first().width();
            wrapper.css({
                width: li_width + 'px',
                height: li_height + 'px'
            });
            lis.css({
                width: li_width + 'px',
                height: li_height + 'px'
            });
            if (settings.direction == 'left') {
                ul.css('width', li_num * li_width + 'px')
            } else {
                ul.css('height', li_num * li_height + 'px')
            };
            ul.find('li:eq(' + settings.startIndex + ')').addClass('active');
            if (!settings.hideBottomBar) {
                var tips = $('

').css('opacity', 0.6).appendTo(wrapper);
                var title = $('

').html(function () {
                    var active = ul.find('li.active').find('a'),
                    text = active.attr('title'),
                    href = active.attr('href');
                    return $('').attr('href', href).text(text)
                }).appendTo(tips);
                var nums = $('

').hide().appendTo(tips);
                lis.each(function (i, n) {                    text = a.attr('title'),
                    href = a.attr('href'),                               在中設計('').attr('href', href).text(text).addClass(css).css('borderiusius),    $(this).addClass('active').siblings().removeClass('active');
    ul.find('li:eq(' $(this).index() ')').addClass('active').siblings
().removeClass('active');
    start();
    stop()
}).appendTo(nums)
                });
                    Tips.hover(function () {
                                top: '0px'
                     '快')
                  },
                         nums.animate({
                                    },
                🎜>                    });
                                 top: Tips.height() 'px'
                  '快速')
} else {
                    nums.show()
       🎜>            lis.size() > 1 && 開始()
        };
        var start = function () {
            var active = ul.find('li 🎜>            var index = active. index();
           if (settings.direction == 'left') {
                   param = {
                    'left' : 偏移量 'px'
               }
            } else {                param = {
                  }
            };
            包裝器.find('.nums').find('a:eq('索引')').addClass('active').siblings().removeClass
('active');
           wrapper.find ('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr
('title'));('title'));
            ul。 stop().animate(param, settings.duration * 1000, settings.easing,
            function () {                               
                  , else {
                               活動.prev().addClass('active')
                    }
                      if (active.prev().size()) {
          .prev().addClass('active')
                    } else {
                      order_by = 'ASC';
                        active.next().addClass('active ')
                    }
                }
            });
           wrapper.data('timeid', window.setTimeout(start, s  wrapper.data('timeid》        var stop = function () {
           窗口.clearTimeout (wrapper.data('timeid'))
        };
       wrapper.hover(function () {
            stop()
             start()
        });
        var imgLoader = 新影像();
        imgLoader.onload = function () {
            imgLoader.onload = null;        imgLoader.src = firstPic.attr('src ')
    }
})(jQuery);


下面是圖片焦點圖的css樣式;

程式碼如下：div.slideBox{position:relative;height:300px;溢位：隱藏；邊距：0 自動;}    div.slideBox ul.items Box { 位置：絕對；浮動：左；背景：無；列表樣式：無；內邊距：0px； margin:0px;}    div.slideBox ul.items li{ float:left; 背景：無；列表樣式：無；內邊距：0px； margin:0px;}

    div.slideBox ul.items li a{ float:left; 行高：正常！重要；填充：0px！重要; border:none/*對於 IE.ADD.JENA.201206300844*/;}

    div.slideBox ul.items li a img{ margin:0px !important;填充：0px！重要;顯示：區塊； border:none/*對於IE.ADD.JENA.201206300844*/;}
    div.slideBox div.tips{position:absolute;底部：0px；寬度：100%；高度：50px；背景顏色：#000；溢出：隱藏;}
    div.slideBox div.tips div.title{ 位置：絕對;左：0px；上方：0px; height:100%;}
    divpx; height:100%;}
    divpx;slideBox . tips div.title a{ color:#FFF;字體大小：18px；行高：50px；左邊距：10px; text-decoration:none;}
    div.slideBox div.tips 1.title a:hh{ text -decoration:underline !important;}
    div.slideBox div.tips div.nums{ 位置:absolute;右：0px；上：0px; height:100%;}
  nums a{ display:inline-block; >float:left/*對於IE.ADD.JENA.201206300844*/;寬度：20px；高度：20px；背景顏色：#FFF；文字縮排：-99999px；高度：20px；背景顏色：#FFF；文字縮排：-99999px； margin:15px 10px 0px 0px;}
    div.slideBox div.tips div.nums a.active{ background-color:#093;}


頁面配置：

頁面配置：

複製程式碼程式碼如下：

   
   
   
   


   

               

               
• 

                     "#" title="這裡是測試標題3">
            

• 
             

只要引入頁中並在頁中引入並調用選擇器).slideBox();面對實現如上效果，同時我們也可以在sliebox({})裡面指定操作，例如初始圖片，方向等。
這是前段時間的一個專案中用到了圖片輪播器插件，感覺還可以的可以直接拿來用。