通过jquery js 实现幻灯片切换轮播效果

观察各个电商网址轮播图的效果，总结了一下主要突破点与难点

1.->封装函数的步骤与具体实现

2->this关键字的指向

3->jquery js函数熟练运用如animate

4->各个图片的位置关系分析

5->正确的json格式

实现步骤

　　封装jq函数四个步骤：

　　1　　　　----->构造函数 var Carousel = function(poster){}　　//poster 为传入的类具体为一个ul

　　2　　　　----->Carousel.prototype上写函数

　　3　　　　----->Carousel.init new出每一个对象

　　4　　　　----->window["Carousel"] = Carousel; 添加到window上

先是主要的html结构

<!-- 正确的json对象 属性有双引号 -->
<div class="J_Poster poster-main" data-setting='{
                                                 "width":1000,
                                                 "height":270,
                                                 "posterHeight":270,
                                                 "posterWidth":640,
                                                 "scale":0.9,
                                                 "speed":300,
                                                 "verticalAlign":"middle",                     "autoPlay":true,
                                                 "delay":2000
                                                }'>
    <div class="poster-btn poster-prev-btn"></div>
    <ul class="poster-list">
        <li class="poster-item"><a href="#"><img src="img01/1.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/2.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/3.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/4.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/5.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/2.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/3.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/4.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/5.jpg" width="100%"></a></li>
    </ul>
    <div class="poster-btn poster-next-btn"></div>
</div>

　　下面是具体实现

Carousel.prototype = {
 
        //获取人工配制参数方法
    getSetting:function(){},
 
        //根据配制参数去控制高度，宽度。。
        setSettingValue:function(){},
 
           //垂直方向位置设置
        setVerticalAlign:function(height){},
 
    //设置剩余帧位置关系
        setPosterPos:function(){},
 
    //旋转函数
        carouselRotate:function(arr){},
 
        //自动播放函数
        autoPlayFn:function(){}
 
};

　　1.构造函数 Carousel

var Carousel = function(poster){
 
    var self = this;
    //保存单个旋转木马对象
    this.poster = poster;
    this.posterItemMain = poster.find("ul.poster-list");// 保存poster中ul对象
    //保存上下切换按钮
    this.prevBtn = poster.find("div.poster-prev-btn");
    this.nextBtn = poster.find("div.poster-next-btn");
    this.posterItems = this.posterItemMain.find("li");//所有li的个数
    this.posterFirstItem = this.posterItems.first();//保存第一帧
    this.posterLastItem  = this.posterItems.last();
    this.rotateFlag = true;                    //旋转结束的标志 若不设置 多次点击时会出现bug
 
    //默认配置参数
    this.setting = {
                    "width":900,            //幻灯片宽度
                     "height":270,            //幻灯片高度
                     "posterHeight":270,        //幻灯片第一帧宽度
                     "posterWidth":640,        //幻灯片第一帧高度
                     "scale":0.9,            //幻灯片比例
                     "speed":500,            //切换速度
                     "autoPlay":true,        //是否自动播放
                     "delay":2000,            //自动播放的延迟时间
                     "verticalAlign":"middle"//图片垂直方向上显示的位置
                    };
    $.extend(this.setting,this.getSetting());
 
    this.setSettingValue();
    this.setPosterPos();
    // 按钮事件
    this.prevBtn.click(function(){
        if(self.rotateFlag){
            self.rotateFlag = false;
            self.carouselRotate("left");
        }
 
    });
    this.nextBtn.click(function(){
        if(self.rotateFlag){
            self.rotateFlag = false;
            self.carouselRotate("right");
        }
    });
    if(self.setting.autoPlay){
        this.poster.hover(function(){//hover 为jq函数
            window.clearInterval(self.timer);
        },function(){
            self.prevBtn.click();
        });
        self.autoPlayFn();
    }
 
};

　　主要获取对象：　　carousel对象本身，幻灯片区域，幻灯片的上下切换按钮，幻灯片的每一张图片，幻灯片的第一帧与最后一帧

　　默认的配置参数：　如果有html中有多块切换区域时，要修改不同的切换样式，在html下修改date-setting属性即可，具体获取到人工配制参数的函数将在prototype下实现

　　事件的执行：　　　1.上下按钮切换点击事件（执行旋转函数），　　2.是否自动播放

Carousel.prototype上函数的实现

　　1.获取来自htnl中data-setting的人工配制参数　　

　　　　　　　　getSetting 　　　　//主要注意json格式下的属性要用双引号才能读取

