jquery 轮播图
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 轮播图的更多相关文章
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- jQuery轮播图(手动点击轮播)
下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...
- jQuery轮播图(二)利用构造函数和原型创建对象以实现继承
本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...
- jQuery轮播图(一)轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...
- jquery 轮播图实例
实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...
- 《第31天:JQuery - 轮播图》
源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...
- 超级简单的jquery轮播图demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 支持触屏的jQuery轮播图插件
移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...
随机推荐
- Javascript面向对象编程:构造函数的继承
今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = & ...
- apache2.4域名配置参数
apache2.4和 2.2版本的配置有区别 2.4的配置如下 <VirtualHost *:80>DocumentRoot /www/web/projectServerName www. ...
- mac 找文件
如何找到 etc 方法1: ! D# D! s2 F" f 七度苹果电脑软件1.打开Finder,按快键盘 Command + Shift + G,即可调出 前往文件夹 ,也可以左上角 找到 ...
- 解决ACTIVITI流程图设置字体不生效的问题
在ACTIVITI 5.15的版本中,有一个设置流程图的字体配置. 配置如下: <bean id="processEngineConfiguration" class=&qu ...
- jsp标签之<%%>和<%!%>
<%! %>中声明的是全局变量,不过写前面最好<% %>中声明的是局部变量.<%=%>一般表达式,输出某一变量的值.例如:<%! String totalSt ...
- js基础之ajax
必须搞懂的几个问题: 1.如何创建ajax对象? 2.如何连接服务器? 3.如何发送请求? 4.监控请求状态的事件是什么?分几个阶段?如何获取返回值? 答:onreadystatechange事件:一 ...
- js基础之BOM
一.window.open 栗子:阿里西西运行代码功能 var oBtn = document.getElementById('btn1'); var oTxt = document.getEleme ...
- HDU 3567 Eight II 打表,康托展开,bfs,g++提交可过c++不可过 难度:3
http://acm.hdu.edu.cn/showproblem.php?pid=3567 相比Eight,似乎只是把目标状态由确定的改成不确定的,但是康托展开+曼哈顿为h值的A*和IDA*都不过, ...
- 二模 (2) day2
第一题: 题目描述: 在一个长方形框子里,最多有 N(0≤N≤6)个相异的点.在其中任何-个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完毕才能放 ...
- ROS主题发布订阅控制真实的机器人下位机
先模拟控制小乌龟 新建cmd_node.ccpp文件: #include"ros/ros.h" #include"geometry_msgs/Twist.h" ...