觉得Web前端也挺好玩的,一直想写WordPress主题,但是自己CSS太渣了。先学学基础的东西吧。看慕课网的视频( http://www.imooc.com/learn/18,http://www.imooc.com/learn/445 )参考他的代码写了个全屏背景的轮播~
![全屏背景轮播](http://youthlin.com/wp-content/uploads/2015/08/2015-08-13-31-300x169.png)
演示:https://youthlin.com/demo/banner/
首先是HTML的结构,这样:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-2.1.4.min.js"></script> <script> jQuery(document).ready(function($){ //代码 }) </script> <link rel="stylesheet" href="a.css"> </head> <body> <header id="site-nav"> <nav> <ul> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> <li><a href="#">链接4</a></li> </ul> </nav> </header> <div id="banner"> <div id="inner"> <div class="on content" data-imgsrc="img/banner.jpg"> <h1><a href="#">1Lorem ipsum dolor sit amet, consectetur.</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias doloribus praesentium officiis at similique, laborum nemo est amet consequatur, molestias quibusdam aliquam ab illum rerum quod. Similique vel nulla velit.</p></div> <div class="content" data-imgsrc="img/pic01.jpg"> <h1>2.</h1> <p>2</p></div> <div class="content" data-imgsrc="img/pic02.jpg"> <h1>3.</h1> <p>3.</p></div> <div class="content" data-imgsrc="img/pic03.jpg"> <h1>4.</h1> <p>4.</p></div> </div> <div id="buttons"> <span class="on"></span> <span></span> <span></span> <span></span> </div> <a href="javascript:;" class="arrow" id="prev"> </a> <a href="javascript:;" class="arrow" id="next"> </a> </div> <div id="main-content"> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article> </div> <footer></footer> </body> </html>
然后是CSS,从上到下按照顺序写的,都是参照上面两个链接的视频写的,不过那个按钮组里的按钮我改成了方的,圆的不好看(-。-;)
设置背景图拉伸:background-size: cover;
自定义鼠标样式:cursor: url('img/prev.ico'),pointer;
*{ margin: 0;padding: 0; } #banner{ background: url(img/banner.jpg) center no-repeat; background-size: cover; } header#site-nav{ height: 100%; } #site-nav nav ul li{ display: inline-block; line-height: 40px; margin: 0; padding: 0; } #site-nav nav{ position: fixed; width: 100%; background: #ccc; z-index: 3; } #site-nav nav a{ padding: 0 4px; display: inline-block; line-height: inherit; text-decoration: none; } #site-nav nav a:hover{ background: rgba(0,0,0,0.1); color: #4eb; } #banner #inner{ width: 50%; position: absolute; bottom: 5%; left: 25%; background: rgba(255,255,255,.6); } #banner #inner .content{ display: none; } #banner #inner .on{ display: block; } #buttons { position: absolute; z-index: 2; bottom: 2%; left: 45%; } #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 15px; height: 15px; background: #333; margin: 0 5px; } #buttons .on { background: orangered; } #banner .arrow { display: none; text-align: center; font-size: 36px; font-weight: bold; width: 25%; height: inherit; line-height: inherit; position: absolute; z-index: 2; bottom: 0; color: #fff; text-decoration: none; } #banner:hover .arrow{ display: block; text-decoration: none; } #prev{ left: 0; /* http://blog.csdn.net/renfufei/article/details/39339185 http://www.haotu.net/icon/201038/next */ cursor: url('img/prev.ico'),pointer; } #next{ cursor: url('img/next.ico'),pointer; right: 0; }
关键的jQuery代码:
首先是使背景全屏:
// 在此网站看到的全屏效果:http://hairproject.ch/fr/ //获取浏览器可视区域高度 $('#banner').height($(window).height()); //浏览器调整窗口时也调整高度 $(window).resize(function(){ $('#banner').height($(window).height()); })
然后是各个变量的设置:
//各变量 var banner = $('#banner'); var inner = $('#inner'); var buttons = $('#buttons span'); var prev = $('#prev'); var next = $('#next'); var index = 0; var len = buttons.length; var interval = 3000; var timer;
完了后依次按照需要写各个功能,首先切换下一个的效果:
next.bind('click',function(){ //http://www.w3school.com.cn/jquery/event_bind.asp //bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。 if(banner.is(':animated'))return; //http://www.w3school.com.cn/jquery/selector_animated.asp //:animated 选择器选取当前的所有动画元素。 //如果正在动画则不响应本次点击,直接return inner.find('div').eq(index).removeClass('on'); index++; if(index>len-1)index=0; animate(); })
因为背景变换在很多个地方都要用,所以写成一个函数animate:
function animate(){ var img = inner.find('div').eq(index).attr('data-imgsrc'); //http://www.w3school.com.cn/jquery/attributes_attr.asp //attr()获取属性 //console.log(img); banner.fadeTo(500,0.5,function(){ banner.css('background-image','url('+img+')'); banner.css('opacity',0.5); banner.fadeTo(500,1); }); //http://www.w3school.com.cn/jquery/effect_fadeto.asp //fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。 inner.find('div').eq(index).addClass('on'); showButton(); }
函数showButton作用是高亮显示当前按钮:
function showButton(){ buttons.eq(index).addClass('on').siblings().removeClass('on'); //http://www.w3school.com.cn/jquery/traversing_siblings.asp //siblings()获取同胞元素,不包括自己 }
再绑定点击上一个的事件:
prev.bind('click',function(){ if(banner.is(':animated'))return; inner.find('div').eq(index).removeClass('on'); index--; if(index<0)index=len-1; animate(); })
点击每个按钮的切换:
buttons.each(function(){ $(this).bind('click',function(){ if(banner.is(':animated') || index == buttons.index(this))return; inner.find('div').eq(index).removeClass('on'); //获取所点击元素的序号 //http://bbs.csdn.net/topics/340208277 index = buttons.index(this); //console.log(index); animate(); }) })
还要设置自动播放:
function play() { timer = setTimeout(function () { //http://www.w3school.com.cn/jsref/met_win_settimeout.asp //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 next.trigger('click'); //http://www.w3school.com.cn/jquery/event_trigger.asp //trigger() 方法触发被选元素的指定事件类型。 play(); //提示:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 }, interval); } function stop() { clearTimeout(timer); //http://www.w3school.com.cn/jsref/met_win_cleartimeout.asp //clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。 } inner.hover(stop,play);//覆盖在文字上时暂停动画,移开继续 //.hover(hoverIn,hoverOut) play();//上面是定义,这里是调用
注释都是我自己查的各个用法,挺好懂的。完整代码可以看Demo的源代码……^_^
声明
- 本作品采用署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。除非特别注明, 霖博客文章均为原创。
- 转载请保留本文(《全屏背景轮播》)链接地址: https://youthlin.com/?p=1066
- 订阅本站:https://youthlin.com/feed/
“全屏背景轮播”上的10条回复
哇,好多代码,感觉好多都看不懂给
很久没来了来看看
欢迎欢迎
Notice: Use of undefined constant php – assumed ‘php’ in single.php on line 14
//来源: http://youthlin.com/20151066.html
NOTICE: USE OF UNDEFINED CONSTANT RETURN – ASSUMED ‘ RETURN’ IN FUNCTIONS.PHP ON LINE 46
//来源: http://youthlin.com/20151066.html
感谢提醒,刚刚打开了DeBug
做得挺细,挺厉害。在自己网站上挂的效果有干扰蜘蛛的问题没?
这个我没考虑欸 (~ ̄▽ ̄)→))* ̄▽ ̄*)o
你的评论回复是yeah.net的邮箱也,怎么配的