网站横幅切换jquery 插件

最近做一个web项目，站点首页需要像百度统计页面类似的切换横幅，有兴趣的可以先看看它的效果，这样就比较容易理解为什么我单独做个插件。其实类似的 jquery 插件网上类似的多的去了，随便网上下了两做了个demo 演示一下，效果不错吗！：）我是在全屏的状态下看的，效果还行，当把屏幕切小之后问题就出来了，屏幕小了之后图片的后面部分显示不出来了，本来的效果应该是如果屏幕小了应该把图片两边不重要的部分隐藏掉，但是由于网上的插件都是直接生成的 img 元素，我的网站页面body元素固定宽度，居中的，所以出现前面说的问题。

怎么办呢，本来想在别的插件基础上改一下，后来看改动比较多，干脆自己写个算了，以后用起来也方便。

我的思路是，首先要实现上面的效果不用 img 元素，我选择了用 span 元素给它添加背景图片，显示方式为 inline-block，这样比较容易。

由于需要切换 span 定位方式为绝对定位，外面包一层 div容器定位方式为 relative 这样在切换的时候只要把要显示的 span 设置为 display: block; ，其余的全部设置为 display: none; 切换就解决了。

然后就是通用性问题，给插件留下灵活的配置项跟事件接口。想了想大概就需要几项吧。

设置项

图片切换间隔时间
动画完成时间
是否自动切换

事件接口

图片切换完成事件
切换到最后一张图片
插件加载完成

