html5学习:轮播图
2015-12-09 10:21
507 查看
<! doctype html><!-- 声明HTML5 --> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5布局小案例</title> <style> body,header,footer,div,section,aside,article{border:0px;padding:0px; border-spacing:0px;} header{ width:100%; background-color:#FFF000; height:80px; } header div{ width:100px; height:80px; background-color:#333999; } .f{ width:400px; margin:200px; overflow:hidden; } .f_aaa{ width:2000px; height:300px; -webkit-transition:all 0.3s ease-in-out; } .f_aa{ width:400px; float:left; } .f_cfq{ padding-top:10px; text-aligh:center; } </style> </head> <body onload=a();> <!-- header头部 --> <!-- div表示身体 --> <div id="mainbody"> <!-- 这里放轮播图 --> <div class="f"> <div id="aaa" class="f_aaa"> <img class="f_aa" src="../images/logo.jpg" width="200" height="200" > <img class="f_aa" src="../images/logo.jpg" width="200" height="200" > <img class="f_aa" src="../images/logo.jpg" width="200" height="200" > <img class="f_aa" src="../images/logo.jpg" width="200" height="200" > </div> <div id="cfq" class="f_cfq"> <a href="#1">图片1</a> <a href="#2">图片2</a> <a href="#3">图片3</a> <a href="#4">图片4</a> </div> </div> </div> <!-- footer脚部 --> <footer> 脚步地址@。。。。。 </footer> </body> <script type="text/javascript"> function a(){ var $ = function(id){return document.getElementById(id);}; var tp = $("aaa");//图片拾取 var lj = $("cfq").getElementsByTagName("a");//链接拾取 var ljsl = lj.length;//对链接数量进行统计 if (tp && ljsl){//判断图片与链接数量相等 for (var i = 0; i < ljsl; i+=1) { lj[i].onclick = function() { var index = Number(this.href.replace(/.*#/g,"") || 1); //上面一行判断当前链接与点击的链接是非法的相等,如果不相等,则移动图片 tp.style.marginLeft = (1 - index) * 400 + "px"; return false; } } } } </script> </html>
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- jQuery+HTML5加入购物车代码分享
- 基于Jquery和html5的7款个性化地图插件
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5使用DeviceOrientation实现摇一摇功能
- 使用HTML5中postMessage知识点解决Ajax中POST跨域问题
- MVC中基于Ajax和HTML5实现文件上传功能
- jquery+html5烂漫爱心表白动画代码分享
- spring+html5实现安全传输随机数字密码键盘