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;
})();

引用代码:

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

js 轮播图代码的更多相关文章

  1. 纯js轮播图练习-2,js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  2. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  3. JS轮播图(网易云轮播图)

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  4. JavaScript的案例(数据校验,js轮播图,页面定时弹窗)

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  5. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  7. 木马轮播图代码Jq

    效果图(将就一下) <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  9. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. [书]WALL·E、龙与地下铁、中国美丽的故事、故事新编、四十自述、书虫、人工智能、大话数据结构

    下午有时间,逛了逛了书城,看到了一些书.在这里总结一些自己的感受.   一.<龙与地下铁>     这本书是我首先看到的,就在靠前的新书区.是小说,我没看里面的内容,但是被书封皮的宣传文案 ...

  2. python matplotlib 中文显示参数设置

    python matplotlib 中文显示参数设置 方法一:每次编写代码时进行参数设置 #coding:utf-8import matplotlib.pyplot as pltplt.rcParam ...

  3. 定时器图片轮播淡入淡出基本功能已实现,正在修改BUG中。。(附图效果和源代码)

    用JQ写的源码如下: 实现功能: 1,图片自动按顺序轮播,轮播选中的图片透明度为1,其他为0.1: 2,鼠标停在的图片上透明度为1,其他为0.1: 3,鼠标离开,继续轮播,起始位置为鼠标停在的图片的下 ...

  4. Java vs. C#

    Java Program Structure C# package hello; public class HelloWorld {    public static void main(String ...

  5. Android之alertDialog、ProgressDialog

    一.alertDialog 置顶于所有控件之上的,可以屏蔽其他控件的交互能力.通过AlertDialog.Builder创建一个AlertDialog,并通过setTittle(),setMesseg ...

  6. __VA_ARGS__可变参数宏

    #define qWiFiDebug(format, ...) qDebug("[WiFi] "format" File:%s, Line:%d, Function:%s ...

  7. SPSS常用基础操作(3)——对数据资料进行整理

    在实际工作中,往往需要对取得的数据资料进行整理,使其满足特定的分析需求,下面介绍SPSS在资料整理方面的一些功能. 1.加权个案加权个案是指给不同的个案赋予不同的权重,以改变该个案在分析中的重要性.为 ...

  8. java.util.concurrent包分类结构图

    摘自:http://blog.csdn.net/tsyj810883979/article/details/6956290

  9. 【原创】Mac os 10.10.3 安装xgboost

    大家用的比较多的是Linux和windows,基于Mac os的安装教程不多, 所以在安装的过程中遇到很多问题,经过较长时间的尝试,可以正常安装和使用, [说在前面]由于新版本的Os操作系统不支持op ...

  10. 并发编程 10—— 任务取消 之 关闭 ExecutorService

    Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...