正文

jquery仿3d旋转木马效果插件(带索引按钮)

木西梧  木西梧  2022-08-17  357

关键词：

项目中需要用到旋转木马效果，但是我在网上找的插件，基本都是不带按钮或者只是带前后按钮的，而项目要求的是带索引按钮，也就是说有3张图片轮播，对应的要有3个小按钮，点击按钮，对应的图片位于中间位置。于是就在jQuery的一款插件jquery.carousel.js的基础上进行了一些改进，不足的是，固定就是3张图片。

代码：

html

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery自动轮播旋转木马插件</title>
    <link type="text/css" rel="stylesheet" href="css/carousel.css">
    <style type="text/css">
        .caroursel{margin:150px auto;}
        /*body{background-color: #2A2A2A;}*/
    </style>
    <!--[if IE]>
        <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <article class="jq22-container">
        
        <div class = "caroursel poster-main" data-setting = '{
            "width":1000,
            "height":270,
            "posterWidth":640,
            "posterHeight":270,
            "scale":0.8,
            "dealy":"2000",
            "algin":"middle"
        }'>
            <ul class = "poster-list">
                <li class = "poster-item"><img src="image/a1.png" width = "100%" height="100%"></li>
                <li class = "poster-item"><img src="image/a2.png" width = "100%" height="100%"></li>
                <li class = "poster-item"><img src="image/a3.png" width = "100%" height="100%"></li>
            </ul>

            <div class = "poster-btn poster-first-btn"></div>
            <div class = "poster-btn poster-second-btn"></div>
            <div class = "poster-btn poster-third-btn"></div>
            
            <div class = "poster-btn poster-prev-btn"> < </div>
            <div class = "poster-btn poster-next-btn"> > </div>

        </div>
        
    </article>
    
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/jquery.carousel-1.js"></script>
    <script>
        Caroursel.init($('.caroursel'))
    </script>
</body>
</html>

css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content: ;}
abbr,acronym{border:0;}
body{color:#666; background-color:#fff;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;}

.poster-main{position: relative;width: 900px;height: 270px}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width: 900px;height: 270px}
.poster-main .poster-list .poster-item{position: absolute;left: 0px;top: 0px}

.poster-main .poster-btn{
    cursor: pointer;
    position: absolute;
    top:290px;
    width:14px !important;
    height:14px !important;
    text-align: center;
    line-height: 14px;
    color: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #808080;
    z-index: 10;
}
.poster-main .poster-prev-btn{
    left: 40%;
}
.poster-main .poster-next-btn{
    left: 56%;
}

.poster-main .poster-first-btn{
    left: 45%;
}
.poster-main .poster-second-btn{
    left: 48%;
}
.poster-main .poster-third-btn{
    left: 51%;
}
.poster-main .poster-btn-active{
    background-color: #000000;
}

JS：

