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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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版(1)
2006/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
node后端服务保活的实现
2019/11/10 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python对json的相关操作实例详解
2017/01/04 Python
python多任务及返回值的处理方法
2019/01/22 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
卖车协议书范例
2014/09/16 职场文书
2014年后勤工作总结
2014/11/18 职场文书
《西门豹》教学反思
2016/02/23 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Python道路车道线检测的实现
2021/06/27 Python
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python