Code666 (代码贴、代码片段)

[C++] 轮播 →→→→→进入此内容的聊天室

来自 , 2020-01-20, 写在 C++, 查看 98 次.
URL http://www.code666.cn/view/5bce843d
  1. //电视剧大图滚动
  2. (function(jq){
  3.         var posterTvGrid = function(o, options, data){
  4.                 this.parent = jq("#"+ o);
  5.                 this.body   = jq("body");
  6.                 if (this.parent.length <= 0) {
  7.                         return false;
  8.                 }
  9.                
  10.                 this.options = jq.extend({}, posterTvGrid.options, options);
  11.                 if(typeof(data) !== 'object') return false;
  12.  
  13.                 this.data = data || {};
  14.                 this.reset();
  15.                 //处理页面resize
  16.                 var _this = this;
  17.                 jq(window).resize(function(){
  18.                                 _this.reset();
  19.                 });
  20.         };
  21.         posterTvGrid.prototype = {
  22.                 reset: function(options){
  23.                         if(typeof(options) == 'object'){
  24.                                 jq.extend(this.options, options);      
  25.                         }
  26.                         if(parseInt(this.body.outerWidth())>1255 || navigator.userAgent.indexOf('iPad') != -1){
  27.                                 this.options.width = 1190;     
  28.                         }else{
  29.                                 this.options.width = 970;      
  30.                         }
  31.                         this.total = this.data.length;
  32.                         this.pageNow = this.options.initPage;
  33.                         this.preLeft = 0;
  34.                         this.nextLeft = this.options.width-530;
  35.                         this.preNLeft = -530;
  36.                         this.nextNLeft = this.options.width;
  37.                         this.pageNowLeft = (this.options.width-640)/2
  38.                         this.drawContent();
  39.                 },
  40.                 drawContent: function(){
  41.                         this.parent.empty();
  42.                         this.parent.css({width:this.options.width+"px", height:this.options.height+"px", position: "relative"});
  43.                         this.content = document.createElement("DIV");
  44.                         this.content.className = this.options.className;
  45.                         this.content.cssText = "width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;";
  46.                                 this.bottomNav = document.createElement("DIV");
  47.                                 this.bottomNav.className = "bottomNav";
  48.                                 for(var i=1; i<= this.total; i++){
  49.                                         var bottomItem = document.createElement("DIV");
  50.                                         bottomItem.className = "bottomNavButtonOFF";
  51.                                         if(i == this.pageNow){
  52.                                                 bottomItem.className = "bottomNavButtonOFF bottomNavButtonON";
  53.                                         }
  54.                                         bottomItem.setAttribute("ref", i);
  55.                                         this.bottomNav.appendChild(bottomItem);
  56.                                 }
  57.                                 this.content.appendChild(this.bottomNav);
  58.                                 this.bannerControls = '<div class="bannerControls"> <div class="leftNav" style="display: block;"></div> <div class="rightNav" style="display: block;"></div> </div>';
  59.                                 this.content.innerHTML += this.bannerControls;
  60.  
  61.                         this.contentHolder = document.createElement("DIV");
  62.                         this.contentHolder.style.width = this.options.width + 'px';
  63.                         this.contentHolder.style.height = this.options.height + 'px';
  64.                        
  65.                         for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){
  66.                                 var contentHolderUnit = document.createElement("DIV");
  67.                                 contentHolderUnit.className = "contentHolderUnit";
  68.                                 contentHolderUnit.setAttribute("ref", i);
  69.                                 contentHolderUnit.setAttribute("id", 'contentHolderUnit' + (i));
  70.                                 var unitItem = '<a href="'+this.data[item].url+'" target="_blank" class="elementLink">';
  71.                                 unitItem += '</a>';
  72.                                 unitItem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>';
  73.                                 unitItem += '<span class="elementOverlay"></span>';
  74.                                 unitItem += '<span class="leftShadow"></span>';
  75.                                 unitItem += '<span class="rightShadow"></span>';
  76.                                 contentHolderUnit.innerHTML = unitItem;
  77.                                 this.contentHolder.appendChild(contentHolderUnit);
  78.                         }
  79.                         this.content.appendChild(this.contentHolder);
  80.                         this.parent.append(this.content);
  81.                         this.parent.css({overflow:'hidden'});
  82.                         this.initContent();
  83.                         this.bind();
  84.                         this.start();
  85.                 },
  86.                 initContent: function(){
  87.                         contentHolderUnit = this.parent.find(".contentHolderUnit");
  88.                         contentHolderUnit.css({width:'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zIndex:0, marginTop: '135px'});
  89.                         this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({width:'640px',height:'270px', opacity: 1, left: this.pageNowLeft+'px', zIndex: 3, marginTop: 0});
  90.                         this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .elementOverlay").css({opacity:0});
  91.                         this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .leftShadow").css({opacity:1});
  92.                         this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .rightShadow").css({opacity:1});
  93.                        
  94.                         var pre = this.pageNow > 1 ? this.pageNow -1: this.total;
  95.                         var next = this.pageNow == this.total ? 1 : this.pageNow + 1;
  96.                         this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 1, left: this.preLeft+'px',height: '224px', width: '530px', zIndex: 0, marginTop: '23px'});
  97.                         this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
  98.                         this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
  99.                         this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
  100.  
  101.                         this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 1, left: this.nextLeft+'px',height: '224px', width: '530px', zIndex: 0, marginTop: '23px'});
  102.                         this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
  103.                         this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
  104.                         this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
  105.                 },
  106.                 bind: function(){
  107.                         this.leftNav = this.parent.find(".leftNav");
  108.                         this.rightNav = this.parent.find(".rightNav");
  109.                         this.bottonNav = this.parent.find(".bottomNavButtonOFF");
  110.                         this.lists = this.parent.find(".contentHolderUnit");
  111.                         var _this = this;
  112.                         this.parent.mouseover(function(){
  113.                                 _this.stop();
  114.                                 _this.leftNav.show();
  115.                                 _this.rightNav.show();
  116.                         });
  117.                         this.parent.mouseout(function(){
  118.                                 _this.start();
  119.                                 //_this.leftNav.hide();
  120.                                 //_this.rightNav.hide();
  121.                         });
  122.                        
  123.                         _this.leftNav.click(function(){
  124.                                 _this.turn("right");                                     
  125.                         });
  126.                         _this.rightNav.click(function(){
  127.                                 _this.turn("left");                                      
  128.                         });
  129.                         _this.bottonNav.click(function(){
  130.                                 var ref = parseInt(this.getAttribute("ref"));
  131.                                 if(_this.pageNow == ref) return false;
  132.  
  133.                                 if(_this.pageNow < ref){
  134.                                         var rightAbs = ref - _this.pageNow;
  135.                                         var leftAbs = _this.pageNow + _this.total - ref;
  136.                                 }else{
  137.                                         var rightAbs = _this.total - _this.pageNow + ref;
  138.                                         var leftAbs = _this.pageNow - ref;
  139.                                 }
  140.                                 if(leftAbs < rightAbs){
  141.                                          dir = "right";
  142.                                 }else{
  143.                                          dir = "left"; 
  144.                                 }
  145.  
  146.                                 _this.turnpage(ref, dir);
  147.                                 return false;
  148.                         });
  149.                        
  150.                         _this.lists.click(function(e){
  151.                                 var ref = parseInt(this.getAttribute("ref"));
  152.                                 if(_this.pageNow == ref) {
  153.                                         return true;
  154.                                 }else{
  155.                                         e.preventDefault();
  156.                                 }
  157.                                 if(_this.pageNow < ref){
  158.                                         var rightAbs = ref - _this.pageNow;
  159.                                         var leftAbs = _this.pageNow + _this.total - ref;
  160.                                 }else{
  161.                                         var rightAbs = _this.total - _this.pageNow + ref;
  162.                                         var leftAbs = _this.pageNow - ref;
  163.                                 }
  164.                                 if(leftAbs < rightAbs){
  165.                                          dir = "right";
  166.                                 }else{
  167.                                          dir = "left"; 
  168.                                 }
  169.                                 _this.turnpage(ref, dir);      
  170.  
  171.                         });
  172.                 },
  173.                 initBottomNav: function(){
  174.                                 this.parent.find(".bottomNavButtonOFF").removeClass("bottomNavButtonON");
  175.                                 this.parent.find(".bottomNavButtonOFF:nth-child("+this.pageNow+")").addClass("bottomNavButtonON");
  176.                 },
  177.                 start: function(){
  178.                         var _this = this;
  179.                         if(_this.timerId) _this.stop();
  180.                         _this.timerId = setInterval(function(){
  181.                                 if(_this.options.direct == "left"){
  182.                                         _this.turn("left");    
  183.                                 }else{
  184.                                         _this.turn("right");   
  185.                                 }
  186.                         }, _this.options.delay);
  187.                 },
  188.                 stop: function(){
  189.                         clearInterval(this.timerId);
  190.                 },
  191.                 turn: function(dir){
  192.                         var _this = this;
  193.                        
  194.                         if(dir == "right"){
  195.                                 var page = _this.pageNow -1;
  196.                                 if(page <= 0) page = _this.total;
  197.                         }else{
  198.                                 var page = _this.pageNow + 1;
  199.                                 if(page > _this.total) page = 1;
  200.                         }
  201.                         _this.turnpage(page, dir);
  202.                 },
  203.                 turnpage: function(page, dir){
  204.                         var _this = this;
  205.                         if(_this.locked) return false;
  206.                         _this.locked = true;
  207.                         if(_this.pageNow == page) return false;
  208.                        
  209.                         var run = function(page, dir, t){
  210.                                 var pre = page > 1 ? page -1: _this.total;
  211.                                 var next = page == _this.total ? 1 : page + 1;
  212.                                 var preP = pre - 1 >= 1 ? pre-1 : _this.total;
  213.                                 var nextN = next + 1 > _this.total ? 1 : next+1;
  214.                                 if(pre != _this.pageNow && next != _this.pageNow){
  215.                                         var nowpre = _this.pageNow > 1 ? _this.pageNow -1: _this.total;
  216.                                         var nownext = _this.pageNow == _this.total ? 1 : _this.pageNow + 1;
  217.                                         _this.parent.find(".contentHolderUnit:nth-child("+nowpre+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
  218.                                         _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
  219.                                         _this.parent.find(".contentHolderUnit:nth-child("+nownext+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
  220.                                 }
  221.                                 if(dir == 'left'){                                     
  222.                                         _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
  223.                                
  224.                                        
  225.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
  226.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '224px', width: '530px', zIndex: 2, marginTop: '23px'}, t);
  227.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
  228.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
  229.                                        
  230.                                        
  231.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3});
  232.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '270px', width: '640px', zIndex: 3, marginTop: '0'}, t);
  233.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
  234.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
  235.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
  236.                                        
  237.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 0, left: _this.nextNLeft+'px', height: '100px', width: '530px', zIndex: 2, marginTop: '85px'});
  238.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '224px', width:"530px", zIndex: 2, marginTop: '23px'}, t);
  239.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
  240.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
  241.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
  242.                                         _this.parent.find(".contentHolderUnit:nth-child("+preP+")").css({zIndex:0});
  243.                                         _this.parent.find(".contentHolderUnit:nth-child("+preP+")").animate({width:'530px',height:'100px', opacity: 0, left:_this.preNLeft+'px', zIndex:0, marginTop: '85px'},t, "", function(){_this.locked=false;});
  244.                                        
  245.                                        
  246.                                 }else{
  247.                                         _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
  248.                                        
  249.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({zIndex:2});
  250.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '224px', width: '530px', zIndex: 2, marginTop: '23px'}, t);
  251.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
  252.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
  253.                                         _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
  254.                                        
  255.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}, t);
  256.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '270px', width: '640px', zIndex: 3, marginTop: '0px'}, t);
  257.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
  258.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
  259.                                         _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
  260.                                        
  261.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 0, left: _this.preNLeft+'px', height: '100px', width: '530px', zIndex: 2, marginTop: '85px'});
  262.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '224px', width: '530px', zIndex: 2, marginTop: '23px'}, t);
  263.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
  264.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
  265.                                         _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
  266.                                        
  267.                                         _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").css({zIndex:0});
  268.                                         _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").animate({width:'530px',height:'100px', opacity: 0, left:_this.nextNLeft+'px', zIndex:0, marginTop: '85px'}, t, "",function(){_this.locked=false;});
  269.                                 }
  270.                        
  271.                                 _this.pageNow = page;
  272.                                 _this.initBottomNav();
  273.                         };
  274.                        
  275.                         run(page, dir,_this.options.speed);                                    
  276.                        
  277.                 }
  278.                
  279.         };
  280.  
  281.         posterTvGrid.options = {
  282.                 offsetPages : 3,//默认可视最大条数
  283.                 direct : "left",//滚动的方向
  284.                 initPage : 1,//默认当前显示第几条
  285.                 className : "posterTvGrid",//最外层样式
  286.                 autoWidth : true,//默认不用设置宽
  287.                 width : 970,//最外层宽，需要使用的时候在传,默认由程序自动判断
  288.                 height : 310,//最外层高  
  289.                 delay : 5000,//滚动间隔（毫秒）
  290.                 speed : 500 //滚动速度毫秒
  291.         };
  292.        
  293.         window.posterTvGrid = posterTvGrid;
  294. })(jQuery);
  295.  

回复 "轮播"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666