;(function($){
    var Caroursel = function (caroursel){
        var self = this;
        this.caroursel = caroursel;
        this.posterList = caroursel.find(".poster-list");
        this.posterItems = caroursel.find(".poster-item");
        this.firstPosterItem = this.posterItems.first();
        this.lastPosterItem = this.posterItems.last();
        this.prevBtn = this.caroursel.find(".poster-prev-btn");
        this.nextBtn = this.caroursel.find(".poster-next-btn");

        this.firstBtn = this.caroursel.find(".poster-first-btn");
        this.secondBtn = this.caroursel.find(".poster-second-btn");
        this.thirdBtn = this.caroursel.find(".poster-third-btn");
        this.buttonItems = [this.firstBtn,this.secondBtn,this.thirdBtn];

        //每个移动元素的位置索引,用于记录每个元素当前的位置,在每次移动的时候,该数组的值都会发生变化
        //值为1 表示在中间 2:在zuo边 3:在you边
        //数组的下标对应li元素的位置索引
        this.curPositions = [1,2,3];

        this.setting = {
            "width":"900",
            "height":"300",
            "posterWidth":"300",
            "posterHeight":"200",
            "scale":"0.8",
            "speed":"1000",
            "isAutoplay":"true",
            "dealy":"1000"
        };

        $.extend(this.setting,this.getSetting());

        this.setFirstPosition();

        this.setSlicePosition();

        this.refreshCss();

        this.rotateFlag = true;
        this.prevBtn.bind("click",function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.rotateAnimate("left")
            }
        });

        
        //绑定位置按钮事件
        this.firstBtn.bind("click",function(){
            console.log(this);
            self.clickPosButtonIndex(0);
        });
        this.secondBtn.bind("click",function(){
            self.clickPosButtonIndex(1);
        });
        this.thirdBtn.bind("click",function(){
            self.clickPosButtonIndex(2);
        });


        this.nextBtn.bind("click",function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.rotateAnimate("right")
            }
        });
        if(this.setting.isAutoplay){
            this.autoPlay();
            this.caroursel.hover(function(){clearInterval(self.timer)},function(){self.autoPlay()})
        }
    };
    Caroursel.prototype = {
        autoPlay:function(){
          var that = this;
          this.timer =  window.setInterval(function(){
              that.nextBtn.click();
          },that.setting.dealy)
        },


        refreshCss:function(){
            var curFirstPos;//当前位于中间的li元素位置
            for( i = 0; i < this.buttonItems.length; ++i)
            {
                var curButton = this.buttonItems[i];
                var curPos = this.curPositions[i];
                if(curPos == 1){
                    curButton.addClass('poster-btn-active');
                }
                else
                {
                    curButton.removeClass('poster-btn-active');
                }
            }
            console.log('after refresh claass');
        },

        //记录每次移动的状态
        refreshPositions:function(offset){
            console.log('before refreshPositions',this.curPositions);
            for( i = 0; i < this.curPositions.length; ++i)
            {
                var nextPos = this.curPositions[i] + offset;
                if (nextPos > this.curPositions.length) {//移动超过末尾,则位置变成到开头
                    nextPos = 1;
                }else 
                 if (nextPos < 1) {////向左边移动已经移动到开始位置更左边,则位置变成结束
                     nextPos = this.curPositions.length;
                 }
                this.curPositions[i] = nextPos;
            }
            console.log('after refreshPositions',this.curPositions);
            this.refreshCss();
        },
        //点击位置按钮,根据点击的按钮索引 决定向左还是向右移动[因为只有三个位置,该方法能够仅靠向左或向右就能将
        //指定的位置移动到中间]
        clickPosButtonIndex:function(index){
            console.log('click the index ' + index);
            var self = this;
            if(self.rotateFlag == false) {//目前正在移动等移动结束后才能进入
                return;
            }

            var curPos = this.curPositions[index];
            console.log('cur pos' + curPos);

            var moveDirection = null;
            if(curPos == 2){//目标位置现在 在zuo边,要移动到中间 只需要向左边移动一次
                moveDirection = "right";
            }else
                if(curPos == 3){//目标位置现在在you边,向右边移动一次
                    moveDirection = "left";
                }

            if(moveDirection != null){
                console.log('move to ' + moveDirection);
                self.rotateFlag = false;
                self.rotateAnimate(moveDirection)
            }
        },

        rotateAnimate:function(type){
            var that = this;
            var zIndexArr = [];
            if(type == "left"){//将posterItems的每个元素移动到下一个元素所在的位置
                this.posterItems.each(function(){
                   var self = $(this),
                    prev = $(this).next().get(0)?$(this).next():that.firstPosterItem,
                    width = prev.css("width"),
                    height = prev.css("height"),
                    zIndex = prev.css("zIndex"),
                    opacity = prev.css("opacity"),
                    left = prev.css("left"),
                    top = prev.css("top");
                    zIndexArr.push(zIndex);
                    self.animate({
                        "width":width,
                        "height":height,
                        "left":left,
                        "opacity":opacity,
                        "top":top
                    },that.setting.speed,function(){
                        that.rotateFlag = true;
                    });
                });
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
                });
                this.refreshPositions(1);
            }
            if(type == "right"){////将posterItems的每个元素移动到下上一个元素所在的位置
                this.posterItems.each(function(){
                    var self = $(this),
                    next = $(this).prev().get(0)?$(this).prev():that.lastPosterItem,
                        width = next.css("width"),
                        height = next.css("height"),
                        zIndex = next.css("zIndex"),
                        opacity = next.css("opacity"),
                        left = next.css("left"),
                        top = next.css("top");
                        zIndexArr.push(zIndex);
                    self.animate({
                        "width":width,
                        "height":height,
                        "left":left,
                        "opacity":opacity,
                        "top":top
                    },that.setting.speed,function(){
                        that.rotateFlag = true;
                    });
                });
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
                });
                this.refreshPositions(-1);
            }
        },
        setFirstPosition:function(){
            this.caroursel.css({"width":this.setting.width,"height":this.setting.height});
            this.posterList.css({"width":this.setting.width,"height":this.setting.height});
            var width = (this.setting.width - this.setting.posterWidth) / 2;

            this.prevBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)});
            this.nextBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)});
            this.firstPosterItem.css({
                "width":this.setting.posterWidth,
                "height":this.setting.posterHeight,
                "left":width,
                "zIndex":Math.ceil(this.posterItems.size()/2),
                "top":this.setVertialType(this.setting.posterHeight)
            });
        },
        setSlicePosition:function(){
            var _self = this;
            var sliceItems = this.posterItems.slice(1),
                level = Math.floor(this.posterItems.length/2),
                leftItems = sliceItems.slice(0,level),
                rightItems = sliceItems.slice(level),
                posterWidth = this.setting.posterWidth,
                posterHeight = this.setting.posterHeight,
                Btnwidth = (this.setting.width - this.setting.posterWidth) / 2,
                gap = Btnwidth/level,
                containerWidth = this.setting.width;

            var i = 1;
            var leftWidth = posterWidth;
            var leftHeight = posterHeight;
            var zLoop1 = level;
            leftItems.each(function(index,item){
                leftWidth = posterWidth * _self.setting.scale;
                leftHeight = posterHeight*_self.setting.scale;
                $(this).css({
                    "width":leftWidth,
                    "height":leftHeight,
                    "left": Btnwidth - i*gap,
                    "zIndex":zLoop1--,
                    "opacity":1/(i+1),
                    "top":_self.setVertialType(leftHeight)
                });
                i++;
            });

            var j = level;
            var zLoop2 = 1;
            var rightWidth = posterWidth;
            var rightHeight = posterHeight;
            rightItems.each(function(index,item){
                var rightWidth = posterWidth * _self.setting.scale;
                var rightHeight = posterHeight*_self.setting.scale;
                $(this).css({
                    "width":rightWidth,
                    "height":rightHeight,
                    "left": containerWidth -( Btnwidth - j*gap + rightWidth),
                    "zIndex":zLoop2++,
                    "opacity":1/(j+1),
                    "top":_self.setVertialType(rightHeight)
                });
                j--;
            });
        },
        getSetting:function(){
            var settting = this.caroursel.attr("data-setting");
            if(settting.length > 0){
                return $.parseJSON(settting);
            }else{
                return {};
            }
        },
        setVertialType:function(height){
            var algin = this.setting.algin;
            if(algin == "top") {
                return 0
            }else if(algin == "middle"){
                return (this.setting.posterHeight - height) / 2
            }else if(algin == "bottom"){
                return this.setting.posterHeight - height
            }else {
                return (this.setting.posterHeight - height) / 2
            }
        }
    };
    Caroursel.init = function (caroursels){
        caroursels.each(function(index,item){
            new Caroursel($(this));
        })  ;
    };
    window["Caroursel"] = Caroursel;
})(jQuery);

