这篇文章主要为大家详细介绍了 javascript 基础知识之 html5 轮播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
1. 轮播图的布局:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- /*去除默认样式*/
- *{
- margin: 0;
- padding: 0;
- }
- /*设置div*/
- #outer{
- width: 520px;
- height: 333px;
- /*设置居中*/
- margin: 50px auto;
- /*
- * 设置背景颜色
- */
- background-color: greenyellow;
- /*设置上下内边距*/
- padding: 10px 0;
- /*为父元素开启相对定位*/
- position: relative;
- /*隐藏溢出的内容*/
- overflow: hidden;
- }
- /*设置ul*/
- #imgList{
- /*去除项目符号*/
- list-style: none;
- /*设置ul的宽度*/
- width: 2600px;
- /*开启绝对定位*/
- position: absolute;
- /*
- * 通过修改ul的left值,可以切换图片
- * 1 0px
- * 2 -520px
- * 3 -1040px
- * 4 -1560px
- * ....
- */
- left: 0px;
- }
- /*设置li*/
- li{
- /*设置元素浮动*/
- float: left;
- /*设置外边距*/
- margin: 0 10px;
- }
- /*设置导航按钮*/
- #nav{
- /*开启绝对定位*/
- position: absolute;
- /*定位*/
- bottom: 20px;
- /*
- * #outer 宽度 520px
- *
- * #nav 宽度 125px
- *
- * 520 - 125 = 395/2 = 197.5
- */
- left: 197px;
- }
- #nav a{
- /*设置a浮动*/
- float: left;
- /*设置宽和高*/
- width: 15px;
- height: 15px;
- /*设置背景颜色*/
- background-color: red;
- /*设置外边距*/
- margin: 0 5px;
- /*设置透明*/
- opacity: 0.5;
- filter: alpha(opacity=50);
- }
- </style>
- </head>
- <body>
- <!--
- 创建一个div作为容器
- -->
- <div id="outer">
- <!--创建一个ul,用来保存图片-->
- <ul id="imgList">
- <li><img src="img/1.jpg" /></li>
- <li><img src="img/2.jpg" /></li>
- <li><img src="img/3.jpg" /></li>
- <li><img src="img/4.jpg" /></li>
- <li><img src="img/5.jpg" /></li>
- </ul>
- <!--创建一个div来放导航按钮-->
- <div id="nav">
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- </div>
- </div>
- </body>
- </html>
2. 轮播图的逻辑:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- /*去除默认样式*/
- *{
- margin: 0;
- padding: 0;
- }
- /*设置div*/
- #outer{
- width: 520px;
- height: 333px;
- /*设置居中*/
- margin: 50px auto;
- /*
- * 设置背景颜色
- */
- background-color: greenyellow;
- /*设置上下内边距*/
- padding: 10px 0;
- /*为父元素开启相对定位*/
- position: relative;
- /*隐藏溢出的内容*/
- overflow: hidden;
- }
- /*设置ul*/
- #imgList{
- /*去除项目符号*/
- list-style: none;
- /*设置ul的宽度*/
- width: 2600px;
- /*开启绝对定位*/
- position: absolute;
- /*
- * 通过修改ul的left值,可以切换图片
- * 1 0px
- * 2 -520px
- * 3 -1040px
- * 4 -1560px
- * ....
- */
- left: 0px;
- }
- /*设置li*/
- li{
- /*设置元素浮动*/
- float: left;
- /*设置外边距*/
- margin: 0 10px;
- }
- /*设置导航按钮*/
- #nav{
- /*开启绝对定位*/
- position: absolute;
- /*定位*/
- bottom: 20px;
- /*
- * #outer 宽度 520px
- *
- * #nav 宽度 125px
- *
- * 520 - 125 = 395/2 = 197.5
- */
- left: 197px;
- }
- #nav a{
- /*设置a浮动*/
- float: left;
- /*设置宽和高*/
- width: 15px;
- height: 15px;
- /*设置背景颜色*/
- background-color: red;
- /*设置外边距*/
- margin: 0 5px;
- /*设置透明*/
- opacity: 0.5;
- filter: alpha(opacity=50);
- }
- #nav a:hover{
- background-color: black;
- }
- </style>
- <script type="text/javascript" src="js/tools.js"></script>
- <script type="text/javascript">
- window.onload = function(){
- //获取id为imgList的ul
- var imgList = document.getElementById("imgList");
- //获取所有的图片标签
- var imgs = document.getElementsByTagName("img");
- //设置ul的宽度
- imgList.style.width = 520 * imgs.length + "px";
- //设置导航按钮居中
- //获取id为outer的div
- var outer = document.getElementById("outer");
- //获取id为nav的div
- var nav = document.getElementById("nav");
- nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px";
- //创建一个变量,来保存当前显示图片的索引
- var index = 0;
- //获取所有的超链接
- var links = document.getElementsByTagName("a");
- //设置对应的超链接变成选中状态
- links[index].style.backgroundColor = "black";
- //开启自动切换图片
- autoChange();
- /*
- * 点击超链接切换到对应的图片
- * 点击第一个超链接,切换到第一个图片
- * 点击第二个超链接,切换到第二个图片
- */
- //为所有的超链接绑定单击响应函数
- for(var i=0 ; i<links.length ; i++){
- //在超链接中添加一个属性
- links[i].num = i;
- links[i].onclick = function(){
- //当切换图片时,为了不受自动切换的影响需要将其关闭
- clearInterval(autoTimer);
- //获取到当前点击的超链接的索引
- //更新当前图片的索引
- index = this.num;
- //切换到对应的图片
- /*
- * 切换图片,就是修改imgList的left属性值
- * 0 0*-520
- * 1 1*-520
- * 4 4*-520
- */
- //imgList.style.left = -520*index + "px";
- //设置过渡效果
- move(imgList , "left" , -520*index , 20 , function(){
- //图片切换完毕,打开自动切换
- autoChange();
- });
- setA();
- };
- }
- //定义一个变量,保存自动切换图片的定时器
- var autoTimer;
- /*
- * 定义一个函数,专门用来自动切换图片
- */
- function autoChange(){
- //开启一个定时器,来负责图片的切换
- autoTimer = setInterval(function(){
- //索引自增
- index++;
- //判断index值是否合法
- index = index % imgs.length;
- //切换图片
- move(imgList , "left" , -520*index , 20 , function(){
- //动画执行完毕,切换导航点
- setA();
- });
- },3000);
- }
- /*
- * 函数专门用来设置超链接的选中状态的
- */
- function setA(){
- /*
- * 因为最后一张图片和第一张是一样的,所以当显示的图片是最后一张时,应该是第一个的超链接变颜色
- */
- if(index >= imgs.length - 1){
- index = 0;
- //已经切换到最后一张,瞬间将其切换到第一张
- imgList.style.left = 0;
- }
- /*遍历超链接*/
- for(var i=0 ; i<links.length ; i++){
- //将所有的超链接的背景颜色都设置为红色
- links[i].style.backgroundColor = "";
- }
- //将当前选中的超链接设置为黑色
- links[index].style.backgroundColor = "black";
- }
- };
- </script>
- </head>
- <body>
- <!--
- 创建一个div作为容器
- -->
- <div id="outer">
- <!--创建一个ul,用来保存图片-->
- <ul id="imgList">
- <li><img src="img/1.jpg" /></li>
- <li><img src="img/2.jpg" /></li>
- <li><img src="img/3.jpg" /></li>
- <li><img src="img/4.jpg" /></li>
- <li><img src="img/5.jpg" /></li>
- <li><img src="img/1.jpg" /></li>
- </ul>
- <!--创建一个div来放导航按钮-->
- <div id="nav">
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
- </div>
- </div>
- </body>
- </html>
外部 js 代码:
/* * 定义一个move()函数来执行一些简单的动画效果 * 参数: * obj 要执行动画的对象 * attr 执行动画时要修改的属性 * target 执行动画的目标位置 * speed 动画执行的速度 * callback 回调函数,当动画执行完毕以后,该回调函数会执行 */ function move(obj, attr, target, speed, callback) { //关闭之前的定时器 /* * 一般都会将定时器的标识作为执行动画对象的属性保存,这样可以确保只有当前对象能访问到定时器 */ clearInterval(obj.timer); //判断向左移还是向右移 //0 --> 800 向右移 //起始位置 < 目标位置 则向右移动,速度为正 //800 --> 0 向左移 //起始位置 > 目标位置 则向左移动,速度为负 //获取元素的起始位置 var current = parseInt(getStyle(obj, attr)); if(current > target) { //起始位置 > 目标位置 则向左移动,速度为负 speed = -speed; } //开启一个定时器,控制box1移动 obj.timer = setInterval(function() { //获取box1的当前的left值 var oldValue = parseInt(getStyle(obj, attr)); //通过旧值来计算新值 var newValue = oldValue + speed; //判断newValue是否大于800 /* * 如果从0 向 800,执行动画,则值越来越大 * 如果从800向0执行动画,则值越来小 */ if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) { newValue = target; } //将box1的left值修改为新值 obj.style[attr] = newValue + "px"; //当box1移动到800px的位置时,停止移动 if(newValue == target) { clearInterval(obj.timer); //调用回调函数 callback && callback(); } }, 30); } /* * 用来获取任意元素的当前样式 * 参数: * obj 要获取样式的元素 * name 要获取的样式的名字 * * 在读取元素的样式时,如果元素没有设置样式, * 则火狐、Chrome等浏览器会自动计算元素的样式值 * 而IE浏览器,有时用不会自动计算,而是返回默认值,比如宽度会返回auto * */ function getStyle(obj, name) { //判断浏览器中是否含有getComputedStyle这个方法 if(window.getComputedStyle) { //支持正常的浏览器 return getComputedStyle(obj, null)[name]; } else { //只支持IE return obj.currentStyle[name]; } } /* * 定义一个专门用来向元素中添加class的函数 * 参数: * obj 要添加class属性的对象 * cn 要添加的class的属性值 */ function addClass(obj, cn) { //如果元素中有该class则不添加,没有才添加 if(!hasClass(obj, cn)) { obj.className += " " + cn; } } /* * 创建一个函数检查一个元素中是否含有指定的class * 如果有,则返回true。否则返回false */ function hasClass(obj, cn) { //创建正则表达式 var reg = new RegExp("\\b" + cn + "\\b"); //返回检查结果 return reg.test(obj.className); } /* * 用来从指定元素中删除class值的方法 */ function removeClass(obj, cn) { //要删除一个class,就是将这个class替换为一个空串 //创建正则表达式 var reg = new RegExp("\\b" + cn + "\\b", "g"); //判断obj中是否含有这个class if(reg.test(obj.className)) { //将内容替换为空串 obj.className = obj.className.replace(reg, ""); } } /* * 用来切换元素的class的方法 * 如果元素中含有该class,则删除 * 如果元素中没有该class,则添加 * */ function toggleClass(obj, cn) { //检查obj中是否含有cn if(hasClass(obj, cn)) { //有该class,则删除 removeClass(obj, cn); } else { //没有该class,则添加 addClass(obj, cn); } }
注:图片自己找
来源: http://www.phperz.com/article/17/0519/327562.html