JS 实现3D立体效果的首页轮播图（瞬间让你的网站高大上，逼格满满）

最新推荐文章于 2024-07-10 18:00:00 发布
最新推荐文章于 2024-07-10 18:00:00 发布
阅读量2.6k 收藏 2
点赞数

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                       

这里写图片描述

还是那句话，废话少说，直接上源代码：http://download.csdn.net/detail/cometwo/9387901

<html><head><title>JS 实现3D立体效果的图片幻灯切换</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>html {background:#000}body, ul {margin:0;padding:0}li {list-style:none}img {border:none;display:block}.slide-wp {width: 500px;height: 300px;overflow: hidden;position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -150px;}.nav-wp {position: absolute;background: #ccc;top: 50%;margin-top: 170px;left: 50%;margin-left: -100px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;padding: 0 20px 6px 10px;_padding: 0 20px 2px 10px;}.nav li {float: left;margin-left: 10px;font-size: 20px;font-weight: bold;font-family: tahoma;color: #22739e;cursor: pointer;height: 22px;}.nav li.cur{color: #ff7a00}.next {position:absolute;top: 0;left: 160px;padding: 4px 8px;color: #ff7a00;background: #ccc;height: 20px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;cursor: pointer;}</style></head><body><h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈。。。</h2><div id="slider" class="slide-wp"><ul><li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/1.jpg"  alt="" /></a></li><li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/2.jpg"  alt="" /></a></li><li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/3.jpg"  alt="" /></a></li><li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/4.jpg"  alt="" /></a></li><li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/5.jpg"  alt="" /></a></li></ul></div><div class="nav-wp"><ul id="nav" class="nav"><li onclick="mySlider.pos(0)">●</li><li onclick="mySlider.pos(1)">●</li><li onclick="mySlider.pos(2)">●</li><li onclick="mySlider.pos(3)">●</li><li onclick="mySlider.pos(4)">●</li></ul><a class="next" onclick="mySlider.move()">next</a></div><script type="text/javascript">var HR = { $ : function(i) {return document.getElementById(i)}, $$ : function(c, p) {return p.getElementsByTagName(c)}, ce : function(i, t) {  var o = document.createElement(i);  t.appendChild(o);  return o; }};HR.slider3D = function () { var init = function (o) {  this.o = o;  var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);  this.l = li.length;  this.w = wp.offsetWidth;  this.h = wp.offsetHeight;  this.at = o.auto? o.auto : 4;  var con = this.con = HR.ce('div', wp);  con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';  ul.style['display'] = 'none';   this.a1 = HR.ce('a', con);   this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';   this.a2 = HR.ce('a', con);  this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';  this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';  this.img = HR.$$('img', ul);  this.s = o.maskSize ? o.maskSize : 5;  this.mask11 = HR.ce('span', this.a1);  this.mask12 = HR.ce('span', this.a1);  this.mask21 = HR.ce('span', this.a2);  this.mask22 = HR.ce('span', this.a2);  this.pos(0); } init.prototype = {  pos : function (i) {   clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;   var navli = HR.$$('li', HR.$(this.o.navId));   for (var j=0; j<navli.length; j++) {    navli[j].className = i == j ? 'cur' : '';   }   var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;   img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;   img1.width = this.w;   img2.src = this.img[i].src;   img2.width = 0;   img1.height = img2.height = this.h;   this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px';   this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';   this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';   this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';   this.li[i].a = setInterval(function(){_this.anim(i)}, 20);  },  anim : function (i) {   var w1 = HR.$$('img', this.a1)[0].width, w2  = HR.$$('img', this.a2)[0].width;   if (w2 == this.w) {    clearInterval(this.li[i].a);    HR.$$('img', this.a1)[0].width = 0;    HR.$$('img', this.a2)[0].width = this.w;    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';   }else {    HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);    HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';    if (!this.au) this.auto();   }  },  auto : function () {   var _this = this;   this.au = setInterval(function(){_this.move()}, this.at*1000);  },  move : function () {   var n = this.cur==this.l-1 ? 0 : this.cur+1;   this.pos(n);  } } return init;}();var mySlider = new HR.slider3D({ id: 'slider', maskSize: 6, navId: 'nav', auto: 4})</SCRIPT></body></html>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172

高级扩展

这里写图片描述

 <html>    <head>        <title>JS 实现3D立体效果的图片幻灯切换</title>        <meta charset="utf-8" />        <style>            html {                background: #000            }            body,            ul {                left: 0px;                top: 0px;                margin: 0;                padding: 0            }            h1{                border: 1px solid blue;                text-align: center;                color:red;                padding: 10px;                font-size: 25px;            }            li,a,img {                display: block;                list-style: none;                border: none;            }            .slide-wp {                height: 400px;                width:100%;                overflow: hidden;                position: relative;                margin: 0 auto;                border: 1px solid red;            }            .slide-wp ul {                position: relative;            }            .nav-wp {                position: absolute;                background: #ccc;                top: 50%;                margin-top: 170px;                left: 50%;                margin-left: -100px;                border-radius: 4px;                -moz-border-radius: 4px;                -webkit-border-radius: 4px;                padding: 0 20px 6px 10px;                _padding: 0 20px 2px 10px;            }            .nav li {                float: left;                margin-left: 10px;                font-size: 20px;                font-weight: bold;                font-family: tahoma;                color: blue;      /*默认颜色*/                cursor: pointer;                height:20px;            }            .nav li.cur {                color: red;                  }            .next {                position: absolute;                top: 0;                left: 160px;                padding: 4px 8px;                color: #ff7a00;                background: #ccc;                height: 20px;                border-radius: 4px;                -moz-border-radius: 4px;                -webkit-border-radius: 4px;                cursor: pointer;            }        </style>    </head>    <body>        <h1>IE6可能不支持</h1>        <div id="slider" class="slide-wp">            <ul>                <li>                    <a href="http://www.newxing.com/" target="_blank"><img src="img/img1.jpg" alt="" /></a>                </li>                <li>                    <a href="http://www.newxing.com/" target="_blank"><img src="img/img2.jpg" alt="" /></a>                </li>                <li>                    <a href="http://www.newxing.com/" target="_blank"><img src="img/img3.jpg" alt="" /></a>                </li>                <li>                    <a href="http://www.newxing.com/" target="_blank"><img src="img/img4.jpg" alt="" /></a>                </li>                <li>                    <a href="http://www.newxing.com/" target="_blank"><img src="img/img5.jpg" alt="" /></a>                </li>            </ul>        </div>        <div class="nav-wp">            <ul id="nav" class="nav">                <li onclick="mySlider.pos(0)">●</li>                <li onclick="mySlider.pos(1)">●</li>                <li onclick="mySlider.pos(2)">●</li>                <li onclick="mySlider.pos(3)">●</li>                <li onclick="mySlider.pos(4)">●</li>            </ul>            <a class="next" onclick="mySlider.move()">next</a>        </div>        <script type="text/javascript">            var HR = {                $: function(i) {                    return document.getElementById(i)                },                $$: function(c, p) {     return p.getElementsByTagName(c)    },    ce: function(i, t) {     var o = document.createElement(i);     t.appendChild(o);     return o;    }   };   HR.slider3D = function() {    var init = function(o) {     this.o = o;     var wp = HR.$(o.id),      ul = HR.$$('ul', wp)[0],      li = this.li = HR.$$('li', ul);     this.l = li.length;     this.w = wp.offsetWidth;     this.h = wp.offsetHeight;     this.at = o.auto ? o.auto : 4;     var con = this.con = HR.ce('div', wp);     con.style.cssText = 'position:absolute;left:0;top:0;width:' + this.w + 'px;height:' + this.h + 'px';     ul.style['display'] = 'none';     this.a1 = HR.ce('a', con);     this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';     this.a2 = HR.ce('a', con);     this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';     this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';     this.img = HR.$$('img', ul);     this.s = o.maskSize ? o.maskSize : 5;     this.mask11 = HR.ce('span', this.a1);     this.mask12 = HR.ce('span', this.a1);     this.mask21 = HR.ce('span', this.a2);     this.mask22 = HR.ce('span', this.a2);     this.pos(0);    }    init.prototype = {     pos: function(i) {      clearInterval(this.li[i].a);      clearInterval(this.au);      this.au = 0;      this.cur = i;      var navli = HR.$$('li', HR.$(this.o.navId));      for (var j = 0; j < navli.length; j++) {       navli[j].className = i == j ? 'cur' : '';      }      var img1 = HR.$$('img', this.a1)[0],       img2 = HR.$$('img', this.a2)[0],       _this = this;      img1.src = i == 0 ? this.img[this.l - 1].src : this.img[i - 1].src;      img1.width = this.w;      img2.src = this.img[i].src;      img2.width = 0;      img1.height = img2.height = this.h;      this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 ' + this.w / 2 + 'px';      this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 ' + this.w / 2 + 'px';      this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';      this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';      this.li[i].a = setInterval(function() {       _this.anim(i)      }, 20);   //规定多长时间完成翻转     },     anim: function(i) {      var w1 = HR.$$('img', this.a1)[0].width,       w2 = HR.$$('img', this.a2)[0].width;      if (w2 == this.w) {       clearInterval(this.li[i].a);       HR.$$('img', this.a1)[0].width = 0;       HR.$$('img', this.a2)[0].width = this.w;       this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';       this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h / this.s + 'px';       this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w / 2 + 'px';       this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';      } else {       HR.$$('img', this.a1)[0].width -= Math.ceil((this.w - w2) * .13);       HR.$$('img', this.a2)[0].width += Math.ceil((this.w - w2) * .13);       this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width / 2 + 'px';       this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width * this.h / (this.s * this.w) + 'px';       this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width / 2 + 'px';       this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h / this.s - HR.$$('img', this.a2)[0].width * this.h / (this.s * this.w) + 'px';                            if (!this.au) this.auto();                        }                    },                    auto: function() {                        var _this = this;                        this.au = setInterval(function() {                            _this.move()                        }, this.at * 1000);   //翻转频率，看150行                    },                    move: function() {                        var n = this.cur == this.l - 1 ? 0 : this.cur + 1;                        this.pos(n);                    }                }                return init;            }();            var mySlider = new HR.slider3D({                id: 'slider',                maskSize: 6,     //banner图张数                navId: 'nav',                auto: 1        //设置翻转频率，看150行            })        </SCRIPT>    </body></html>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235

这里写图片描述

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>全屏图片切换</title>        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>        <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>        <script type="text/javascript">            $(document).ready(function() {                $('.flexslider').flexslider({                    directionNav: true,                    pauseOnAction: false,                    animation: "slide",                    slideshowSpeed: 700                });            });        </script>        <style type="text/css">            * {                margin: 0;                padding: 0;                list-style-type: none;            }            a,            img {                border: 0;            }            body {                font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";            }            /* flexslider */            .flexslider {                position: relative;                height: 400px;                width: 100%;                overflow: hidden;                background: url(img/loading.gif) 50% no-repeat;                margin: 0 auto;            }            .slides {                position: relative;                z-index: 1;            }            .slides li {                height: 600px;            }             .flex-control-nav {                position: absolute;                bottom: 10px;                z-index: 2;                width: 100%;                text-align: center;            }            .flex-control-nav li {                display: inline-block;                width: 14px;                height: 14px;                margin: 0 5px;                *display: inline;                zoom: 1;            }            .flex-control-nav a {                display: inline-block;                width: 14px;                height: 14px;                line-height: 40px;                overflow: hidden;                background: url(img/dot.png) right 0 no-repeat;                cursor: pointer;            }            .flex-control-nav .flex-active {                background-position: 0 0;            }            .flex-direction-nav {                position: absolute;                z-index: 3;                width: 100%;                top: 45%;            }            .flex-direction-nav li a {                display: block;                width: 50px;                height: 50px;                overflow: hidden;                cursor: pointer;                position: absolute;            }            .flex-direction-nav li a.flex-prev {                left: 40px;                background: url(img/prev.png) center center no-repeat;            }            .flex-direction-nav li a.flex-next {                right: 40px;                background: url(img/next.png) center center no-repeat;            }         </style>    </head>    <body>        <div style="height:20px;overflow:hidden;">banner图</div>        <div class="flexslider">            <ul class="slides">                <li style="background:url(img/img1.jpg) 50% 0 no-repeat;"></li>                <li style="background:url(img/img2.jpg) 50% 0 no-repeat;"></li>                <li style="background:url(img/img3.jpg) 50% 0 no-repeat;"></li>                <li style="background:url(img/img4.jpg) 50% 0 no-repeat;"></li>                <li style="background:url(img/img5.jpg) 50% 0 no-repeat;"></li>            </ul>        </div>        <pre> $(window).load(function() { $('.flexslider').flexslider({  animation: "fade",              //String: Select your animation type, "fade" or "slide"                  图片变换方式：淡入淡出或者滑动  slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"          图片设置为滑动式时的滑动方向：左右或者上下  slideshow: true,                //Boolean: Animate slider automatically                                  载入页面时，是否自动播放  slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds         自动播放速度毫秒  animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds                  动画淡入淡出效果延时  directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)          是否显示左右控制按钮  controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage              是否显示控制菜单  keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys                       键盘左右方向键控制图片滑动  mousewheel: false,              //Boolean: Allow slider navigating via mousewheel                        鼠标滚轮控制制图片滑动  prevText: "Previous",           //String: Set the text for the "previous" directionNav item              设置文本的字符串：“以前的”directionnav项目  nextText: "Next",               //String: Set the text for the "next" directionNav item                   看过《文本字符串：“下”的directionnav item  pausePlay: false,               //Boolean: Create pause/play dynamic element                              布尔：create暂停/播放动态元素  pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item                     字符串：设置文字为“暂停”pauseplay项目  playText: 'Play',               //String: Set the text for the "play" pausePlay item                      字符串：在“玩”pauseplay项设置文本  randomize: false,               //Boolean: Randomize slide order                                          是否随即幻灯片  slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)初始化第一次显示图片位置  animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end            是否循环滚动  pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.                              布尔：暂停幻灯片的控制要素互动的时候，强烈推荐。  pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering                         布尔：暂停幻灯片演示当鼠标悬停的滑块，然后恢复时不再徘徊  controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.                  该导航元素的容器说，这应该是appended太。默认的容器是flexslider元。实例的使用将是“容器”，# .flexslider“容器”，等等。如果没有发现了元素的默认行为，将被考虑。  manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航  manualControlEvent:"",          //String:自定义导航控制触发事件:默认是click,可以设定hover  start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide                                       回调：功能（滑块）-当滑块加载第一个幻灯片时触发  before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation                              回调：功能（滑块）-与每个滑块动画异步触发  after: function(){},            //Callback: function(slider) - Fires after each slider animation completes                                  回调：功能（滑块）-每个滑块动画完成后触发  end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)                  当滑块到达上一个幻灯片（异步）时发生火灾 });}); </pre>    </body></html>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160

配置参数

        <pre> $(window).load(function() { $('.flexslider').flexslider({  animation: "fade",              //String: Select your animation type, "fade" or "slide"                  图片变换方式：淡入淡出或者滑动  slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"          图片设置为滑动式时的滑动方向：左右或者上下  slideshow: true,                //Boolean: Animate slider automatically                                  载入页面时，是否自动播放  slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds         自动播放速度毫秒  animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds                  动画淡入淡出效果延时  directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)          是否显示左右控制按钮  controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage              是否显示控制菜单  keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys                       键盘左右方向键控制图片滑动  mousewheel: false,              //Boolean: Allow slider navigating via mousewheel                        鼠标滚轮控制制图片滑动  prevText: "Previous",           //String: Set the text for the "previous" directionNav item              设置文本的字符串：“以前的”directionnav项目  nextText: "Next",               //String: Set the text for the "next" directionNav item                   看过《文本字符串：“下”的directionnav item  pausePlay: false,               //Boolean: Create pause/play dynamic element                              布尔：create暂停/播放动态元素  pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item                     字符串：设置文字为“暂停”pauseplay项目  playText: 'Play',               //String: Set the text for the "play" pausePlay item                      字符串：在“玩”pauseplay项设置文本  randomize: false,               //Boolean: Randomize slide order                                          是否随即幻灯片  slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)初始化第一次显示图片位置  animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end            是否循环滚动  pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.                              布尔：暂停幻灯片的控制要素互动的时候，强烈推荐。  pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering                         布尔：暂停幻灯片演示当鼠标悬停的滑块，然后恢复时不再徘徊  controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.                  该导航元素的容器说，这应该是appended太。默认的容器是flexslider元。实例的使用将是“容器”，# .flexslider“容器”，等等。如果没有发现了元素的默认行为，将被考虑。  manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航  manualControlEvent:"",          //String:自定义导航控制触发事件:默认是click,可以设定hover  start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide                                       回调：功能（滑块）-当滑块加载第一个幻灯片时触发  before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation                              回调：功能（滑块）-与每个滑块动画异步触发  after: function(){},            //Callback: function(slider) - Fires after each slider animation completes                                  回调：功能（滑块）-每个滑块动画完成后触发  end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)                  当滑块到达上一个幻灯片（异步）时发生火灾 });}); </pre>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
这里写图片描述
绿萝哥哥
关注
JS 实现3D立体效果的首页轮播图
01-03
JS 实现3D立体效果的首页轮播图：http://blog.csdn.net/libin_1/article/details/50451121
立体视觉轮播图
mumu42的博客
08-25 610
立体视觉轮播图
前端JS特效第28波：jquery实现3D旋转轮播图片代码
最新发布
wangtianming88的专栏
07-10 307
jquery实现3D旋转轮播图片代码
3D立体效果轮播图
qq_39035580的博客
06-17 3477
今天我们来下一个写一个3D轮播图 先看一下效果：
3D 立体感 轮播图 翻转效果，更好的视觉效果
panhuanqin的博客
10-15 2668
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box{ position: relati
微信小程序实现的3d轮播图效果示例【基于swiper组件】
10-17
在微信小程序中实现3D轮播图效果可以通过使用基础组件swiper来完成，该组件提供了强大的轮播图功能，可以通过简单的属性设置和事件监听来实现丰富的交互效果。下面将详细介绍相关知识点： 1. 微信小程序swiper组件...
VUE 3D轮播图封装实现方法
08-27
轮播图封装实现方法是指使用VUE框架实现的3D轮播图效果，具有无缝轮播、进入变大、离开缩小（类3D切换效果）等功能点。 二、实现功能点 （1）、无缝轮播 无缝轮播是指轮播图可以无缝连接的效果，即当用户滑动到...
基于JS实现仿百度百家主页的轮播图效果
10-20
基于JS实现仿百度百家主页的轮播图效果的知识点主要涉及到网页前端开发中实现轮播图的几种基本技术，包括HTML、CSS和JavaScript的应用。下面详细说明这些知识点： 1. HTML结构搭建轮播图框架：在HTML代码中，首先...
详解JavaScript实现动态的轮播图效果
10-17
JavaScript 实现动态轮播图是一种常见的网页交互效果，它能够为用户提供流畅的图像展示体验，通常用于产品展示、幻灯片等场景。本篇文章将深入探讨如何使用 JavaScript 实现这一功能，结合示例代码帮助读者理解和...
js立体图片轮播特效
11-17
js立体图片轮播特效
3d立体轮播
08-14
一个立体的滚动轮播
jQuery轮播图
12-24
jQuery实现轮播图效果，适合初学者学习轮播图效果。。
漂亮的html首页
04-12
漂亮的html首页，附加js文件和css文件，高端大气上档次
CSS3实现立体轮播
08-27
此时HTML5+css3实现的轮播图，鉴于3D立体展现，喜欢的可以玩下
3DFlipSlider是一款纯JS和CSS3超酷3D翻转式幻灯片插件
08-08
3D-Flip-Slider是一款纯JS和CSS3超酷3D翻转式幻灯片插件。该幻灯片在点击前后按钮时，图片或幻灯片内容以3D翻转的方式进行切换。
3D自动轮播图特效代码
爱酷码的博客
05-07 2139
代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>3D自动图片轮播</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js">&lt...
原生JS实现书本立体特效
越陌度阡
08-11 916
给大家分享一个原生JS实现的书本立体特效，效果如下： 实现这个特效需要的三张图片如下： 第一张图：0.jpg 第二张图 1.jpg 第三张图：3.jpg 实现代码如下，欢迎大家复制粘贴。 <!doctype html> <html> <head> <meta charset="utf-8"> <t.........
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值