效果图：

利用css3d效果制作简易旋转木马效果

...马效果，如图其实就是找到角度和位置，计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转，就有了一简易的旋转木马效果。感兴趣的可以看一下，可以把代码中的图片路径改为自... 查看详情

jquery和css3带倒影的3d万花筒旋转动画特效效果演示

<!DOCTYPEhtml><html><head><title></title><metacharset=‘utf-8‘/><scriptsrc=‘js/jquery.js‘></script><style>.pic{width:120px;height:180px;margin:150p 查看详情

3d旋转仿伪3d立体效果，手机端

...这段代码，感觉很舒服，直街附代码吧，原生JS。手机端旋转效果仿立体效果。纯JS代码足够了、varimg=document.createElement(‘img‘);img.setAttribute(‘src‘,‘1.png‘);functionhandle(e){varalpha=e.alpha,beta=e.beta,gamma=e.gamma;img.style.webkitTr 查看详情

featurecarousel.js3d轮播图插件

jQuery FeatureCarousel插件是国外的一比较优秀的旋转木马图片插件。点击这里进入原文。插件特点：1.处理div的3d旋转木马效果。2.支持一个中心，2个侧面的功能3.中心区域可点击4.显示隐藏文本功能（可以使用css显示在图片... 查看详情

手机端3d旋转木马效果+保存图片到本地(代码片段)

<!DOCTYPEhtml><html><head><title></title><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1"&g 查看详情

jquery——banner旋转木马效果

博主在浏览网页时无意间发现了一种banner图的轮播方式——像旋转木马一样的轮播方式，博主感觉非常新颖独特，经过查阅资料，观看某课网教程总算搞了出来的，其原理主要利用了JQuery代码实现，好了不多说，看楼下代码及演... 查看详情

40款经典前端特效插件---分享

参考技术A1.flavr—超级漂亮的jQuery扁平弹出对话框 2.轻量级触摸响应滑块插件JQuerylightSlider 3.带37种3D动画特效的跨浏览器CSS3动画框架 4.jquery整屏滚动插件Scrollify 5.jquery... 查看详情

jquery简易3d按钮效果

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default3.aspx.cs"Inherits="Default3"%><!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><metaht 查看详情

unity3d-制作火焰效果

...预热模式将粒子开始速度降小将粒子开始大小变小将初始旋转量改成45°将最大粒子数量改成50更改发热器形状为球形，设置半径设置发射速度向上，发射出来修改粒子颜色随生命周期变化，更改粒子大小更改粒子旋转量为90 查看详情

3d转换+示例旋转木马

css3提供了3D转换功能。允许使用3D转换来对元素进行格式化 transform:rotateX(360deg); //X轴旋转360 transform:rotateY(360deg); //Y轴旋转360 transform:rotat 查看详情

分享一些经典的特效效果,希望对大家有帮助

jquerycolor颜色变化插件设置背景颜色变化透明图片变色效果https://www.mk2048.com/demo/demo_target_desc.php?id=j22ibc12jjquery图片滤镜特效插件轻松实现颜色不断渐变jQueryslide焦点图片滚动插件仿京东商城首页焦点图片滚动轮播点击》jQueryslide... 查看详情

开发中经常用到的特效效果

jquery代码全屏图片切换展示，大气100%全屏显示图片滚动切换点击》jquery代码全屏图片切换展示，大气100%全屏显示图片滚动切换在网页图片切换中实现全屏轮播，兼容各种浏览器。原生js代码制作仿苹果官网商品弹性选项卡切换... 查看详情

旋转木马轮播图（转）

<!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="description"content="CSS3transform实现图片旋转木马3D浏览效果?张鑫旭-鑫空间-鑫生活"/>< 查看详情

scssmatrix特色活动自定义3d旋转木马(代码片段)

查看详情

scssmatrix特色活动自定义3d旋转木马(代码片段)

查看详情

jquery可拖拽3d万花筒旋转特效

这是一个使用了CSS3立体效果的强大特效，本特效使用jQuery跟CSS3transform来实现在用户鼠标按下拖动时，环形图片墙可以跟随鼠标进行3D旋转动画。效果体验：http://hovertree.com/texiao/jquery/92/进去后可以上下左右的拖动图片。本示例中... 查看详情