通过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()/2var 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;

转载于:https://www.cnblogs.com/zkhzz/p/5256783.html

通过jquery js 实现幻灯片切换轮播效果相关推荐

html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
jquery实现多模块切换轮播
说两句废话:对于一个小白痴来说,get这些知识真的是有点费劲,我还没学jquery,看了这对应的公开课后,自己敲了一天才整理好,希望总结后更上一层楼. 资料下载地址: 链接:https://pan.b ...
js实现图片3D轮播效果（收藏）
3D的图片轮播效果很炫,写到这里只是为了不丢代码,不为别的. 效果预览: html代码: <head> <meta http-equiv="Content-Type&quo ...
html+css+js简单实现图片轮播效果
<html> <head> <style type="text/css"> *{background-color:green;} #lunbo{ ...
jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
jQuery很不错的JS框架,现在已经更新到 1.2.6 了,添加了很多新特性,修正了大量的BUG. 今天,借助他的威力, 用js实现迅雷首页(http://xunlei.com/)FLASH轮换的效 ...
针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
php制作图片轮播_JavaScript_jQuery制作简洁的图片轮播效果，演示图：核心代码：$ - phpStudy...
jQuery制作简洁的图片轮播效果演示图: 核心代码: $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.img ...
十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...

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

通过jquery js 实现幻灯片切换轮播效果相关推荐

最新文章

热门文章