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

最新推荐文章于 2021-09-07 21:04:16 发布
最新推荐文章于 2021-09-07 21:04:16 发布
阅读量152 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/zkhzz/p/5256783.html
版权

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

 

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;

 

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

weixin_30750335
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
11-17
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
Jquery实现幻灯片轮播
怪兽博客
09-13 563
页面代码如下 广告图片轮播切换 1 2 3 4 5 6 > CSS样式如下 ul,li{padding: 0;margin: 0; list-style: none;} .adver{ma
html 栏目切换幻灯片效果,JS实现的幻灯片切换显示效果
weixin_30844577的博客
06-03 393
本文实例讲述了JS实现的幻灯片切换显示效果。分享给大家供大家参考，具体如下：html：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">纯JS幻灯版*{ margin:0; padding:0;}#banner {width:1000px;text-align:left; background:#fff; marg...
jQuery 实现的幻灯轮播效果
weixin_34018202的博客
11-11 83
很多人留言问我首页那个幻灯轮播的效果是怎么实现的，我真不知道怎么在短短几句留言里表达清楚一个幻灯的实现方法，而且我那个又是 flash 的，还要设置参数什么乱七八糟的东东，所以连我自己都不是很推荐使用这种 flash 的幻灯方法。今天就介绍一种 jQuery 实现的幻灯片轮播方法。选择 jQuery 的原因很简单，如果整站使用越多的 jQuery 效果，那也就越值，因为可以充分利用这个 jQuer...
js图片幻灯切换效果
03-24
NULL 博文链接：https://mojianpo.iteye.com/blog/1085143
jQuery途牛首页定时幻灯片轮播效果
11-12
"jQuery途牛首页定时幻灯片轮播效果"是一个典型的利用JavaScript库jQuery实现的动态展示功能，主要目标是模拟实际生活中幻灯片的切换，让用户在浏览网页时能享受到平滑、自动的图片或内容滚动体验。 首先，jQuery是...
jquery slider图片插件幻灯片轮播切换代码
06-09
总之，这个jQuery Slider图片插件利用HTML、CSS和JavaScript实现了动态的图片轮播效果，为网站增添视觉吸引力。开发者可以根据实际需求自定义样式和功能，以适应各种网页设计项目。通过深入理解并运用这些技术，可以...
jQuery幻灯片带缩略图轮播效果代码分享
10-23
本篇文章将详细介绍如何使用jQuery实现带有缩略图的幻灯片轮播效果。 首先，我们需要准备HTML结构。在给出的代码示例中，可以看到一个`<div id="nav">`包含了多个`<li>`元素，每个`<li>`里包含一张图片以及对应的...
jQuery左右切换动画幻灯片轮播特效
06-09
总之，jQuery左右切换动画幻灯片轮播特效通过结合选择器、事件处理、动画和状态管理等技术，实现了动态、互动的网页展示效果。理解和掌握这些知识点，对于提升网页开发技能和用户体验设计能力都至关重要。
jQuery网站首页幻灯片切换代码
06-24
总之，jQuery网站首页幻灯片切换代码是一个集成了jQuery技术、图片轮播原理和前端动画效果的综合实践。它不仅提升了用户体验，还展示了jQuery在网页动态效果中的强大功能。通过学习和应用此类代码，开发者可以增强...
基于Animate.css的jQuery全屏幻灯片插件
12-11
crosscover是一款基于animate.css的jQuery全屏幻灯片插件。该幻灯片可以使图片无限循环轮播，可以使用animate.css的所有效果来制作图片进入和离开的动画效果，可以暂停自动播放等，并且使用非常简单。
JS切换图片幻灯切换效果
知行合一
11-30 1545
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten
Flash和JS实现的图片幻灯片切换特效
WalleZhang的专栏
01-22 381
&lt;a target=_self href="javascript:goUrl()"&gt; &lt;span class="f14b"&gt; &lt;script type="text/javascript"&gt; imgUrl1="http://www.webjx.com/img/200406301
js最简单的左右切换幻灯片
行者乐途
01-02 2072
js最简单的左右切换幻灯片
HTML+CSS+JS实现 ❤️HTML5图片幻灯片轮播切换❤️
java李阳勇的博客
09-07 2021
效果演示： 代码目录： 主要代码实现： HTML代码 : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图像画廊主题——Jssor滑块,旋转木马</titl...
jQuer焦点图--带缩略图的焦点图幻灯代码
养有道
06-28 757
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 1网 -->    .indexCon{width:782px;overflow:hidden;} .indexCon .flashBanner{width:782px;h
jQuery幻灯片带缩略图平移滑动焦点图
09-01 2083
先上图 jQuery幻灯片带缩略图平移滑动焦点图 body { font-size: 12px; font-family: 'Ar
jQuery轮播效果（Carousell）
chenmo2001的博客
06-07 2877
jQuery轮播效果（Carousell） 轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JavaScript构建---内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图分浏览控制和指令支持。 在支持Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态。窗口最小化时），轮播效果控件会停止运动，从而节省性能。 用法 通过数据属性 使用数据属性可以轻松控制转盘的位置。Data-slide接受关键字，p...
javascript制作幻灯片切换效果
weixin_44830974的博客
05-10 1002
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 180px; height: 390px; ...
jQuery 单独设置每张幻灯片图片的停留时间 鼠标悬停 鼠标移开后立即下一张 完整代码
最新发布
03-27
以下是通过 jQuery 实现单独设置每张幻灯片图片的停留时间，并且在鼠标悬停时停止轮播，鼠标移开后立即下一张的完整代码： HTML 代码： ``` ``` CSS 代码： ``` .slideshow { position: relative; } ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值