1.tool.js工具类
function getStyle(obj , name){
if (window.getComputedStyle) {
//正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
}
/*
* 当龟兔赛跑的时候,我们可以不适应用全局变量了,
* 因为都执行一个相同的函数,定时器一开始就暂停
*
* 怎么解决???
* 那就找到唯一标识obj.timer
* 这样就是各自带各自的定时器了
*/
//var timer;//注意这里
//封装成一个函数
/*
* 参数:
* obj 对象
* attr 属性
* target 到达目标
* speed 速度
*
* callback回调函数(续上无限可能)
*/
function move(obj ,attr, target , speed, callback){
//每一次开启之前都要关闭之前的,防止重复使用,速度变快
clearInterval(obj.timer);
/*
* 不应该让用户去判断,而是,让程序员判断
*/
var crruent = parseInt(getStyle(obj,attr));
if (crruent > target) {
//把负值变为正值
//把正值变负值
speed = -speed;
}
//开启定时器
obj.timer = setInterval(function(){
//获取box01原来的left值
//var oldValue = box01.offsetLeft;
//灵活一些,不止使用left,还有top,width,height等
//但是获取的值的是0px,需要使用parseInt()取整:只取到值的部分
var oldValue = parseInt(getStyle(obj,attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//小技巧:让它始终等于800
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target )){
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当到八百的时候停止,但是当10改变的时候,不一定停止了,所以,还得加一个条件
if(newValue == target){
clearInterval(obj.timer);
//当函数定时器结束的时候,调用回调函数
//callback();
//当有回调函数的时候才有,不会导致不调用的出现undefined
callback && callback();
}
},30);
}
//定义一个函数,用来向一个元素种添加指定的class属性值
/*
* 参数:
* obj 要添加的class属性的元素
* cn 要添加的class值
*/
function addClass(obj , cn){
//当有的时候,就跳过,没有的时候就进行添加到b1中
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
};
//写一个函数检查该元素有没有class
function hasClass(obj , cn){
//判断obj中有没有cn class
//创建一个正则表达式 \b为单词边界
//var reg = /\bb2\b/; 不能使用字面量来写入cn
//创建一个构造函数
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
};
//移除一个类
function removeClass(obj , cn){
var reg = new RegExp("\\b"+cn+"\\b");
obj.className = obj.className.replace(reg , "");
};
//切换一个类
//如果元素中具有该类,则删除
//如元素中没有该类,则添加
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有则删除
removeClass(obj , cn);
}else{
//没有则添加
addClass(obj , cn);
}
};
2.实现轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 580px;
height: 560px;
margin: 100px auto;
background-color: #bfa;
padding: 20px 0;
position: relative;
/*裁剪显示的图片*/
overflow: hidden;
}
#imgList{
list-style: none;
/*五张图片的宽度*/
/*width: 6230px;*/
position: absolute;
/*ul在outer上动*/
}
#imgList li{
float: left;
margin: 0 10px;
}
li img{
width: 560px;
height: 560px;
}
#navDiv{
position: absolute;
/*底部*/
bottom: 30px;
right: 240px;
}
#navDiv a{
/*display: block;*/
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
/*左右外边距*/
margin: 5px;
/*半透明*/
opacity: 0.5;
}
#navDiv a:hover{
background-color: blue;
}
</style>
<!--引入工具-->
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
//获取ul
var imgList = document.getElementById("imgList");
//获取所有的图片
var imgs = document.getElementsByTagName("img");
imgList.style.width = 580*imgs.length+"px";
//设置导航居中
//获取navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
/*navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2;*/
//设置第一个a为黑色
//默认显示图片的索引
var index = 0;
//获取所有的a
var allA = document.getElementsByTagName("a");
//设置默认选中效果
allA[index].style.backgroundColor = "blue";
/*
* 点击超链接切换到指定的图片
* 点击第一个超链接,显示第一个图片
* 点击第二个超链接,显示第二个图片
* ....
*
*/
//为所有的超链接绑定单击响应函数
for(var i = 0 ; i < allA.length ; i++){
//为每一个超链接都添加一个num属性,把for循环i的值赋值到num中,方便使用,而不是让for循环一直先执行
//给苹果记号,方便拿出来的时候认识
allA[i].num = i;
allA[i].onclick = function(){
//当点击的时候,点击优先
clearInterval(timer);
//修正索引
index = this.num;
//改变对应索引的图片路径
/*
* 第一张 0 0
* 第二张 1 -1246
* 第三张 2 -2492
*
*/
//imgList.style.left = -1246 * index + "px";
//设置我们选中的a
setA();
//使用自己写move函数来切换图片
move(imgList , "left" , -580*index , 25 , function(){
//动画执行完毕再次开启
autoChange();
});
};
}
//开启自动切换图片
autoChange();
//创建一个方法来实现选中的a
function setA(){
//判断index
if(index >= imgs.length - 1){
index = 0;
imgList.style.left = 0;
}
for (var i = 0 ; i < allA.length ; i++) {
//去掉之前选中的样式,不写颜色,让它默认使用原来css定义的背景色
allA[i].style.backgroundColor="";
}
//将选中的设置为底色黑色
allA[index].style.backgroundColor = "blue";
};
var timer ;
//创建一个函数,用来开启自动切换的图片
function autoChange(){
//开启一个定时器,用来切换图片
timer = setInterval(function(){
index++;
//判断长度4之后,停止
index %= imgs.length;
move(imgList , "left" , -580*index , 25 , function(){
setA();
});
},4000);
}
};
</script>
</head>
<body>
<div id="outer">
<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 id="navDiv">
<a href="Javascript:;"></a>
<a href="Javascript:;"></a>
<a href="Javascript:;"></a>
<a href="Javascript:;"></a>
<a href="Javascript:;"></a>
</div>
</div>
</body>
</html>