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切换插件

推荐阅读

php
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
sum
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
php
动态规划算法的基本步骤及最长递增子序列问题详解

本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]

蜡笔小新 2023-12-13 15:38:19
php
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
php
指针的引用以及在什么情况下使用指针的引用

本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ... [详细]

蜡笔小新 2023-12-13 12:54:29
php
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
php
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03
php
解析GRE报文长度的方法及实现步骤

本文介绍了一种解析GRE报文长度的方法，通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ... [详细]

蜡笔小新 2023-12-12 20:55:05
php
PDF内容编辑的两种小方法，你知道怎么操作吗？

本文介绍了两种PDF内容编辑的方法：迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器，用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC，则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]

蜡笔小新 2023-12-12 19:37:50
php
CentOS 6.5安装VMware Tools及共享文件夹显示问题解决方法

本文介绍了在CentOS 6.5上安装VMware Tools及解决共享文件夹显示问题的方法。包括清空CD/DVD使用的ISO镜像文件、创建挂载目录、改变光驱设备的读写权限等步骤。最后给出了拷贝解压VMware Tools的操作。 ... [详细]

蜡笔小新 2023-12-12 18:18:49
php
深入理解CSS中的margin属性及其应用场景

本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]

蜡笔小新 2023-12-12 18:01:10
php
Redis底层数据结构之压缩列表的介绍及实现原理

本文介绍了Redis底层数据结构之压缩列表的概念、实现原理以及使用场景。压缩列表是Redis为了节约内存而开发的一种顺序数据结构，由特殊编码的连续内存块组成。文章详细解释了压缩列表的构成和各个属性的含义，以及如何通过指针来计算表尾节点的地址。压缩列表适用于列表键和哈希键中只包含少量小整数值和短字符串的情况。通过使用压缩列表，可以有效减少内存占用，提升Redis的性能。 ... [详细]

蜡笔小新 2023-12-12 16:06:05
php
django视图函数的使用方法

本文介绍了django中视图函数的使用方法，包括如何接收Web请求并返回Web响应，以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]

蜡笔小新 2023-12-12 16:02:59
php
利用中间件模式简化代码逻辑

在编写业务代码时，常常会遇到复杂的业务逻辑导致代码冗长混乱的情况。为了解决这个问题，可以利用中间件模式来简化代码逻辑。中间件模式可以帮助我们更好地设计架构和代码，提高代码质量。本文介绍了中间件模式的基本概念和用法。 ... [详细]

蜡笔小新 2023-12-12 15:08:23
php
C#导入、导出功能

导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]

蜡笔小新 2023-12-12 14:34:29

被盗不玩了

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

Tags | 热门标签

RankList | 热门文章