getSetting:function(){
        var setting = this.poster.attr("data-setting");
        if(setting&&setting!=""){
            return $.parseJSON(setting);// 传出json对象
        }
        else{
            return {};
        }
        /*return setting;*/
    }

　　2.根据配置参数去控制幻灯片区域，第一帧的位置关系，上下切换按钮的样式，主要设置宽高 z-index left值

　　　　　　　　setSettingValue

	setSettingValue:function(){
		this.poster.css({
						width:this.setting.width,
						height:this.setting.height
						});
		this.posterItemMain.css({
								width:this.setting.width,
								height:this.setting.height
 
								});
		var w = (this.setting.width-this.setting.posterWidth)/2 //按钮的宽度
		this.prevBtn.css({
						width:w,
						height:this.setting.height,
						zIndex:Math.ceil((this.posterItems.size()/2))//按钮的层级关系
						});
		this.nextBtn.css({
						width:w,
						height:this.setting.height,
  						zIndex:Math.ceil((this.posterItems.size()/2))
						});
		this.posterFirstItem.css({
						left:w,
						zIndex:Math.floor((this.posterItems.size()/2))
						});
 
	},

　　3.剩余帧的位置关系，样式，主要通过获取第一帧的位置关系来确定其他帧的关系//通过slice函数将区域分为左右区域，然后左右区域每一帧分别修改z-index left top opacity width height

　　　　　　　　setPosterPos{

　　　　　　　　　　　　　　　　rightSlice.each(function(){})

　　　　　　　　　　　　　　　　leftSlice.each(function(){})

　　　　　　　　　　　　　　　}

setPosterPos:function(){
        var sliceItems = this.posterItems.slice(1);
        var sliceSize = sliceItems.size()/2
        var rightSlice = sliceItems.slice(0,sliceSize);
        //
        var leftSlice = sliceItems.slice(sliceSize);
 
        var  level = Math.floor((sliceItems.size()/2));
 
        //每张幻灯片的间距
        var gap = ((this.setting.width-this.setting.posterWidth)/2)/level;
 
        var self = this;
        //右边帧的宽度高度
        var  rw = this.setting.posterWidth;
        var  rh = this.setting.posterHeight;
 
        var firstLeft = (this.setting.width-this.setting.posterWidth)/2;
        var fixoffsetLeft = firstLeft+rw;
 
    //设置右边帧的宽度高度透明度
    rightSlice.each(function(i){
        //右边每一帧相应的宽度透明度的值
        level--;
        rw = self.setting.scale*rw;
        rh = self.setting.scale*rh;
        var j = i;
 
        //右边帧的位置
 
        $(this).css({
                width:rw,
                zIndex:level,
                height:rh,
                top:self.setVerticalAlign(rh),
                left:fixoffsetLeft+(++i)*gap-rw,
                opacity:1/++j
 
                });
    });
 
    var lw = rightSlice.last().width(),
        lh = rightSlice.last().height();
    var oloop =  Math.floor((sliceItems.size()/2));
    leftSlice.each(function(i){
        //左边帧每一帧的宽度高度
 
        $(this).css({
                width:lw,
                zIndex:i,
                height:lh,
                top:self.setVerticalAlign(lh),
                left:i*gap,
                opacity:1/oloop
 
                });
        lw = lw/self.setting.scale;
        lh = lh/self.setting.scale;
        oloop--;
    });
 
    },

　　4.垂直方向位置设置，即幻灯片区域的将垂直居上垂直居中垂直居底显示

　　　　　　　　setVerticalAlign(height)// height 为data-setting中传来的verticalAlign

    //垂直方向位置设置
    setVerticalAlign:function(height){
        var verticalType = this.setting.verticalAlign;
        var top = 0;
        if(verticalType === "middle"){
            top = (this.setting.height-height)/2;
        }else if(verticalType === "top"){
            top = 0;
        }else if(verticalType === "bottom"){
            top = this.setting.height-height;
        }else{
            top = (this.setting.height-height)/2;
        };
        return top;
    },