思路理清了，下面奉上插件代码：

  1 /*
  2 * 横幅切换插件
  3 * 作者：     封浩
  4 * 创建日期： 2015-04-03
  5 * 版本：     v1.0
  6 */
  7 (function ($) {
  8     var mySlider = function (element, options) {
  9         var settings = $.extend({}, $.fn.switchImg.defaults, options);
 10         var variables = {
 11             currentIndex: 0,
 12             nextIndex: 0,
 13             total: 0,
 14             paused: true, //当前切换状态是否停止
 15             imgHeight: 0,
 16             operation:"+"//控制移动方向
 17         };
 18
 19         var slider = $(element);
 20
 21         //图片切换容器
 22         var sliderContent = $('<div></div>').addClass('nivo-main').width(slider.width());
 23         //小圆点容器
 24         var controlNav = $('<div></div>').addClass('nivo-controlNav').attr("data-stop", "true");
 25         //左右切换按钮容器
 26         var btnContent = '<div class="nivo-NextContent"><a class="nivo-prevNav" data-opt="-">前进</a><a class="nivo-nextNav" data-opt="+">后退</a><div style="clear: both;"></div></div>';
 27
 28         var bodyWidth = $("body").width();
 29         var dataDiv = slider.find("div:first-child");
 30         var self = this;
 31         var images = dataDiv.find("img");
 32         images.each(function (i) {
 33             var child = $(this);
 34             var link = child.attr("data-link");
 35             var src = child.attr("src");
 36             var height = "0", active = "", display = 'inline-block';
 37             if (i == 0) {
 38                 variables.imgHeight = height = child.height() === 0 ? child.attr(height) : child.height();
 39                 active = "active";
 40             } else {
 41                 bodyWidth = 0;
 42                 display = "none";
 43             }
 44
 45             if ($.trim(link) != "") {
 46                 sliderContent.append('<a href="' + link + '" target="_blank"><span style=\"background-image: url(' + src + '); width: ' + bodyWidth + 'px;position: Absolute;height:' + height + 'px;display:' + display + ';" data-bgImg="' + src + '"></span></a>');
 47             } else {
 48                 sliderContent.append('<span style=\"background-image: url(' + src + '); width: ' + bodyWidth + 'px;position: Absolute;height:' + height + 'px;display:' + display + ';" data-bgImg="' + src + '"></span>');
 49             }
 50             controlNav.append('<a class="nivo-control ' + active + '" rel="' + i + '">' + i + '</a>');
 51             variables.total++;
 52         });
 53         dataDiv.hide();
 54
 55         //加载前事件
 56         settings.afterLoad();
 57         slider.append(btnContent);
 58         slider.append(sliderContent);
 59         slider.append(controlNav);
 60
 61         $(window).resize(function () {
 62             var width = $("body").width();
 63             slider.children('.nav-main').width(width);
 64             sliderContent.find("span:eq(" + variables.currentIndex + ")").css({ width: width });
 65         });
 66
 67         initEvent();
 68         var timer = 0;
 69         if (images.length > 1 && settings.autoStart) {
 70             initTime();
 71         }
 72
 73         var toNext = function () {
 74             if (variables.nextIndex < 0) {
 75                 variables.nextIndex = variables.total - 1;
 76                 settings.lastSlide();
 77             } else if (variables.nextIndex > variables.total - 1) {
 78                 variables.nextIndex = 0;
 79                 settings.lastSlide();
 80             }
 81             var nextImg = sliderContent.find("span:eq(" + variables.nextIndex + ")");
 82             var currentImg = sliderContent.find("span:eq(" + variables.currentIndex + ")");
 83
 84             sliderContent.find("span:eq(" + variables.nextIndex + ")").css({ height: variables.imgHeight, position: 'absolute', width: $("body").width(), top: 0, 'z-index': 4 });
 85
 86             currentImg.stop(true, true);
 87             nextImg.stop(true, true);
 88
 89             //淡入淡出效果
 90             currentImg.fadeOut(settings.animateTime);
 91             nextImg.fadeIn(settings.animateTime, settings.slideshowEnd);
 92             controlNav.find("a").removeClass("active");
 93             controlNav.find("a:eq(" + variables.nextIndex + ")").addClass("active");
 94             variables.currentIndex = variables.nextIndex;
 95         };
 96
 97         //开始切换
 98         var switchStart = function (operator) {
 99             stop();
100             if (operator == "+") {
101                 variables.nextIndex = variables.currentIndex + 1;
102             } else if (operator == "-") {
103                 variables.nextIndex = variables.currentIndex - 1;
104             }
105             toNext();
106         }
107
108         function initEvent() {
109             //小点
110             $(".nivo-control", slider).mouseover(function () {
111                 var index = parseInt($(this).attr("rel"));
112                 variables.nextIndex = index;
113                 switchStart("");
114             }).mouseout(function () {
115                 initTime(variables.operation);
116             });
117
118             //图片
119             $("span", sliderContent).mouseout(function () {
120                 initTime(variables.operation);
121             }).mouseover(function () {
122                 stop();
123             });
124
125             //上一张,下一张
126             $(".nivo-NextContent a", slider).click(function () {
127                 variables.operation = $(this).attr("data-opt");
128                 settings.autoStart = true;
129                 switchStart(variables.operation);
130             }).mouseout(function () {
131                 initTime(variables.operation);
132             });
133         }
134
135         function initTime(operator) {
136             if (variables.paused && settings.autoStart){
137                 timer = setInterval(function () {
138                     if (operator == "-") {
139                         variables.nextIndex--;
140                     } else {
141                         variables.nextIndex++;
142                     }
143                     toNext();
144                 }, settings.pauseTime);
145                 variables.paused = false;
146             }
147         }
148
149         var stop = function () {
150             clearInterval(timer);
151             variables.paused = true;
152         };
153
154         return this;
155     };
156
157     $.fn.switchImg = function (options) {
158         return this.each(function () {
159             var element = $(this);
160             if (element.data('data-switch')) return element.data('data-switch');
161             var switchObj = new mySlider(this, options);
162             element.data('data-switch', switchObj);
163         });
164     };
165
166
167     $.fn.switchImg.defaults = {
168         pauseTime: 3000,    //图片切换间隔时间
169         animateTime: 2000,  //动画完成时间
170         autoStart: true,    //是否自动滚动
171         slideshowEnd: function () { }, //图片切换完成
172         lastSlide: function () { },    //切换到最后一张图片
173         afterLoad: function () { }     //插件加载完成
174     };
175
176 })(jQuery);

View Code

调用的时候有几点需要注意的

切换横幅插件数据源必须安装下面的结构书写。
如果想给生成的横幅添加超链接，必须在 img 元素里添加 data-link 属性并指定链接地址。
如果在在 img 元素里添加 height 属性，生成的横幅高度以 height 值为准，否则以第一个图片高度为准。

　　　　<div>

</div>

页面调用示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/jquery-1.7.1.min.js"></script><script type="text/javascript" src="../Scripts/switch/switch.js"></script><link href="../Scripts/switch/default/default.css" rel="stylesheet" /><style type="text/css">.body {width: 961px;margin: auto;}</style><script type="text/javascript">$(function () {$("#slider").switchImg({pauseTime: 3000,    //图片切换间隔时间
                animateTime: 2000,  //动画完成时间
                autoStart: false,   //是否自动切换
                afterLoad: function () {//alert("开始加载");
                },slideshowEnd: function () {//图片切换效果完成//alert("切换完成");
                },lastSlide: function () {//alert("切换到最后一张");
                }});})</script>
