$.slide( container, contentCls, triggerCls [,config] );
container: selector, // 外围盒子选择器
contentCls: selector, // 内容面板父容器ClassName
triggerCls: selector, // 触发器父容器ClassName
{
auto: true, // 是否自动轮播,默认false
delay: 4000, // 自动轮播延迟时间,默认4000,单位毫秒
interval: 4000, // 自动轮播间隙时间,默认4400,单位毫秒
duration: 400, // 轮播动画持续时间,默认400,单位毫秒
easing: 'linear', // 轮播过渡方式,默认swing
activeCls: 'current' // 触发器激活样式,默认slide-active
}
/*
* @作者 华子yjh http://www.cnblogs.com/yangjunhua/
* @date 2013/04/23 11:00:00
* @source 博客园
*/
$.extend({
slide: function( container, contentCls, triggerCls, config ){
// 外围盒子
var container_box = $(container),
// 内容父元素
content_box = $(contentCls, container),
// 触发器父元素
trigger_box = $(triggerCls, container),
// 内容子元素集合
content_childs = $(contentCls, container).children(),
// 第一个内容子元素
first_CtnElem = $(content_childs.get(0)),
// 触发器子元素集合
trigger_elems = $(triggerCls, container).children(),
// 滚动步伐值(固定,每个内容子元素宽度相同)
fixed_steps = first_CtnElem.width(),
// 内容子元素长度
len = content_childs.length,
// 内容子元素总长度
total_w = fixed_steps*len,
// 初始化left变量
left = 0,
// 定时器
setTimeoutId,
// 默认配置
defaultConfig = {
auto: false,
delay: 4000,
interval: 4400,
duration: 400,
easing: 'swing',
activeCls: 'slide-active'
};
// 配置项
config = $.isPlainObject(config)&&config ? $.extend( defaultConfig, config )&&defaultConfig : defaultConfig;
// 定时器绑定函数
function autoSlide(){
left = parseInt(content_box.get(0).style.left, 10);
left = left - fixed_steps; // 获取下一次轮播left值
// 为当前触发器元素增加激活样式
var curIndex = Math.abs(left/fixed_steps);
if (curIndex <= len-1) {
$(trigger_elems[curIndex]).addClass(config.activeCls).siblings().removeClass(config.activeCls);
} else {
$(trigger_elems[0]).addClass(config.activeCls).siblings().removeClass(config.activeCls);
}
// 轮播计算
if (Math.abs(left) < total_w) {
content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){
// 轮播到最后一项时,第一个内容子元素更新position,left属性值
if (Math.abs(left) === (total_w-fixed_steps)) {
first_CtnElem.css({ position: 'relative', left: total_w + 'px' });
}
});
}
else {
// 动画left为负的total_w像素时,重置第一个内容子元素和其自身样式
content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){
$(content_childs.get(0)).css({ position: '', left: '' });
content_box.css({ left: 0 });
});
}
// 定时器
setTimeoutId = setTimeout(autoSlide, config.interval);
}
// 初始化操作
content_box.css({ width: total_w + 'px', position: 'absolute', top: 0, left: 0});
// 是否自动轮播
if (!!config.auto) {
setTimeoutId = setTimeout(autoSlide, config.delay);
}
// 触发器绑定事件
$(trigger_elems).bind('mouseover', function(e){
var curTarget = e.currentTarget,
idx = trigger_elems.index(curTarget);
left = -(total_w/len)*idx;
$(curTarget).addClass(config.activeCls).siblings().removeClass(config.activeCls);
content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){
first_CtnElem.css({ position: '', left: '' });
// 轮播到最后一项时,第一个内容子元素更新position,left属性值
if (Math.abs(left) === (total_w-fixed_steps)) {
first_CtnElem.css({ position: 'relative', left: total_w + 'px' });
}
});
});
// 外围盒子绑定事件
// 触发mouseover事件,取消在各种情景中正在执行的定时器,避免与触发器元素所触发的事件代码冲突
container_box.bind('mouseover', function(e){
// 第一次触发mouseover事件时,如果延迟时间还没过时,则取消定时器setTimeoutId
// 第一次触发mouseover事件时,如果延迟已过,则取消正在执行的定时器setTimeoutId
// 如果超过一次触发mouseover事件时,则取消由mouseleave事件所触发的定时器
clearTimeout(setTimeoutId);
});
// 触发mouseleave事件,增加定时器,自动轮播得以继续
container_box.bind('mouseleave', function(e){
setTimeoutId = setTimeout(autoSlide, config.interval);
});
return this;
}
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Slide</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
* { margin: 0; padding: 0; }
img { display: block; border: none; }
body { font-size: 12px; font-family: '微软雅黑'; }
ul { list-style: none; }
.clear-fix:after { content: ' '; display: block; height: 0; visibility: hidden; clear: both; }
.clear-fix { zoom: 1; }
#container { margin: 0 auto; width: 520px; height: 320px; overflow: hidden; position: relative; }
.content li { width: 520px; height: 320px; float: left; }
.trigger { position: absolute; bottom: 10px; right: 10px; }
.trigger li { float: left; display: inline; margin-left: 10px; color: #333; font-size: 18px; line-height: 18px; overflow: hidden; cursor: pointer; }
.trigger li.current { color: red; }
</style>
</head>
<body>
<div id="container">
<ul class="clear-fix content">
<li>
<a href="" target="_blank">
<img width="520" height="320" src="http://img04.taobaocdn.com/tps/i4/T1Ei5gXENcXXbsjuY7-520-320.png">
</a>
</li>
<li>
<a href="" target="_blank">
<img width="520" height="320" src="http://img01.taobaocdn.com/tps/i1/T1bT4MXEJgXXbsjuY7-520-320.png">
</a>
</li>
<li>
<a href="" target="_blank">
<img width="520" height="320" src="http://img02.taobaocdn.com/tps/i2/T1d4ibXvFaXXbsjuY7-520-320.png">
</a>
</li>
<li>
<a href="" target="_blank">
<img width="520" height="320" src="http://img04.taobaocdn.com/tps/i4/T11Tt_XstbXXbsjuY7-520-320.png">
</a>
</li>
<li>
<a href="" target="_blank">
<img width="520" height="320" src="http://img03.taobaocdn.com/tps/i3/T1uqOfXxxaXXcQhuY7-520-320.jpg">
</a>
</li>
<li>
<a href="" target="_blank">
<img width="520" height="320" src="http://img03.taobaocdn.com/tps/i3/T1o7l8XCRbXXbsjuY7-520-320.png">
</a>
</li>
</ul>
<ul class="clear-fix trigger">
<li class="current">●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
<script>
// 此处为插件源码,省略
$(function(){
$.slide( '#container', '.content', '.trigger',
{
auto: true,
delay: 4000,
interval: 4000,
duration: 400,
easing: 'linear',
activeCls: 'current'
}
);
});
</script>
</body>
</html>
相关推荐
基于jquery slide插件的六款淘宝焦点图片轮播滚动文字滚动图片滚动特效源码.zip
jQuery图片轮播(焦点图)插件jquery.slideBox兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定默认显示第N张,自由设定,代码简洁,运行效率高演示地址:...
jQuery slide焦点图片滚动插件仿京东商城首页焦点图片滚动轮播
于是搬套SuperSlide的思路,自己重新整理后,完成了基于jQuery的Slide插件的首个版本,然后将其全面替换之前所在公司的所有项目网站。 将焦点图,幻灯片,Tab标签,图片滚动,无缝滚动,手风琴等这些涉及滑动切换的...
64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...
64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...
64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...
64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...
64.[荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65.一款jQuery仿flash放大图片的相册插件 66.一款jQuery仿苹果mac os系统经典菜单效果源码 67.一款jQuery动感左右滚动图片切换插件带缩图一起...
jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" /> [removed][removed] <script src="js/jquery.slideBox.js" type="t
一个仿腾讯娱乐频道焦点图轮播的插件 ui3g.js 代码如下: /* 顶部大图滚动 */ var slide = (function() { var quadEaseOut; var doc = document; var $ = function(s){ return document.getElementById(s); ...
基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载。 效果图如下: 在线预览 源码下载 html代码: [removed] $(function () { // Slideshow $(#slider)....