5.旋转函数的编写　　注意是否获取到DOM结点用get(0)方法

    //旋转函数
    carouselRotate:function(arr){
 
        var _this_ = this;
        var zIndexArr = [];
        if(arr==="left"){
            this.posterItems.each(function(){
                var self = $(this),
                    prev = self.prev().get(0)?self.prev():_this_.posterLastItem,
                    width = prev.width(),
                    height = prev.height(),
                    zIndex = prev.css("zIndex"),
                    opacity = prev.css("opacity"),
                    top = prev.css("top"),
                    left = prev.css("left");
                    zIndexArr.push(zIndex);
                self.animate({
                    width:width,
                    height:height,
                    //zIndex:zIndex,
                    opacity:opacity,
                    top:top,
                    left:left
                },_this_.setting.speed,function(){
                    _this_.rotateFlag = true;
                });
            });
            this.posterItems.each(function(i){
                $(this).css("zIndex",zIndexArr[i]);
            });
        }else if(arr==="right"){
            this.posterItems.each(function(){
                var self = $(this),
                    next = self.next().get(0)?self.next():_this_.posterFirstItem,
                    width = next.width(),
                    height = next.height(),
                    zIndex = next.css("zIndex"),
                    opacity = next.css("opacity"),
                    top = next.css("top"),
                    left = next.css("left");
                    zIndexArr.push(zIndex);
 
                self.animate({
                    width:width,
                    height:height,
                    zIndex:zIndex,
                    opacity:opacity,
                    top:top,
                    left:left
                },_this_.setting.speed,function(){
                    _this_.rotateFlag = true;
                });
            });
            this.posterItems.each(function(i){
                $(this).css("zIndex",zIndexArr[i]);
            });//先切换页面 再过渡其他元素
 
        }
    },

6.自动播放函数编写　　

    //自动播放函数
    autoPlayFn:function(){
        var self = this;
        this.timer = window.setInterval(function(){
            self.prevBtn.click();
        },self.setting.delay);
    },

3.new幻灯片中每一帧的实例// this指向carousel对象本身即要实现 new Carousel(posters);

Carousel.init = function(posters){
    var _this_ = this;
    posters.each(function(){
        new _this_($(this));
    });
}

4.添加到window中

window["Carousel"] = Carousel;

通过jquery js 实现幻灯片切换轮播效果的更多相关文章

JS实现焦点图轮播效果
大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...
JS实现小图放大轮播效果
JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换步骤一:建立HTML布局,具体如下: <body> ...
使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
js插件-图片椭圆轮播效果
插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...
js实现简单的轮播效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
Jquery实现左右轮播效果
首先展示下静态布局h5代码,代码非常简单. <div id="slide"> <ul class="pic-list"> <li& ...
Bootstrap插件之Carousel轮播效果（2015年-05月-21日）
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

随机推荐

JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
C 标准库系列之errno.h
errno.h 提供了一个整数全局变量errno,当系统调用或者库函数的错误事件发生时可能会修改该值,指明错误的原因,该值可在任何需要的地方被修改:一般情况不为0的值表示出现了异常或者错误. errn ...
JsonHelper MergeJsonTemplate
namespace Test { using Newtonsoft.Json; using System; using System.Collections.Generic; using System ...
CozyRSS开发记录8-解析一份RSS
CozyRSS开发记录8-解析一份RSS 1.使用Rss20FeedFormatter解析RSS 使用Rss20FeedFormatter配合XmlReader来解析RSS非常的简单,几行搞定: 来试 ...
Centos 6.5 x64环境下 spark 1.6 maven 编译-- 已验证
Centos 6.5 x64 jdk 1.7 scala 2.10 maven 3.3.3 cd spark-1.6 export MAVEN_OPTS="-Xmx2g -XX:MaxPer ...
Rdeis 详解小白
Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化,可以将内存中的数据保持在磁盘中,重启的时候可以再次加载进行使用. Redis不仅仅支持简单的key-v ...
主机信息收集工具DMitry
主机信息收集工具DMitry DMitry是Kali Linux内置的一款信息收集工具.它的目标主要是Web类主机.它不仅通过主动查询.端口扫描方式,还借助第三方网站和搜索引擎获取信息. 它搜集的 ...
iOS 时间的处理
做App避免不了要和时间打交道,关于时间的处理,里面有不少门道,远不是一行API调用,获取当前系统时间这么简单.我们需要了解与时间相关的各种API之间的差别,再因场景而异去设计相应的机制. 时间的形式 ...
[转]Windows7文件夹转移清理臃肿的C盘
当你使用Windows的时候,你会发现无论哪个版本的Windows,系统都会默认将用户文件夹和程序数据文件夹(xp下是Documents and Settings文件夹,而windows7和vista ...
可变参数列表与printf()函数的实现
问题当我们刚开始学习C语言的时候,就接触到printf()函数,可是当时"道行"不深或许不够细心留意,又或者我们理所当然地认为库函数规定这样就是这样,没有发现这个函数与普通的函数 ...

通过jquery js 实现幻灯片切换轮播效果

通过jquery js 实现幻灯片切换轮播效果的更多相关文章

随机推荐

热门专题