基于jquery的图片轮播 tab切换组件

目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动;none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失。
  Demo Address:http://demo.jb51.net/js/2012/sinaapp/


代码如下:

/**
* 巨无霸轮播
*/
$.fn.loopSlider = function(option) {
var setting = {
// 默认显示的顺序
initIndex: 1,
// 加在title节点上的样式
className: "current",
// 轮播方向,默认为x轴方向轮播
direct: "x",
// 上一张按钮
prevBtn: "",
// 下一张按钮
nextBtn: "",
// 上下翻页按钮禁用的样式
btnDisable: "disable",
// 按钮按下的样式
btnTouchClass: "",
// 自动轮播
auto: false,
// 自动轮播时间间隔
timeFlag: 4000,
// 轮播效果时间
scrollTime: 350,
// 轮播效果
effect: "scroll",
// 在只有一个轮播元素的时候是否隐藏滑动按钮
hideBtn: true,
// 是否循环轮播
cycle: true,
// 轮播的内容区的容器路径
contentContainer: "#imgScroll",
// 轮播的内容区的节点
contentChildTag: "li",
// 标题轮播区域的容器路径
titleContainer: "#titleScroll",
// 标题轮播区域的节点
titleChildTag: "li",
// 轮播的内容区的数组
cont: [],
// 轮播的标题区的数组
tabs: [],
// 当前轮播序号
current: 0,
// 定时器
ptr: "",
// 轮播回调函数,每次轮播调用,参数为当前轮播的序号
callback: function() {
return true;
}
}
if (option) {
$.extend(setting, option);
}
// 初始化当前调用类型的函数
setting.currentMethod = function() {
return true;
}
var boss = $(this);
// 如果不是第一个元素先轮播
if (setting.initIndex != 1) {
setting.current = setting.initIndex - 1;
}
// 获取轮播的节点列表
var childList = boss.find(setting.contentContainer + " " + setting.contentChildTag);
// 获取轮播标题节点列表
var titleList = boss.find(setting.titleContainer + " " + setting.titleChildTag);
// 保存内容区每一个轮播节点
setting.cont = childList;
// 保存标题的轮播节点
setting.tabs = titleList;
// 如果没有需要轮播的内容,直接返回
if (setting.cont.length == 0) {
return;
}
// 给内容区和标题区设置index属性
childList.each(function(index) {
$(this).attr("index", index);
titleList.eq(index).attr("index", index);
});
// 上下箭头
var nextBtn = boss.find(setting.nextBtn);
var prevBtn = boss.find(setting.prevBtn);
// 长度
var counts = childList.length;
// 轮播容器的父节点
var childParent = childList.parent();
var titleParent = titleList.parent();
if (childList.length < setting.initIndex) {
setting.current = 0;
}
// 初始化
doInit();
if (childList.length <= 1) {
return;
}
/**
* 处理无效果的切换
*/
var doScrollNone = {
process: function(i) {
childList.eq(i).css("display", "block").siblings().css("display", "none");
titleList.eq(i).addClass(setting.className).siblings().removeClass(setting.className);
// 记录当前显示的节点
setting.current = i;
// 调用回调函数
setting.callback(setting.current);
},
init: function() {
setting.currentMethod = doScrollNone;
bindEvent();
// 自动轮播
if (setting.auto) {
processAuto();
}
// 初始化的时候也调用回调函数
setting.callback(setting.current);
}
};
var doScrollXY = {
c_width: 0,
c_height: 0,
init: function() {
// 轮播元素的宽度
this.c_width = childList.width();
// 轮播元素的高度
this.c_height = childList.height();
// x轴方向轮播
if (setting.direct == "x") {
childParent.width(this.c_width * (childList.length > 1 ? counts + 1 : counts));
childParent.css("left", -this.c_width * (setting.current));
} else {
childParent.height(this.c_height * (childList.length > 1 ? counts + 1 : counts));
childParent.css("top", -this.c_height * (setting.current));
}
titleList.eq(setting.current).addClass(setting.className).siblings().removeClass(setting.className);
setting.currentMethod = doScrollXY;
// 绑定事件
bindEvent();
// 初始化的时候也调用回调函数
setting.callback(setting.current);
// 自动轮播
if (setting.auto) {
processAuto();
}
},
process: function(i, needFast) {
setting.current = i;
//alert(i)
if (setting.direct == "x") {
// 执行效果动画
childParent.animate({
left: "-" + (this.c_width * i)
},
(needFast ? 50 : setting.scrollTime),
function() {
if (setting.current == counts) {
doScrollXY.processMove("left", $(this));
}
if (setting.auto) {
processAuto();
}
});
} else {
childParent.animate({
top: "-" + (this.c_height * i)
},
(needFast ? 50 : setting.scrollTime),
function() {
if (setting.current == counts) {
doScrollXY.processMove("top", $(this));
}
if (setting.auto) {
processAuto();
}
});
}
if (i == counts) {
i = 0;
}
// 调用回调函数
setting.callback(setting.current);
titleList.eq(i).addClass(setting.className).siblings().removeClass(setting.className);
},
processMove: function(direct, node) {
var childs = node.children();
for (var i = 1; i < childs.length - 1; i++) {
var removeNode = childs.eq(i).remove();
node.append(removeNode);
}
var first = childs.eq(0).remove();
node.append(first);
node.css(direct, "0");
}
};
switch (setting.effect) {
case "none":
doScrollNone.init();
break;
case "scroll":
doScrollXY.init();
break;
}
// 一些初始化操作
function doInit() {
childParent.css("position", "relative");
if (!setting.cycle) {
prevBtn.removeClass(setting.btnDisable);
nextBtn.removeClass(setting.btnDisable);
if (setting.current == 0) {
prevBtn.addClass(setting.btnDisable);
}
if (setting.current == counts - 1) {
nextBtn.addClass(setting.btnDisable);
}
}
// 只有一个元素,并且需要隐藏按钮
if (childList.length <= 1 && setting.hideBtn) {
prevBtn.hide();
nextBtn.hide();
}
// 克隆第一个元素到最后
if (childList.length > 1) {
var cloneNode = childList.eq(0).clone();
cloneNode.attr("index", counts);
cloneNode.appendTo(childParent);
}
}
/**
* 绑定轮播事件
*/
function bindEvent() {
nextBtn && nextBtn.bind("click",
function(event) {
// 如果按钮已经被禁用
if ($(this).hasClass(setting.btnDisable)) {
return;
}
var cur = setting.current;
if (cur >= 0) {
prevBtn.removeClass(setting.btnDisable);
}
if (cur == counts - 2 && !setting.cycle) {
$(this).addClass(setting.btnDisable);
}
if (cur == counts) {
setting.current = 1;
} else if (cur == counts - 1) {
// 轮播到最后一个
setting.current = counts;
} else {
setting.current = cur + 1;
}
if (setting.ptr) {
clearInterval(setting.ptr);
setting.ptr = null;
}
$(this).addClass(setting.btnTouchClass);
setting.currentMethod.process(setting.current);
});
prevBtn && prevBtn.bind("click",
function() {
if ($(this).hasClass(setting.btnDisable)) {
return;
}
var cur = setting.current;
if (cur <= counts - 1) {
nextBtn.removeClass(setting.btnDisable);
}
if (cur == 1 && !setting.cycle) {
$(this).addClass(setting.btnDisable);
}
setting.current = cur == 0 ? counts - 1 : cur - 1;
if (setting.ptr) {
clearInterval(setting.ptr);
setting.ptr = null;
}
$(this).addClass(setting.btnTouchClass);
var fast = false;
if (cur == 0) {
fast = true;
}
setting.currentMethod.process(setting.current, fast);
});
titleParent && titleParent.bind("click",
function(e) {
var element = $(e.target);
// 得到轮播节点
while (element[0].tagName != titleList[0].tagName) {
element = element.parent();
}
if (setting.ptr) {
clearInterval(setting.ptr);
setting.ptr = null;
}
var index = parseInt(element.attr("index"), 10);
if (index != 0) {
prevBtn.removeClass(setting.btnDisable);
} else if (!setting.cycle) {
prevBtn.addClass(setting.btnDisable);
}
if (index != counts - 1) {
nextBtn.removeClass(setting.btnDisable);
} else if (!setting.cycle) {
nextBtn.addClass(setting.btnDisable);
}
setting.currentMethod.process(index);
});
childParent[0].ontouchstart = handleTouchStart;
// 触摸屏幕事件
function handleTouchStart(event) {
var element = $(event.target);
// 得到标题节点
while (element[0].tagName != childList[0].tagName) {
element = element.parent();
}
if (event.targetTouches.length == 0) {
return;
}
var touch = event.targetTouches[0];
var startX = touch.pageX;
var startY = touch.pageY;
var moveDirect = "";
var currentPosition = setting.direct == "x" ? childParent.css("left") : childParent.css("top");
if (setting.ptr) {
clearInterval(setting.ptr);
setting.ptr = null;
}
// 手指滑动事件
childParent[0].ontouchmove = handleTouchMove;
function handleTouchMove(moveEvent) {
var movetouch = moveEvent.targetTouches[0];
if (setting.direct == 'x') {
var moveX = movetouch.pageX;
var moveY = movetouch.pageY;
var x = moveX - startX;
var y = moveY - startY;
// 这里的目的是在左右滑动图片的时候,阻止浏览器的默认事件,但是如果是上下滑动的情况,一般是滑动滚动条,不能直接就阻止浏览器默认事件,不然会导致用户在上下滑动的时候页面停止的情况,这里设置的是在x轴方向要比在Y轴方向滑动至少多10的像素,可以有效的避免上述情况发生
if (Math.abs(x) - Math.abs(y) > 10) {
// 阻止默认的事件
moveEvent.preventDefault();
childParent.css("left", parseFloat(currentPosition) + x);
moveDirect = x > 0 ? "sub": "add";
} else {
return;
}
} else {
// Y轴方向滚动
moveEvent.preventDefault();
var moveY = touch.pageY;
var y = moveY - startY;
childParent.css("top", parseFloat(currentPosition) + y);
moveDirect = y > 0 ? "sub": "add";
}
childParent[0].ontouchend = handleTouchEnd;
}
//手指离开屏幕
function handleTouchEnd() {
//根据手指移动的方向,判断下一个要显示的节点序号
var fast = false;
if (moveDirect == "add") {
if (setting.current == counts) {
setting.current = 1;
} else {
setting.current = setting.current + 1;
}
} else {
if (setting.current == 0) {
setting.current = counts - 1;
fast = true;
} else {
setting.current = setting.current - 1;
}
}
// 调用对应的处理函数
setting.currentMethod.process(setting.current, fast);
childParent[0].ontouchend = null;
childParent[0].ontouchmove = null;
}
}
}
/**
* 自动轮播
*/
function processAuto() {
if (setting.ptr) {
clearInterval(setting.ptr);
setting.ptr = null;
}
// 设置轮播定时器
setting.ptr = setInterval(function() {
if (setting.current == counts) {
setting.current = 1;
} else if (setting.current == counts - 1) {
// 轮播到最后一个
setting.current = counts;
} else {
setting.current = setting.current + 1;
}
var index = setting.current;
if (index != 0) {
prevBtn.removeClass(setting.btnDisable);
} else if (!setting.cycle) {
prevBtn.addClass(setting.btnDisable);
}
if (index != counts - 1) {
nextBtn.removeClass(setting.btnDisable);
} else if (!setting.cycle) {
nextBtn.addClass(setting.btnDisable);
}
setting.currentMethod.process(setting.current);
},
setting.timeFlag);
}
// 返回一个函数,可以在调用返回函数,指定下一次需要轮播的图片的序号,一般用在点击一个小图,然后需要查看大图的情况下,那么就只需要给大图绑定一次轮播事件,再点击某一张小图的时候只需要调用该函数,把对应的序号传入即可
return function(index) {
if (index < 0) {
index = 0;
} else if (index >= counts) {
index = counts - 1;
}
setting.currentMethod.process(index);
}
}