</head>
<body> <div id="slider" class="nivoSlider"><div><img src="../images/2_02.png" height="399" alt="" /><img src="../images/22.png" alt="" /><img src="../images/33.png" alt="" data-link="http://www.baidu.com" /><img src="../images/1.jpg" alt="" /></div></div></body>
</html>

View Code

插件样式

body {padding: 0;margin: 0;
}.nivoSlider {position: relative;
}.nivo-main {position: relative;height: 399px;
}.nivo-main span {background-position: center top;display: inline-block;
}.nivoSlider .nivo-prevNav, .nivoSlider .nivo-nextNav {cursor: pointer;
}.nivoSlider .nivo-controlNav {padding: 0;position: relative;text-align: center;top: -50px;z-index: 100;
}.nivoSlider .nivo-controlNav .nivo-control {background: url("bullets.png") no-repeat scroll 0 0 transparent;border: 0 none;display: inline-block;height: 22px;margin: 0 2px;text-indent: -9999px;width: 22px;
}.nivoSlider .nivo-controlNav .active {background: url("bullets.png") no-repeat scroll 0 -22px transparent;
}.nivoSlider .nivo-NextContent {position: relative;top: 190px;
}.nivoSlider .nivo-NextContent a {background: url("arrows.png") no-repeat scroll 0 0 transparent;border: 0 none;display: block;height: 30px;text-indent: -9999px;width: 30px;cursor: pointer;position: absolute;z-index: 9;
}.nivoSlider a.nivo-nextNav {background-position: 100% 50%;right: 20px;float: left;
}.nivoSlider a.nivo-prevNav {background-position: 0 50%;left: auto;float: right;left: 20px;
}

View Code

为了方便大家使用，我把源码打包放到云盘上，欢迎大家下载试用

转载于:https://www.cnblogs.com/fengh/p/4398808.html

网站横幅切换jquery 插件相关推荐

提升你网站水平的 jQuery 插件推荐
jQuery是一个优秀JavaScript库,它简化了HTML文档遍历,事件处理,动画和Ajax交互. jQuery的确改变了很多人写JavaScript的方式.如今,有很多现成的jQuery插件可供 ...
网站开发常用jQuery插件总结(四）验证插件validation
在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验 ...
网站开发常用jQuery插件总结(15)上传插件blueimp
在介绍这个插件之前,先吐槽一下.这个插件功能很强大.带有的功能有:上传(单个文件或批量文件),自动上传或点击按钮上传,上传前缩略图显示,判断文件格式,上传前的文件操作,上传时进度条显示等功能.如果你用 ...
FlexSlider图片轮播切换jQuery插件
下载地址 flexSlider是一款强大的图片轮播插件.参数说明animation: "slide", // String: ["fade" ...
前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
文章目录 1 JQuery动画效果 1. 基本效果 2. 滑动效果 3 淡入淡出效果 4 自定义动画 5 动画控制 6 设置 7 事件 7-1 常用事件 7-2 事件绑定 7-3 移除事件 7-4 阻 ...
20款效果非常棒的 jQuery 插件分享
这篇文章向大家推荐20款效果非常棒的 jQuery 插件.jQuery 是一个非常优秀的JavaScript库,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,同时也改变了很多人编写 ...
帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）
自适应设计(Responsive Layouts)是时下网页设计领域最热门的话题之一,自适应设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.下面是收集 ...
jQuery插件综合应用(四)头像设置
一.操作流程会员点击头像设置,弹出一个层,在层中,有上传图片的按钮,用户点击按钮上传图片,图片在服务器端按大小压缩保存(方便剪切).保存后,在前端显示,然后用户可修剪图片.选择图片区域,点击提交,保 ...
jQuery 插件安装
我是表哥Harker,表妹我来咯~ jQuery 基本上就介绍完了,记住 jQuery 是在原始的 JS 上封装了一部分的功能能更加方便的出处理一些东西,如排他思想,链式编程很方便吧,但 jQuery ...
mplayer-php,jQuery MPlayer网站音乐播放器插件
jQuery MPlayer网站音乐播放器插件这是一款2017年贺新春版的红色喜庆音乐播放器代码,jQuery MPlayer网站音乐播放器插件下载. 注意:演示效果在左下角收起来了,别以为没演示! ...

网站横幅切换jquery 插件

网站横幅切换jquery 插件相关推荐

最新文章

热门文章