JS原生轮播-基础篇(HTML+CSS)部分
2015-07-28 10:35
676 查看
根据慕课网的轮播教程,今早也写了一个,主要是把思路捋清楚,下面的代码我尽全力把每一行解释清楚,
我也是根据我今早写的思路一步一步来,希望能帮到读者!
那么就从最基础的HTML和CSS开始写
CSS
在这里为了更清楚,请原谅我盗几张图
![](http://img.blog.csdn.net/20150728103142618)
这就是我们写完CSS的样式,在蓝色背景之后的都被隐藏了,也就是之后的picture2,3,4
这就是hidden的作用,我们通过调整left的值,我的代码图片是1024px宽,我也就是我如果定位到
left=-1024px 那就回变为第二张图,但我的源码之所以从-1024px开始,因为要实现循环滚动效果
这里比较简单,下一篇我在写JS的部分
我也是根据我今早写的思路一步一步来,希望能帮到读者!
那么就从最基础的HTML和CSS开始写
<div id="contain"> <ul id="contain_imgs" style="left:-1024px;"> <li><img src="haizei4.jpg"/></li> <li><img src="haizei1.jpg"/></li> <li><img src="haizei2.jpg"/></li> <li><img src="haizei3.jpg"/></li> <li><img src="haizei4.jpg"/></li> <li><img src="haizei1.jpg"/></li> </ul> <a href="javascript:;" id="prev" class="arrow"><</a>//左箭头 <a href="javascript:;" id="next" class="arrow">></a>//右箭头 <div id="link">//这几个是下面的按钮,点击那个就会切换到哪个图片 <span class="on"></span> <span></span> <span></span> <span></span> </div> </div>
CSS
#contain_imgs{ margin: 0 auto; padding: 0px; } #contain{ margin: 0 auto; width: 1024px; height: 575px; position: relative;//核心代码,因为我们需要绝对定位,先把父元素设为相对定位 overflow: hidden;//其他的隐藏起来 } #contain_imgs{ position: absolute;//绝对定位,这样我们就可以定位left值,做到改变left的值可以切换图片 top: 0px; width: 6144px; height: 576px; list-style: none; z-index: 1; } #contain_imgs li{ width: 1024px; height: 575px; float: left; } #prev { left: 20px; } #next { right: 20px; } .arrow { cursor: pointer; display: none; line-height: 100px; text-align: center; font-size: 100px; font-weight: bold; width: 100px; height: 100px; position: absolute; z-index: 2; //避免遮盖 top: 220px; background-color: RGBA(0,0,0,.3); color: #fff; text-decoration: none; } .arrow:hover { background-color: RGBA(0,0,0,.7);//最后的数是用来调整透明度 } #contain:hover .arrow { display: block; } #link{position: absolute; left:390px; bottom: 10px; z-index: 2; } #link span{ margin: 0 10px; cursor: pointer; float: left; border: 1px white solid; width: 20px; height: 20px; border-radius: 50%;//做成圆形按钮 background-color: black; } #link .on{ background-color: red;//当我们切换按钮时用到的 }
在这里为了更清楚,请原谅我盗几张图
这就是我们写完CSS的样式,在蓝色背景之后的都被隐藏了,也就是之后的picture2,3,4
这就是hidden的作用,我们通过调整left的值,我的代码图片是1024px宽,我也就是我如果定位到
left=-1024px 那就回变为第二张图,但我的源码之所以从-1024px开始,因为要实现循环滚动效果
这里比较简单,下一篇我在写JS的部分
相关文章推荐
- javascript制作幻灯片(360度全景图片)
- 关于json中null的问题
- javascript每四个数字增加一个空格,在输入银行卡号时候随着输之变动
- 详解JavaScript ES6中的模板字符串
- javascript解决IE6下hover问题的方法
- NSDictionary 或者NSArray(NSMutableArray) ==>> NSData ==>> NSString (Json):
- js 事件绑定
- JSVM使用简介
- 学习Javascript闭包(Closure)
- json和jsonp的联系和区别(转载)
- JavaScript如何自定义trim方法
- Javascript定义类(class)的三种方法
- js去除数组重复
- 利用console学习和调试JavaScript~.~
- js 选项卡切换
- JSVM介绍以及如何配出各种可分级
- 详解JavaScript ES6中的Generator
- js 计时器页面跳转
- 开发环境下jboss 7.1.1 Final 的jsp热部署解决方案--转
- JavaScript 文件拖拽上传插件 dropzone.js 介绍