时间: 2012-07-17

jQuery图片轮播的具体实现

效果如下: 先看一看html代码,以及对应的css代码: 复制代码 代码如下: <div id="scrollPics">    <ul class="slider" >        <li><img src="images/ads/1.gif"/></li>        <li><img src="images/ads/2.gif"/>&

原生js和jquery实现图片轮播淡入淡出效果

图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

Jquery代码实现图片轮播效果(一)

文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示         下载源码 首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播

jquery+css实现简单的图片轮播效果

开发过程中需要用到图片轮播的插件,在网上找了几个插件之后还是决定自己码一个,比较简洁的功能,以后说不定还会有用. ps: 功能比较简单,整个框并不能根据图片的大小自动调节,这里所用的图片是1170*500的,如果需要改成其他大小的图片,自行修改.pic-list下img的宽度. .pic-list中的宽度为整个横幅的宽度,如果需要轮播的图片数量很多,.pic-list的宽度应大于数量*单张宽度, html <div class="banner"> <!--第一张图片为

jQuery手动点击实现图片轮播特效

本文写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等. 下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边的大div设置的宽度为图片的宽度,超出大div宽度的都需要隐藏,但是对于盛放图片的小div设置宽度为2000px,大一点方便四张图左浮动布局 (3)当数字按钮点击时,获取按钮的

