2020/01/06笔记

轮播图

• 轮播图定时无缝轮播
  • 1 .有在网上找到比较简洁的使用jq方法，运用jq中animate方法，该方法有四个参数
  • 2. 轮播如各小圆点对应各图片

$(selector).animate(styles,speed,easing,callback)
//callback 可选。animate 函数执行完之后，要执行的函数。

	$('.c').mouseover(function(){
					clearInterval(timer);
				}) //鼠标停在图片上时 轮播动画停止)
					
	 $('.c').mouseout(function(){
	 	autoChange();
	 }) // 鼠标离开图片时轮播动画继续播)
	autoChange();  //开启自动播放
// 定时播放
function autoChange(){
		timer = setInterval(function() {
                $(".wrap_my").animate({
                    "left": "-1136px"
                }, 500, function(){
                    $(".wrap_my").children("ul:first").insertAfter($(".wrap_my").children("ul:last"));
                    //将第一张图片克隆到最后使其可以无缝轮播
                    $(".wrap_my").css("left", 0);
                });
            }, 2500);
	}

可实现定时无缝轮播，但之前的点击可过渡与现在的animate重合，使得轮播时没有过渡效果。并且不晓得怎么在callback中增加代码，使得小圆点与图片对应。

思路：轮播两张图片，为实现无缝自动轮播，可在两张图片后再加上第一张图片，当轮播到最后一张图片时，立马切换到第一张，因为切换的快，用户看不出于第一张的区别，再往后轮播即可。但是有一个问题，就是如何让轮播到最后一张时立马切换，此时用的是animate(),最后一个回调函数，是在当前面执行完后或者满足回调函数中的条件后会立马执行此回调函数。

$('.c').mouseover(function () {
			clearInterval(timer);
		}) //鼠标停在图片上时 轮播动画停止)
	
		$('.c').mouseout(function () {
			autoChange();
		}) // 鼠标离开图片时轮播动画继续播)
		autoChange();  //开启自动播放
		// 定时播放
		var index = 0;
		function autoChange() {
	
			timer = setInterval(function () {
				index++;
				// console.log(index)
				$(".wrap_my").animate({
					"left": `${-index * 1136}px`
				}, 500, function () {
					if (index >= 2) {
						// console.log('last')
					$('.wrap_my').css({ 'left': '0' });
					index = 0;
				}
				})
	
				if(index===1) {
				$('#b').addClass('light').siblings().removeClass('light');
				$('.qiye').html('联盟');
			}
			if(index===2) {
				$('#a').addClass('light').siblings().removeClass('light');
				$('.qiye').html('企业');
			}
	
			}, 3000);
			
		}

//jquery中元素增加class,并且其兄弟元素移除class是可以连在一起写的。

jquery 中fullpage插件

* 1.使用fullpage方法
* 2.例如 当页尾不满一页版面的高度，如何能以页尾高的结束+上一版面的一部分=一页版面高度
像这样

查看文档：https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs
创建更小或更大的部分
演示完整Page.js提供了一种方法来删除部分和幻灯片的全屏高度限制。可以创建高度小于或大于视图的部分。这是页脚的理想方式。很重要。如果网站的初始加载中有多个部分，则fullPage.js将不会滚动以查看下一个部分，因为它已经在视图中。

创建更小的部分，只需在要应用的部分中使用fp-auto-height 类即可，则可以调用您的section / slide中定义的高度。

< div class = “ section ” >整个视图</ div >
< div class = “ section fp-auto-height ” >自动高度</ div >
响应自动高度
演示响应自动高度可以通过使用fp-auto-height-responsive类来调用。这种方式部分将全屏，直到响应模式终止。根据定义调整大小，可能是大于或小于视口。
加上类名还是没有解决，因此百度，在css,js都需要有稍些修改

css
/* fullpage插件 */
#footer_a {
    height: 480px;
}
.fp-auto-height{
    height:480px !important;
 }

jqueryfullPage.css

.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100% !important;
}

因为fullpage插件会给每一版都加上fp-tableCell,并且默认为视口高度，所以需要修改页尾的高度，这个办法有点挫，以后遇到再进行修改，应该会有更好的解决办法

查看此博客得知：https://blog.youkuaiyun.com/qq_39137687/article/details/83069646
下面修改fullpage.js的问题，在引用的fullpage.js文件中找到performMovement这个方法，按照如下方法，修改一下，就可以达到想要的效果（footer紧挨着上一屏，并且滚动的高度是footer的height）

/**
		* Performs the movement (by CSS3 or by jQuery)
		*/
		function performMovement(v){
			// using CSS3 translate functionality
			if (options.css3 && options.autoScrolling && !options.scrollBar) {  
				　　　　if (v.anchorLink == '6'){ //当滚屏到最后一屏时间 
				　　　　　　footer_a = $('#nextS').height();//倒数第二屏的高度  
				　　　　　　footer_h = $('#footer').height();  //footer的高度
			   　　　　　　 var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)';  
			   　　　　 }else{  
			   　　　　　　var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';  
			   　　　　}  
			   　　　　transformContainer(translate3d, true);  
			   　　　　setTimeout(function () {  
			   　　　　　　afterSectionLoads(v);  
			   　　　　}, options.scrollingSpeed);  
			  　　 } 

			// using jQuery animate
			else{
				var scrollSettings = getScrollSettings(v);

				$(scrollSettings.element).animate(
					scrollSettings.options
				, options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating  `html, body`
					afterSectionLoads(v);
				});
			}
		}

因此知道更多fullpage的一些方法

• onLeave（ ，origin，）destinationdirection
  一旦“用户离开”部分，过渡到新部分，就会触发此后。返回“ false”将在移动发生之前取消移动。
• afterRender（）
  这个回调在页面结构生成后立即被触发。这是您要用来初始化其他插件的回调函数，或者触发任何需要DOM准备就绪的代码（因为这个插件修改了DOM来创建最终的结构）。参阅请常见问题了解更多信息。
  **详细可见：juqery插件fullPage.js

将彩色图片变为黑白属性

.section6 .union li img{  
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}//100%为过滤为黑白
.section6 .union li:hover img{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}//显示原来的彩色

绝对定位相对于视口定位，貌似有给相对于body定位的（以前传智播客碰到的一道经典题，忘记了！回头补上）