jQuery焦点图切换特效插件封装实例


Posted in Javascript onAugust 18, 2013

网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片。一般多使用在网站首页版面或频道首页版面,因为是通过图片的形式,所以有一定的吸引性、视觉吸引性。容易引起访问者的点击,据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字,转化率高于文字标题5倍。由此看来焦点图的能让游客对企业的第一印象大大提升,下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图。如下图所示:

jQuery焦点图切换特效插件封装实例

可添加多个 图片,设定图片链接,导航随鼠标移动切换图片,在发布文章的时候把图片压缩了有点失真。

使用本特效首先需要引入对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 = $('<div class="tips"></div>').css('opacity', 0.6).appendTo(wrapper);
                var title = $('<div class="title"></div>').html(function () {
                    var active = ul.find('li.active').find('a'),
                    text = active.attr('title'),
                    href = active.attr('href');
                    return $('<a>').attr('href', href).text(text)
                }).appendTo(tips);
                var nums = $('<div class="nums"></div>').hide().appendTo(tips);
                lis.each(function (i, n) {
                    var a = $(n).find('a'),
                    text = a.attr('title'),
                    href = a.attr('href'),
                    css = '';
                    i == settings.startIndex && (css = 'active');
                    $('<a>').attr('href', href).text(text).addClass(css).css('borderRadius',
settings.clickBarRadius + 'px').mouseover(function () {
    $(this).addClass('active').siblings().removeClass('active');
    ul.find('li:eq(' + $(this).index() + ')').addClass('active').siblings
().removeClass('active');
    start();
    stop()
}).appendTo(nums)
                });
                if (settings.hideClickBar) {
                    tips.hover(function () {
                        nums.animate({
                            top: '0px'
                        },
                        'fast')
                    },
                    function () {
                        nums.animate({
                            top: tips.height() + 'px'
                        },
                        'fast')
                    });
                    nums.show().delay(2000).animate({
                        top: tips.height() + 'px'
                    },
                    'fast')
                } else {
                    nums.show()
                }
            };
            lis.size() > 1 && start()
        };
        var start = function () {
            var active = ul.find('li.active'),
            active_a = active.find('a');
            var index = active.index();
            if (settings.direction == 'left') {
                offset = index * li_width * -1;
                param = {
                    'left': offset + 'px'
                }
            } else {
                offset = index * li_height * -1;
                param = {
                    'top': offset + 'px'
                }
            };
            wrapper.find('.nums').find('a:eq(' + index + ')').addClass('active').siblings().removeClass
('active');
            wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr
('title'));
            ul.stop().animate(param, settings.duration * 1000, settings.easing,
            function () {
                active.removeClass('active');
                if (order_by == 'ASC') {
                    if (active.next().size()) {
                        active.next().addClass('active')
                    } else {
                        order_by = 'DESC';
                        active.prev().addClass('active')
                    }
                } else if (order_by == 'DESC') {
                    if (active.prev().size()) {
                        active.prev().addClass('active')
                    } else {
                        order_by = 'ASC';
                        active.next().addClass('active')
                    }
                }
            });
            wrapper.data('timeid', window.setTimeout(start, settings.delay * 1000))
        };
        var stop = function () {
            window.clearTimeout(wrapper.data('timeid'))
        };
        wrapper.hover(function () {
            stop()
        },
        function () {
            start()
        });
        var imgLoader = new Image();
        imgLoader.onload = function () {
            imgLoader.onload = null;
            init()
        };
        imgLoader.src = firstPic.attr('src')
    }
})(jQuery);

下面是图片焦点图的css样式;
div.slideBox{ position:relative;height:300px; overflow:hidden; margin:0 auto;}
    div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;}
    div.slideBox ul.items li{ float:left; background:none; list-style:none; padding:0px; margin:0px;}
    div.slideBox ul.items li a{ float:left; line-height:normal !important; padding:0px !important; border:none/*For IE.ADD.JENA.201206300844*/;}
    div.slideBox ul.items li a img{ margin:0px !important; padding:0px !important; display:block; border:none/*For IE.ADD.JENA.201206300844*/;}
    div.slideBox div.tips{ position:absolute; bottom:0px; width:100%; height:50px; background-color:#000; overflow:hidden;}
    div.slideBox div.tips div.title{ position:absolute; left:0px; top:0px; height:100%;}
    div.slideBox div.tips div.title a{ color:#FFF; font-size:18px; line-height:50px; margin-left:10px; text-decoration:none;}
    div.slideBox div.tips div.title a:hover{ text-decoration:underline !important;}
    div.slideBox div.tips div.nums{ position:absolute; right:0px; top:0px; height:100%;}
    div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*For IE.ADD.JENA.201206300844*/; width:20px; height:20px; background-color:#FFF; text-indent:-99999px; margin:15px 10px 0px 0px;}
    div.slideBox div.tips div.nums a.active{ background-color:#093;}

页面配置:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/sliderbox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".slideBox").slideBox();
        })
    </script>
</head>
<body>
    <div class="slideBox" >
                <ul class="items">
                <li><a href="#" title="这里是测试标题一"><img src="/image/1.png" width="1000" height="300"></a></li>
                <li><a href="#" title="这里是测试标题2"><img src="/image/2.png" width="1000" height="300"></a></li>
                <li><a href="#" title="这里是测试标题3"><img src="/image/3.png" width="1000" height="300"></a></li>
                <li><a href="#" title="这里是测试标题4"><img src="/image/4.png" width="1000" height="300"></a></li>
                <li><a href="#" title="这里是测试标题5"><img src="/image/5.png" width="1000" height="300"></a></li>
            </ul>
</div>
</body>
</html>

只需引入js并在页面中调用$(选择器).slideBox();便可实现如上效果,同时我们也可以在sliebox({})里面指定操作,比如起始图片,方向等。

这个是在前段时间一个项目中用到的图片轮播器插件,感觉还可以的可以直接拿来用。

Javascript 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
js实现点击烟花特效
Oct 14 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 #Javascript
实测jquery data()如何存值
Aug 18 #Javascript
js兼容的placeholder属性详解
Aug 18 #Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 #Javascript
jquery验证表单中的单选与多选实例
Aug 18 #Javascript
JS+CSS实现一个气泡提示框
Aug 18 #Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 #Javascript
You might like
jQuery 源码分析笔记
2011/05/25 PHP
如何判断php数组的维度
2013/06/10 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
微信JS接口大全
2016/08/25 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
python关闭windows进程的方法
2015/04/18 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
python sorted方法和列表使用解析
2019/11/18 Python
django框架两个使用模板实例
2019/12/11 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
列车长先进事迹材料
2014/01/25 职场文书
环保倡议书怎么写
2014/05/16 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
计划生育个人总结
2015/03/02 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python