注册 | 登陆
您的位置:阿里西西 > 前端技术 > 脚本技术 > 详细内容

通过js+jquery实现图片轮播的代码实例教程

  稿源:本站整理   2018-08-10   点击:   撤稿纠错
通过js+jquery实现图片轮播的代码实例教程,感兴趣的同学不妨测试一下。
本站收录这篇文章通过js+jquery实现图片轮播的代码实例教程,详细解说文章中相关jquery 图片轮播 代码实例 技术与知识,欢迎能给大家一些在这方面的支持和帮助!下面是详细内容:

通过js+jquery实现图片轮播的代码实例教程,感兴趣的同学不妨测试一下。

broadcast.js

var CarouselFigure = new Object();
//轮播图初始化定义函数
CarouselFigure.init = function(tmpobj){
    //定义动画帧数(默认为:30)
    this.frameNum = tmpobj.frameNum !=undefined ?  tmpobj.frameNum : 30;
    //定义一次轮播的时间(默认为:0.2s)
    this.comsumeTime = tmpobj.comsumeTime !=undefined ?  tmpobj.comsumeTime : 200;
    //定义轮播图的宽高(默认宽高为:700px * 250px)
    this.CFWidth = tmpobj.CFWidth !=undefined ?  tmpobj.CFWidth : 700;
    this.CFHeight = tmpobj.CFHeight !=undefined ?  tmpobj.CFHeight : 250;
    //定义轮播的风格
    this.type = tmpobj.type == "small" ? 'small' : 'big';
    //轮播图的按钮大小的宽高
    this.AssowWidth = tmpobj.AssowWidth !=undefined ?  tmpobj.AssowWidth : 76;
    this.AssowHeight = tmpobj.AssowHeight !=undefined ?  tmpobj.AssowHeight : 112;
    //判断用户是否初始化
    this.initFlag = true;
    //是否允许轮播图运行
    this.applicationflag = true;
}
CarouselFigure.start = function(){
/**
    第一部分类容:初始化整个轮播图和其运行数据
*/
(function(){
    //1. 判断用户是否进行初始化
    if(CarouselFigure.initFlag == undefined){
        CarouselFigure.init({});
    }
    
    //2.1 初始化整个轮播图的div的基本大小
    $("#CarouselFigure").width(CarouselFigure.CFWidth).height(CarouselFigure.CFHeight).css("position","relative");
    
    //2.2 最中央的大图实际大小为:
    CarouselFigure.ImgWidth = CarouselFigure.CFWidth * 2/3;
    CarouselFigure.ImgHeight =  CarouselFigure.CFHeight - 6;
    
    //3. 初始化轮播图按钮数据
    CarouselFigure.setAssowdata = {
    prev:{
          top:(CarouselFigure.CFHeight - CarouselFigure.AssowHeight)/2 +"px",
          left:CarouselFigure.CFWidth/6 - CarouselFigure.AssowWidth + 6 + "px",
          originUrl:$("#CarouselFigure > img:eq(0)").attr("src"),
          hoverUrl:$("#CarouselFigure > img:eq(1)").attr("src"),
          },
    next:{
          top:(CarouselFigure.CFHeight - CarouselFigure.AssowHeight)/2 +"px",
          left:CarouselFigure.CFWidth*5/6 + "px",
          originUrl:$("#CarouselFigure > img:eq(2)").attr("src"),
          hoverUrl:$("#CarouselFigure > img:eq(3)").attr("src"),
          }
    };
    
    //4.1 初始化轮播图的url和src信息,存放到一个容器中
    CarouselFigure.imageContains = [];                        
    $("#CarouselFigure ul li img").each(function(){
        var tmpobj = {src:$(this).attr("src"),href:$(this).attr("href")}
        CarouselFigure.imageContains.push(tmpobj);
    });
    //4.2 对轮播图容器数据进行处理,当轮播图的个数3<= x  <= 5 只能使用small风格类型。当轮播图的个数 x < 3 时, 停止运行
    if(CarouselFigure.imageContains.length < 3){
        CarouselFigure.applicationflag = false;
    }else if(CarouselFigure.imageContains.length < 6){
        CarouselFigure.type = 'small';
    }
    //4.3 对轮播容器数据按顺序进行增倍,保证有足够数据进行轮播
    var objstr = JSON.stringify(CarouselFigure.imageContains);
    CarouselFigure.imageContains = CarouselFigure.imageContains.concat(JSON.parse(objstr));
    //5.1 轮播图使用big风格时,页面七张图在静态页面中的属性值
    CarouselFigure.setViewPosData = new Object;
     CarouselFigure.setViewPosData.big = [
        {
            width:CarouselFigure.ImgWidth*3/8,        height:CarouselFigure.ImgHeight*3/8,
            left:0,                                    top:0,
            zIndex:1,            opacity:0.2,        borderSize:0
        },{
            width:CarouselFigure.ImgWidth*3/8,        height:CarouselFigure.ImgHeight*3/8,
            left:0,                                    top:CarouselFigure.CFHeight*5/16,
            zIndex:2,            opacity:0.7,        borderSize:0
        },{
            width:CarouselFigure.ImgWidth*3/4,        height:CarouselFigure.ImgHeight*3/4,
            left:CarouselFigure.CFWidth/18,            top:CarouselFigure.CFHeight/8,
            zIndex:3,            opacity:0.9,        borderSize:0
        },{
            width:CarouselFigure.ImgWidth,            height:CarouselFigure.ImgHeight,
            left:CarouselFigure.CFWidth/6,            top:0,
            zIndex:4,            opacity:1,            borderSize:3
        },{
            width:CarouselFigure.ImgWidth*3/4,        height:CarouselFigure.ImgHeight*3/4,
            left:CarouselFigure.CFWidth * 4/9,        top:CarouselFigure.CFHeight/8,
            zIndex:3,            opacity:0.9,        borderSize:0
        },{
            width:CarouselFigure.ImgWidth*3/8,        height:CarouselFigure.ImgHeight*3/8,
            left:CarouselFigure.CFWidth * 3/4,        top:CarouselFigure.CFHeight*5/16,
            zIndex:2,            opacity:0.7,        borderSize:0
        },{
            width:CarouselFigure.ImgWidth*3/8,        height:CarouselFigure.ImgHeight*3/8,
            left:CarouselFigure.CFWidth * 3/4,        top:0,
            zIndex:1,            opacity:0.2,        borderSize:0
        },];
    //5.2 轮播图使用small风格时,页面5张图在静态页面中的属性值
     CarouselFigure.setViewPosData.small = [
        {
            width:CarouselFigure.ImgWidth*3/8,        height:CarouselFigure.ImgHeight*3/8,
            left:0,                                    top:0,
            zIndex:1,            opacity:0.2,        borderSize:0
        },{
            width:CarouselFigure.ImgWidth*3/4,        height:CarouselFigure.ImgHeight*3/4,
            left:0,                                    top:CarouselFigure.CFHeight/8,
            zIndex:2,            opacity:0.9,        borderSize:0
        },{
            width:CarouselFigure.ImgWidth,            height:CarouselFigure.ImgHeight,
            left:CarouselFigure.CFWidth/6,            top:0,
            zIndex:3,            opacity:1,            borderSize:3
        },{
            width:CarouselFigure.ImgWidth*3/4,        height:CarouselFigure.ImgHeight*3/4,
            left:CarouselFigure.CFWidth * 1/2,        top:CarouselFigure.CFHeight/8,
            zIndex:2,            opacity:0.9,        borderSize:0
        },{
            width:CarouselFigure.ImgWidth*3/8,        height:CarouselFigure.ImgHeight*3/8,
            left:CarouselFigure.CFWidth * 3/4,        top:0,
            zIndex:1,            opacity:0.2,        borderSize:0
        }];
}());
//验证初始化是否成功,否则全部隐藏,结束进程
if(!CarouselFigure.applicationflag){
    $("#CarouselFigure").css("display","none");
    return false;
}
/**
    第二部分:
        对轮播图的箭头进行初始化(包括页面中的静态布局,和点击事件和悬浮事件)
*/
    CarouselFigure.InitAssow = function (Assow,direction){
        //实现轮播图箭头的静态样式、悬浮事件和点击事件
        Assow.css({
            position:"absolute",
            left:this.setAssowdata[direction].left,
            top:this.setAssowdata[direction].top,
            "z-index":4
        })
        .mouseover(function(){            //鼠标悬浮切换图片
            $(this).attr("src",CarouselFigure.setAssowdata[direction].hoverUrl);
        }).mouseout(function(){
            $(this).attr("src",CarouselFigure.setAssowdata[direction].originUrl);
        }).click(function(){
            //记录点击事件的次数
            CarouselFigure.clickArrowfun(direction);    
        });
    }
    //调用初始化轮播图函数--实现左右箭头全部功能
    $("#CarouselFigure > img:odd").css("display","none");
    CarouselFigure.InitAssow($("#CarouselFigure > img:eq(0)"),"prev");
    CarouselFigure.InitAssow($("#CarouselFigure > img:eq(2)"),"next");
/**
    第三部分:
        对所有的轮播图进行页面静态布局
*/
    //初始化某张轮播图的方法
    CarouselFigure.InitImages =    function (i,setViewPosData,imageContains){
        $("#CarouselFigure ul img:eq("+i+")").css({
            position:"absolute",
            width:setViewPosData[i].width + "px",
            height:setViewPosData[i].height + "px",
            top:setViewPosData[i].top + "px",
            left:setViewPosData[i].left + "px",
            display:"block",
            "z-index":setViewPosData[i].zIndex,
            opacity:setViewPosData[i].opacity,    
        }).attr({
            src:imageContains[i].src,
            href:imageContains[i].href
        }).click(function(){
            location.href = $(this).attr("href");    //绑定图片点击跳转事件
        });
        if( (i == 0  i == 6) && this.type == 'big'){        //第1张图片和第7张图片不可见
            $("#CarouselFigure ul img:eq("+i+")").css("display","none");
        }else if(i == 3 && this.type == 'big'){                //为正中央图片加边框
            $("#CarouselFigure ul img:eq("+i+")").css("border","3px solid #fff");
        }else if( (i == 0  i == 4)&&this.type == 'small'){//第1张图片和第5张图片不可见
            $("#CarouselFigure ul img:eq("+i+")").css("display","none");
        }else if(i == 2 && this.type == 'small'){            //为正中央图片加边框
            $("#CarouselFigure ul img:eq("+i+")").css("border","3px solid #fff");
        }
    }
    /**
        实现七张图片的静态样式:
            清空原有的li标签,然后新建
  •  
  • 来存放每张轮播图。 */ $("#CarouselFigure ul").empty(); for(var i = 0; i < CarouselFigure.setViewPosData[CarouselFigure.type].length; i++){ $("#CarouselFigure ul").append('
  •  
  • '); CarouselFigure.InitImages(i,CarouselFigure.setViewPosData[CarouselFigure.type],CarouselFigure.imageContains); } /** 第四部分: 形成轮播动画效果 */ /* 设置clickArrow变量:作为动画的标示位,让其进行队列化,必须本次动画完成,才能进行下次动画轮播。 1. 当为负数时向前轮播,比如:-5向前轮播五次动画; 2. 当为正数时向后轮播,同理; 3. 当等于0时,此时没有进行轮播。 */ CarouselFigure.clickArrow = 0 ; // 处理动画队列方法: CarouselFigure.clickArrowfun = function (direction){ if(this.clickArrow == 0){ this.startAnimation(direction); } if(direction == "prev"){ this.clickArrow--; }else if(direction == "next"){ this.clickArrow++; } } /** 开始一次轮播动画 其中composerAnimateNum变量为: 在一次动画中,记录每张轮播图完成的标识符; 在big风格类型中:当其值为6时说明此次动画全部完成 在small风格类型中:当其值为4时说明此次动画全部完成 */ CarouselFigure.startAnimation = function(direction){ this.completeAnimationNum = 0; if(direction == "prev"){ //从最后一张图片到第一张轮播图片,分别向前移动,首先让最后一张图片可视 if(this.type == "big"){ $("#CarouselFigure ul img:eq(6)").css("display","block"); }else{ $("#CarouselFigure ul img:eq(4)").css("display","block"); } for(var i = this.setViewPosData[this.type].length - 1 ; i > 0; i --){ this.startMove(i, this.setViewPosData[this.type][i],this.setViewPosData[this.type][i-1],direction); } }else if(direction == "next"){//从第一张图片到倒数第二张图片,分别向后移动,首先让第一张轮播图片可视 $("#CarouselFigure ul img:eq(0)").css("display","block"); for(var i = 0 ; i < this.setViewPosData[this.type].length - 1; i ++){ this.startMove(i, this.setViewPosData[this.type][i],this.setViewPosData[this.type][i+1],direction); } } } /** 功能:让一张轮播图从某一个状态变换到另一个状态 (包括位子、透明度、边框等等属性) */ CarouselFigure.startMove = function (index,startObj,endObj,direction){ //所有属性的增量 var increaseLeft = endObj.left - startObj.left; var increaseTop = endObj.top - startObj.top; var increaseWidth = endObj.width - startObj.width; var increaseHeight = endObj.height - startObj.height; var increaseOpacity = endObj.opacity - startObj.opacity; var increaseBorderSize = endObj.borderSize - startObj.borderSize; var time = this.frameNum; //共总帧数 var i = 1; //帧数的记步标志索引 //定义函数:一帧到下一帧的变化过程 function moveStep(){ setTimeout(function(){ var tmpObj = $("#CarouselFigure ul img:eq("+index+")"); //每一帧时图片的属性改变量 tmpObj.css({ width:startObj.width + (increaseWidth/time) * i + "px", height:startObj.height + (increaseHeight/time) * i + "px", top:startObj.top + (increaseTop/time) * i + "px", left:startObj.left + (increaseLeft/time) * i + "px", border:startObj.borderSize + (increaseBorderSize/time) * i + "px solid #fff", opacity:startObj.opacity + (increaseOpacity/time) * i, }); //当小于30帧时,继续递归,直至调用30次完成动画效果 if( i++ 0){ this.startAnimation(direction); }else if(this.clickArrow < 0){ this.startAnimation(direction); } } } };

    broadcast.html


关于通过js+jquery实现图片轮播的代码实例教程的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/a/2018081096015.shtml方便下次再访问哦。


更多关于 jquery 图片轮播 代码实例 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示