12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

jQuery插件slicebox实现3D动画图片轮播切换特效

漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度.autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码. 使用方法: 1.加载插件和jQuery <link type="text/css" rel="stylesheet&

基于JQuery的实现图片轮播效果(焦点图)

完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu

基于jQuery实现左右图片轮播(原理通用)

本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下 运行效果图: 重点!!! 实现原理: 通过判断index值的大小变化来判断图片左移还是右移.通过控制图片的left值,来达到一个轮播的效果. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <scrip

jQuery实现的图片轮播效果完整示例

本文实例讲述了jQuery实现的图片轮播效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ list-

用jQuery实现圆点图片轮播效果

图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : -------------------------------------------------------------------------------- 自动轮播: 将一个用于放置图片素材的与显示框同高度的大div放入显示框,将图片素材放入大的div中,通过jquery的animate()方法改变大div相对

jQuery简单自定义图片轮播插件及用法示例

本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

纯javaScript、jQuery实现个性化图片轮播【推荐】

纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position:relative 会导致自身位置的相对变化,而不会影响其他元素的位置.大小的变化.使得使用了position:absolute 元素相对于画布位置进行定位: absolute元素脱离了文档结构,产生破坏性,导致父元素坍塌,float元素也会脱离文档结构,absolute元素会悬浮在页面上方,遮挡其他部分显示,

