slider.js

(function(){
/**
parent //父容器
changeTime //每次间隔几秒切换下一条
leaveTime //鼠标从小图上离开过后几秒继续切换
index //从第几个开始
changeFn //新的显示完全后的回调
hoverFn//鼠标移到小图上的回调
initFn//初始化完成后的回调
dataFormat //数据格式化函数
*/
var def = {
changeTime : 5000,
leaveTime : 5000,
index : 0,
dataFormat : function(obj){
return obj;
}
}
function Slider(opt){
opt = opt || {};
for(var p in def){
if(opt[p] === undefined){
opt[p] = def[p];
}
}
this.opt = opt;
this.data = [];
this.idx = this.opt.index || 0;
this.imgArr = [];
this.navArr = [];
this.opt.parent && (this.opt.parent.innerHTML = '');
}
Slider.prototype.setData = function(data){
/**
* img
* thumb
* title
* url
* rgb
*/
for(var i=0;i<data.length;i++){
this.data.push(this.opt.dataFormat(data[i]));
}
}
Slider.prototype.init = function(){
var parentDom = this.opt.parent;
parentDom.className = 'slide_imgs';
var imgCon = this.imgCon = document.createElement('div');
imgCon.className = 'imgs_list';
var navCon = this.navCon = document.createElement('div');
navCon.className = 'item_points';
parentDom.appendChild(imgCon);
parentDom.appendChild(navCon);
this.createImg();
this.createThumb();
this.go(this.opt.index);
this.opt.initFn && this.opt.inifFn(this);
}
Slider.prototype.createImg = function(){
var list = this.data , temp ;
for(var i=0;i<list.length;i++){
temp = document.createElement('a');
temp.className = 'img_item';
// temp.style.backgroundColor = 'rgb('+list[i].rgb+')';
temp.style.display = this.opt.index == i ? 'block' : 'none';
if(list[i].url && list[i].url != '#' && list[i].url.indexOf('javascript') == -1){
temp.setAttribute('href',list[i].url);
temp.setAttribute('target','_blank');
}else{
temp.setAttribute('href','javascript:;');
}
temp.style.background = 'url('+list[i].img+') no-repeat center center';
temp.onclick = function(){
this.blur();
}
this.imgCon.appendChild(temp);
this.imgArr.push(temp);
temp.setAttribute('title',list[i].title);
}
}
Slider.prototype.createThumb = function(){
var list = this.data , temp , border , img , that = this , len = list.length;
for(var i=0;i<len;i++){
temp = document.createElement('a');
temp.className = 'point';
(function(idx){
var _idx = idx;
$(temp).hover(function(){
if(idx == that.idx) return;
if(that.timer){
clearTimeout(that.timer);
}
that.go(idx,true);
that.opt.hoverFn && that.opt.hoverFn.call(that,list[idx]);
},function(){
if(that.timer){
clearTimeout(that.timer);
}
that.timer = setTimeout(function(){
if(idx == len -1){
_idx = 0;
}else{
_idx ++;
}
that.go(_idx);
},that.opt.leaveTime);
})
})(i);
this.navCon.appendChild(temp);
this.navArr.push(temp);
temp.setAttribute('title',list[i].title);
}
}
Slider.prototype.next = function(){
var idx = this.idx + 1;
this.go(idx);
}
Slider.prototype.prev = function(){
var idx = this.idx - 1;
this.go(idx);
}
Slider.prototype.go = function(idx,handle){
var len = this.data.length, that = this;
idx = Math.min(Math.max(0,idx),this.data.length - 1);
if(len == 1) {
this.navArr[idx].className = 'point cur';
return;
}
if(this.timer){
clearTimeout(this.timer);
}
var old = this.idx;
if(this.imgArr[old]){
$(this.imgArr[old]).stop(0,0).animate({opacity:0},200,function(){
$(this).hide();
});
this.navArr[old].className = 'point';
this.imgArr[idx].style.display = 'block';
$(this.imgArr[idx]).css('opacity',0);
$(this.imgArr[idx]).stop(0,0).animate({opacity:1},200,function(){
that.opt.changeFn && that.opt.changeFn(that,that.data(idx));
});
this.navArr[idx].className = 'point cur';
this.idx = idx;
if(!handle){
this.timer = setTimeout(function(){
if(idx == len -1){
idx = 0;
}else{
idx ++;
}
that.go(idx);
},this.opt.changeTime);
}
}
}
window.Slider = Slider;
})();

index.js

$(function(){
function createBanner(){
var list = [
{img : '/callcenter.jpg',url:'',title:'客服中心'},
{img : '/imprestcenter.jpg',url:'',title:'充值中心'},
{img : '/safecenter.jpg',url:'',title:'安全中心'},
{img : 'http://gameapi.xiaoyou-game.com/static/usercenter/usercenter.jpg',url:'',title:'用户中心'}
]
var slider = new Slider({
parent : $('.slide_imgs')[0]
});
slider.setData(list);
slider.init();
}
createBanner();
})

html

<div class="slide_imgs">
</div>

1、在html里面占位置,

2、index.js将轮播图信息写好,

3、新建一个Slider对象,并实例化即可。

jquery 轮播图的更多相关文章

  1. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  2. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  3. jQuery轮播图(手动点击轮播)

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  4. jQuery轮播图(二)利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  5. jQuery轮播图(一)轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  6. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  7. 《第31天:JQuery - 轮播图》

    源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...

  8. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 支持触屏的jQuery轮播图插件

    移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...

随机推荐

  1. 委托传参,lambda

    今天一朋友问到一问题,怎么在timer的委托里面传参数,我初一想Invoke 可以传参数吧,我就说了. 后来他说这个委托是微软定义,不能变参数,于是我就自己写了一段代码试 试. 我最初写的代码如下 p ...

  2. java入门第三步之数据库连接【转】

    数据库连接可以说是学习web最基础的部分,也是非常重要的一部分,今天我们就来介绍下数据库的连接为下面学习真正的web打下基础 java中连接数据库一般有两种方式: 1.ODBC——Open Datab ...

  3. CentOS 下的MySQL配置

    先贴出代码(/etc/my.cnf)如下: #The following options will be passed to all MySQL clients [client] #password ...

  4. MongoDb系列

    这个系列主要总结学习MongoDb过程中的一些经验. 简单介绍及环境搭建 常用命令 C#驱动及应用 管理工具MongoVUE使用

  5. 161018--NOIP模拟

    老实说,感觉自己好菜啊..(安慰自己省选做多了 T1:看似1e6很大,实际上常数52都能草过去...不知为何RE.. T2:记忆化搜索.看错题目条件QAQ,其实把自己暴力搜的程序改改就好了.. T3: ...

  6. HideProcess

    #ifndef CXX_HIDEPROCESS_H # include "HideProcess.h" #endif #ifdef _WIN64 #define ActivePro ...

  7. uva 10668

    #include <iostream> #include <cstdlib> #include <cstdio> #include <cmath> us ...

  8. 判断是否是iOS8

    判断是否是iOS8 //判断是否是iOS8 if ([[UIDevice currentDevice].systemVersion doubleValue]>=8.0) { NSLog(@&qu ...

  9. CentOS linux 下eclipse+cdt编译报undefined reffrece to *

  10. myeclipse9.x,10.x 安装时出现pulse-one-64,failed to load the JNI shared library