jQuerybanner切换插件

作者：被盗不玩了 | 来源：互联网 | 2023-09-08 05:17

今天学写了一个基于jQuery焦点图切换插件，有不对的地方还请多多指教，不多说下面是代码：1、引jQuery库2、Html部分3、CSS部分4、JS插件部分5、引用插件6、全部

今天学写了一个基于jQuery焦点图切换插件，有不对的地方还请多多指教，不多说下面是代码：

1、引jQuery库

<script src="http://code.jquery.com/jquery-1.11.1.min.js">script>

2、Html部分


<div class="s_focus">
    <ul class="f_img">
        <li style="background-image:url(http://www.cnhippo.com/images/new_room.jpg);"><a href="#">a>li>
        <li style="background-image:url(http://www.cnhippo.com/images/christmas_day.jpg);"><a href="#">a>li>
        <li style="background-image:url(http://www.cnhippo.com/images/reg_banner.jpg);"><a href="#">a>li>
    ul>
div>

3、CSS部分

<style>
/*Test - Can be deleted*/
*    { margin:0; padding:0; list-style:none;}
body { padding-top:50px;}

/*CSS*/
.s_focus            { position:relative; z-index:1; width:100%; min-width:940px; height:350px; padding:1px 0; border:1px solid #d9d9d9; border-width:1px 0; overflow:hidden;}
.s_focus .f_img     { display:block; position:relative; z-index:1; width:100%; height:100%;}
.s_focus .f_dot     { display:block; position:absolute; z-index:3; left:50%; bottom:15px; width:100px; height:10px; overflow:hidden;}
.s_focus .f_d_bg    { position:absolute; z-index:2; width:100%; height:40px; left:0; bottom:1px; _bottom:0; background:#FFF; filter:alpha(opacity=30); opacity:0.3; box-shadow:0 -1px 3px #999;}
.f_img li         { display:none;  position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; background:#fff no-repeat center 0;}
.f_img li.on      { display:block;}
.f_img li a       { display:block; width:100%; height:100%;}
.f_dot a          { float:left; display:block; width:10px; height:100%; margin-right:10px; border-radius:50%; background:#ccc; filter:alpha(opacity=30); opacity:1; overflow:hidden;}
.f_dot a.on,
.f_dot a:hover    { background:#09f;}
.s_focus .f_prev,
.s_focus .f_next   { display:none; position:absolute; top:50%; filter:alpha(opacity=15); opacity:0.15; width:36px; height:70px; margin-top:-35px; background:#000; z-index:5; color:#fff; text-decoration:none; line-height:70px; text-align:center; font-family:"宋体"; font-size:18px;}
.s_focus .f_prev   { left:50px;}
.s_focus .f_next   { right:50px;}
.s_focus .f_next:hover,
.s_focus .f_prev:hover { filter:alpha(opacity=25); opacity:0.25;}
style>

4、JS插件部分

<script>
/***
 * Copyright (c) 2015 http://www.cnblogs.com/cymmint/
 * Ver: SFocus() 0.1
 * Date: 2015-01-05
 * Author: cymmint
 * Function: SFocus是基本jQuery的banner(焦点图)切换插件，可以通过参数配置Box宽高，
 * 点的大小、位置，是否显示Prev,Next,Dot以及Dot背景条，
 * 首次显示等几张banner等
 */
(function($){
    
    $.fn.SFocus = function(opts){
        
        var defaults = {
            oBoxWidth : "100%", //Silde width
            oBoxHeight: 350, //Silde heigh
            isOpenDBg : false, //open dot background bar
            isOpenDot : true, //open do
            isOpenPN  : true, //open prev/next
            dotWidth  : 10, //dot width
            dotHeight : 10, //dot heigh
            dotLeft   : "50%", //dot left offse
            dotBottom : 16, //dot bottom offse
            time      : 3500, //cut time interval
            onset     : 0, //Silde focus img onset index
            cutEvent  : "mouseenter" //Slide dot cut even
            
        };

        var opts = $.extend(defaults, opts);
        
        return this.each(function(){
            var obox     = $(this),
                img      = obox.find("ul.f_img li"),
                sum      = img.length,
                cur_id   = opts.onset >= sum ? 0 : opts.onset,
                new_id   = cur_id == sum-1 ? 0 : cur_id+1,
                T        = 0;

            //Html init 
            init(obox, sum, cur_id);

            //Dot cut
            if(opts.isOpenDot) {
                var dot = obox.find("div.f_dot a");

                dot.on(opts.cutEvent, function(){
                    clearInterval(T);
                    
                    if ($(this).hasClass("on")) {
                        return false;
                    }
                    cur_id = img.parent().find(".on").index();
                    new_id = $(this).index();
                    
                    cut(cur_id, new_id, img, dot);
                });
            }

            //Prev&Next cut
            if(opts.isOpenPN) {
                var prev = obox.find("a.f_prev"),
                    next = obox.find("a.f_next");

                prev.on("click", function(){
                    clearInterval(T);
                    cur_id = img.parent().find(".on").index();
                    new_id = cur_id - 1;
                    new_id = new_id < 0 ? sum-1 : new_id;
                    
                    cut(cur_id, new_id, img, dot);
                });
            
                next.on("click", function(){
                    clearInterval(T);
                    cur_id = img.parent().find(".on").index();
                    new_id = cur_id + 1;
                    new_id = new_id >= sum ? 0 : new_id;
                    
                    cut(cur_id, new_id, img, dot);
                });
            }
            
            obox.hover(function(){
                clearInterval(T);
                if(opts.isOpenPN) {
                    prev.show();
                    next.show();
                }
            }, function(){
                T = setInterval(function(){ auto(img, dot, sum);}, opts.time);
                if(opts.isOpenPN) {
                    prev.hide();
                    next.hide();
                }
            });
            
            //Slide run auto
            T = setInterval(function(){ auto(img, dot, sum);}, opts.time);
        });
        
        //Slide run auto
        function auto(img, dot, sum){
            var cur_id = img.parent().find(".on").index(),
                new_id = cur_id + 1;
                new_id = new_id >= sum ? 0 : new_id;

            cut(cur_id, new_id, img, dot);
        }
        
        //Slide cut
        function cut(cur_id, new_id, img, dot){
            if(opts.isOpenDot) {
                dot.removeClass("on").eq(new_id).addClass("on");
            }
            
            img.eq(cur_id).stop(true, false).fadeOut(300);
            img.eq(new_id).stop(true, true).fadeIn(300);
            img.removeClass("on").eq(new_id).addClass("on");
        }

        //Html init
        function init(obox, sum, cur_id){
            var htm = "",
                dot,
                img;

            if(opts.isOpenDBg) {
                htm = ‘‘;
            }
    
            if(opts.isOpenDot) {
                htm += ‘‘;
                for(var i=0; i<sum; i++) {
                    htm += i == cur_id ? ‘‘ : ‘‘;
                }
                htm += ‘‘;
            }
    
            if(opts.isOpenPN) {
                htm += ‘<>‘;
            }

            obox.append(htm);
            img = obox.find("ul.f_img");
            dot = obox.find("div.f_dot");

            if (!$.support.leadingWhitespace) {
                obox.find("a").attr("hidefocus", true);
            }
            obox.css({"width":opts.oBoxWidth, "height":opts.oBoxHeight});
            img.children().removeClass("on").eq(cur_id).addClass("on")
            dot.children().css({"width":opts.dotWidth, "height":opts.dotHeight});
            dot.css({"width":dot.children().eq(0).outerWidth(true) * sum, "height":opts.dotHeight, "left":opts.dotLeft, "bottom":opts.dotBottom, "marginLeft": -(dot.width()-10)/2});
        }
    }

})(jQuery);
script>

5、引用插件

<script>
$(function(){
    $("div.s_focus").SFocus({
        oBoxWidth : 500,
        oBoxHeight: 300
    });
});
script>

6、全部代码

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Focustitle>
<script src="http://code.jquery.com/jquery-1.11.1.min.js">script>
head>

<body>


<div class="s_focus">
    <ul class="f_img">
        <li style="background-image:url(http://www.cnhippo.com/images/new_room.jpg);"><a href="#">a>li>
        <li style="background-image:url(http://www.cnhippo.com/images/christmas_day.jpg);"><a href="#">a>li>
        <li style="background-image:url(http://www.cnhippo.com/images/reg_banner.jpg);"><a href="#">a>li>
    ul>
div>


<style>
/*Test - Can be deleted*/
*    { margin:0; padding:0; list-style:none; outline:none;}
body { padding-top:50px;}

/*CSS*/
.s_focus            { position:relative; z-index:1; width:100%; min-width:940px; height:350px; padding:1px 0; border:1px solid #d9d9d9; border-width:1px 0; overflow:hidden;}
.s_focus .f_img     { display:block; position:relative; z-index:1; width:100%; height:100%;}
.s_focus .f_dot     { display:block; position:absolute; z-index:3; left:50%; bottom:15px; width:100px; height:10px; overflow:hidden;}
.s_focus .f_d_bg    { position:absolute; z-index:2; width:100%; height:40px; left:0; bottom:1px; _bottom:0; background:#FFF; filter:alpha(opacity=30); opacity:0.3; box-shadow:0 -1px 3px #999;}
.f_img li         { display:none;  position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; background:#fff no-repeat center 0;}
.f_img li.on      { display:block;}
.f_img li a       { display:block; width:100%; height:100%;}
.f_dot a          { float:left; display:block; width:10px; height:100%; margin-right:10px; border-radius:50%; background:#ccc; filter:alpha(opacity=30); opacity:1; overflow:hidden;}
.f_dot a.on,
.f_dot a:hover    { background:#09f;}
.s_focus .f_prev,
.s_focus .f_next   { display:none; position:absolute; top:50%; filter:alpha(opacity=15); opacity:0.15; width:36px; height:70px; margin-top:-35px; background:#000; z-index:5; color:#fff; text-decoration:none; line-height:70px; text-align:center; font-family:"宋体"; font-size:18px;}
.s_focus .f_prev   { left:50px;}
.s_focus .f_next   { right:50px;}
.s_focus .f_next:hover,
.s_focus .f_prev:hover { filter:alpha(opacity=25); opacity:0.25;}
style>


<script>
$(function(){
    $("div.s_focus").SFocus({
        oBoxWidth : 500,
        oBoxHeight: 300
    });
});
script>

<script>
/***
 * Copyright (c) 2015 http://www.cnblogs.com/cymmint/
 * Ver: SFocus() 0.1
 * Date: 2015-01-05
 * Author: cymmint
 * Function: SFocus是基本jQuery的banner(焦点图)切换插件，可以通过参数配置Box宽高，
 * 点的大小、位置，是否显示Prev,Next,Dot以及Dot背景条，
 * 首次显示等几张banner等
 */
(function($){
    
    $.fn.SFocus = function(opts){
        
        var defaults = {
            oBoxWidth : "100%", //Silde width
            oBoxHeight: 350, //Silde heigh
            isOpenDBg : false, //open dot background bar
            isOpenDot : true, //open do
            isOpenPN  : true, //open prev/next
            dotWidth  : 10, //dot width
            dotHeight : 10, //dot heigh
            dotLeft   : "50%", //dot left offse
            dotBottom : 16, //dot bottom offse
            time      : 3500, //cut time interval
            onset     : 0, //Silde focus img onset index
            cutEvent  : "mouseenter" //Slide dot cut even
            
        };

        var opts = $.extend(defaults, opts);
        
        return this.each(function(){
            var obox     = $(this),
                img      = obox.find("ul.f_img li"),
                sum      = img.length,
                cur_id   = opts.onset >= sum ? 0 : opts.onset,
                new_id   = cur_id == sum-1 ? 0 : cur_id+1,
                T        = 0;

            //Html init 
            init(obox, sum, cur_id);

            //Dot cut
            if(opts.isOpenDot) {
                var dot = obox.find("div.f_dot a");

                dot.on(opts.cutEvent, function(){
                    clearInterval(T);
                    
                    if ($(this).hasClass("on")) {
                        return false;
                    }
                    cur_id = img.parent().find(".on").index();
                    new_id = $(this).index();
                    
                    cut(cur_id, new_id, img, dot);
                });
            }

            //Prev&Next cut
            if(opts.isOpenPN) {
                var prev = obox.find("a.f_prev"),
                    next = obox.find("a.f_next");

                prev.on("click", function(){
                    clearInterval(T);
                    cur_id = img.parent().find(".on").index();
                    new_id = cur_id - 1;
                    new_id = new_id < 0 ? sum-1 : new_id;
                    
                    cut(cur_id, new_id, img, dot);
                });
            
                next.on("click", function(){
                    clearInterval(T);
                    cur_id = img.parent().find(".on").index();
                    new_id = cur_id + 1;
                    new_id = new_id >= sum ? 0 : new_id;
                    
                    cut(cur_id, new_id, img, dot);
                });
            }
            
            obox.hover(function(){
                clearInterval(T);
                if(opts.isOpenPN) {
                    prev.show();
                    next.show();
                }
            }, function(){
                T = setInterval(function(){ auto(img, dot, sum);}, opts.time);
                if(opts.isOpenPN) {
                    prev.hide();
                    next.hide();
                }
            });
            
            //Slide run auto
            T = setInterval(function(){ auto(img, dot, sum);}, opts.time);
        });
        
        //Slide run auto
        function auto(img, dot, sum){
            var cur_id = img.parent().find(".on").index(),
                new_id = cur_id + 1;
                new_id = new_id >= sum ? 0 : new_id;

            cut(cur_id, new_id, img, dot);
        }
        
        //Slide cut
        function cut(cur_id, new_id, img, dot){
            if(opts.isOpenDot) {
                dot.removeClass("on").eq(new_id).addClass("on");
            }
            
            img.eq(cur_id).stop(true, false).fadeOut(300);
            img.eq(new_id).stop(true, true).fadeIn(300);
            img.removeClass("on").eq(new_id).addClass("on");
        }

        //Html init
        function init(obox, sum, cur_id){
            var htm = "",
                dot,
                img;

            if(opts.isOpenDBg) {
                htm = ‘‘;
            }
    
            if(opts.isOpenDot) {
                htm += ‘‘;
                for(var i=0; i<sum; i++) {
                    htm += i == cur_id ? ‘‘ : ‘‘;
                }
                htm += ‘‘;
            }
    
            if(opts.isOpenPN) {
                htm += ‘<>‘;
            }

            obox.append(htm);
            img = obox.find("ul.f_img");
            dot = obox.find("div.f_dot");

            if (!$.support.leadingWhitespace) {
                obox.find("a").attr("hidefocus", true);
            }
            obox.css({"width":opts.oBoxWidth, "height":opts.oBoxHeight});
            img.children().removeClass("on").eq(cur_id).addClass("on")
            dot.children().css({"width":opts.dotWidth, "height":opts.dotHeight});
            dot.css({"width":dot.children().eq(0).outerWidth(true) * sum, "height":opts.dotHeight, "left":opts.dotLeft, "bottom":opts.dotBottom, "marginLeft": -(dot.width()-10)/2});
        }
    }

})(jQuery);
script>

body>
html>

展开全部

jQuery banner切换插件

推荐阅读

main
[c++基础]STL

cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]

蜡笔小新 2024-11-13 13:22:43
main
自定义滚动条美化页面内容

当页面内容超出显示范围时，为了提升用户体验和页面美观，通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求，我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]

蜡笔小新 2024-11-12 17:12:24
main
Framework7：构建跨平台移动应用的高效框架

Framework7 是一个开源免费的框架，适用于开发混合移动应用（原生与HTML混合）或iOS&Android风格的Web应用。此外，它还可以作为原型开发工具，帮助开发者快速创建应用原型。 ... [详细]

蜡笔小新 2024-11-12 14:47:56
list
解决Bootstrap DataTable Ajax请求重复问题

在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]

蜡笔小新 2024-11-12 13:59:27
list
Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案

本文探讨了在使用Spark的map或flatMap算子将一个数据集转换为另一个数据集时，遇到的Schema变为Binary的问题，并提供了详细的解决方案。 ... [详细]

蜡笔小新 2024-11-12 08:06:20
list
未加载符号表，请使用“file”命令加载目标文件以进行调试。

在使用Eclipse进行调试时，如果遇到未解析的断点（unresolved breakpoint）并显示“未加载符号表，请使用‘file’命令加载目标文件以进行调试”的错误提示，这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件，以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息，从而实现有效的调试。 ... [详细]

蜡笔小新 2024-11-11 18:21:47
ip
深入解析浏览器内核与版本的发展历程

浏览器作为我们日常不可或缺的软件工具，其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程，帮助读者更好地理解这一关键技术组件，揭示其内部运作的奥秘。 ... [详细]

蜡笔小新 2024-11-11 13:34:37
ip
在各项条件尚未成熟时，务必谨慎使用border-box布局模式！！！

近日，我在处理一个复杂的前端问题时遇到了极大困扰。具体来说，我之前开发了一个功能丰富的纯jQuery代码的前端GridView控件，实现了多种功能和视觉效果，并在多个项目中表现良好。然而，最近在尝试应用 `border-box` 布局模式时，却遇到了意想不到的兼容性和性能问题。这提醒我们在条件尚未完全成熟的情况下，应谨慎使用 `border-box` 布局模式，以免引入不必要的复杂性和潜在的bug。 ... [详细]

蜡笔小新 2024-11-10 10:03:00
ip
解决DNS服务器配置转发无法解析的问题

本文详细介绍了如何解决DNS服务器配置转发无法解析的问题，包括编辑主配置文件和重启域名服务的具体步骤。 ... [详细]

蜡笔小新 2024-11-13 02:41:19
ip
数字资产交易平台量化交易系统开发

数字资产量化交易通过大数据分析，以客观的方式制定交易决策，有效减少人为的主观判断和情绪影响。本文介绍了几种常见的数字资产量化交易策略，包括搬砖套利和趋势交易，并探讨了量化交易软件的开发前景。 ... [详细]

蜡笔小新 2024-11-12 21:49:55
ip
Autofac高级应用实例解析

本文详细解析了Autofac在高级应用场景中的具体实现，特别是如何通过注册泛型接口的类来优化依赖注入。示例代码展示了如何使用 `builder.RegisterAssemblyTypes` 方法，结合 `typeof(IEventHandler).Assembly` 和 `Where` 过滤条件，动态注册所有符合条件的类，从而简化配置并提高代码的可维护性。此外，文章还探讨了这一方法在复杂系统中的实际应用及其优势。 ... [详细]

蜡笔小新 2024-11-11 15:48:02
ip
华为云对象存储系统配置指南

本指南详细介绍了如何利用华为云对象存储服务构建视频点播（VoD）平台。通过结合开源技术如Ceph、WordPress、PHP和Nginx，用户可以高效地实现数据存储、内容管理和网站搭建。主要内容涵盖华为云对象存储系统的配置步骤、性能优化及安全设置，为开发者提供全面的技术支持。 ... [详细]

蜡笔小新 2024-11-11 14:29:52
ip
VS2019 在创建 Windows 恢复点时出现卡顿问题及解决方法

在使用 Visual Studio 2019 时，有时会在创建 Windows 恢复点时遇到卡顿问题。这可能是由于频繁的自动更新导致的，每次更新文件大小可能达到 1-2GB。尽管现代网络速度较快，但这些更新仍可能对系统性能产生影响。本文将探讨该问题的原因，并提供有效的解决方法，帮助用户提升开发效率。 ... [详细]

蜡笔小新 2024-11-11 13:52:39
ip
飞秋软件的OA消息接口服务系统

为了提升单位内部沟通效率，我们开发了一套飞秋软件与OA系统的消息接口服务系统。该系统能够将OA系统中的审批、通知等信息自动同步至飞秋平台，确保员工在使用飞秋进行日常沟通的同时，也能及时获取OA系统的各类重要信息，从而实现无缝对接，提高工作效率。 ... [详细]

蜡笔小新 2024-11-11 13:44:09
ip
深入解析：Synchronized 关键字在 Java 中对 int 和 Integer 对象的作用与影响

深入探讨了 `Synchronized` 关键字在 Java 中对 `int` 和 `Integer` 对象的影响。尽管初看此题似乎简单，但其实质在于理解对象的概念。根据《Java编程思想》第二章的观点，一切皆为对象。本文详细分析了 `Synchronized` 关键字在不同数据类型上的作用机制，特别是对基本数据类型 `int` 和包装类 `Integer` 的区别处理，帮助读者深入理解 Java 中的同步机制及其在多线程环境中的应用。 ... [详细]

蜡笔小新 2024-11-11 13:13:17

被盗不玩了

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章