全屏背景轮播

觉得Web前端也挺好玩的,一直想写WordPress主题,但是自己CSS太渣了。先学学基础的东西吧。看慕课网的视频( http://www.imooc.com/learn/18http://www.imooc.com/learn/445 )参考他的代码写了个全屏背景的轮播~

全屏背景轮播
全屏背景轮播

演示:http://youthlin.com/demo/banner/

首先是HTML的结构,这样:

然后是CSS,从上到下按照顺序写的,都是参照上面两个链接的视频写的,不过那个按钮组里的按钮我改成了方的,圆的不好看(-。-;)
设置背景图拉伸:background-size: cover;
自定义鼠标样式:cursor: url('img/prev.ico'),pointer;

关键的jQuery代码:
首先是使背景全屏:

然后是各个变量的设置:

完了后依次按照需要写各个功能,首先切换下一个的效果:

因为背景变换在很多个地方都要用,所以写成一个函数animate:

函数showButton作用是高亮显示当前按钮:

再绑定点击上一个的事件:

点击每个按钮的切换:

还要设置自动播放:

注释都是我自己查的各个用法,挺好懂的。完整代码可以看Demo的源代码……^_^


“全屏背景轮播”的10个回复

Loading...

发表评论

电子邮件地址不会被公开。 必填项已用*标注