基于vue.js实现图片轮播效果

轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$

JQuery悬停控制图片轮播——代码简单

jquery实现的鼠标悬停图片自动轮播效果,当把鼠标悬停到图片时,图像就会不断循环播放,速度非常快,效果非常逼真,就和在放武侠片一样,使用了jquery实现,下面小编给大家分析jq悬停控制图片轮播,请看小面的效果图. 在线预览          源码下载 具体实现的代码如下: <!-- 轮播广告 --> <div id="banner_tabs" class="flexslider"> <ul class="slides&qu

jQuery动画效果图片轮播特效

从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画.先来看看这一节所介绍的特效:传统轮播. 一.需求分析 1. 提供很多尺寸相等的图片,一排紧挨着显示. 2. 左右有两个切换按钮,用来控制显示上一张还是下一张. 3. 右下方有指示器"小圈圈",用来提示显示到第几个图片:也可以点击它,进行图片的切换. 4. 每隔一个固定的时间,图片会自动滚动. 5. 当鼠标放到图片上面的时候,会停止自动滚动:当鼠标离开后,再经过固定间隔时间后,又会自动播放. 二.代码剖析 1. 用htm

jQuery插件实现图片轮播特效

好了废话不多说了,先看看效果图. HTML部分: <div class="slider"> <div class="ul-box"> <ul> <li><a href="javascript:;"><img src="img/1.jpg"/></a></li> <li><a href="javascrip