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 相关文章推荐
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Vue动态获取width的方法
Aug 22 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
JS实现可以用键盘方向键控制的动画
Dec 11 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
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js CSS操作方法集合
2008/10/31 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
python调用shell的方法
2013/11/20 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
体现团队精神的口号
2014/06/06 职场文书
倡导文明标语
2014/06/16 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技