提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
1.轮播图的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 1246px;
height: 460px;
margin: 100px auto;
background-color: #bfa;
padding: 10px 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: 1226px;
height: 460px;
}
#navDiv{
position: absolute;
/*底部*/
bottom: 30px;
right: 40px;
}
#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 = 1246*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" , -1246*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" , -1246*index , 25 , function(){
setA();
});
},3000);
}
};
</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>
2.类的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
/*.b2{
width: 200px;
height: 200px;
background-color: yellow;
}*/
.b2{
width: 200px;
/*height: 200px;*/
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取btn01
var btn01 = document.getElementById("btn01");
//获取box1
var box = document.getElementById("box");
btn01.onclick = function(){
//修改box1的样式
/*
* 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
* 这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式的时候，也不太方便修改
*
*
*
*/
/*box1.style.width = "200px";
box1.style.height = "200px";
box1.style.backgroundColor = "yellow";*/
//通过修改类的操作，来进行耦合降低，独立性高一些
/*
* 我们可以通过修改class属性来间接的修改样式
* 这样一来，我们只需要修改一次，即可同时修改多个样式
* 浏览器只需要重新渲染页面一次，性能比较好
* 并且这种方式，可以使表现和行为进一步的分离
*/
//语法：id.className = "想要实现样式的class名称"
//box.className = "b2";
//在原来的基础上加上b2 。b1和b2用空格隔开
//box.className += " b2";
//3.使用一个函数添加，因为一直点击，会导致b2无限添加
//addClass(box,"b2");
//4.检查是否含有cn(这里值b2)，然后防止b2重复
//alert(hasClass(box,"b1"));
//5.移除一个class="b2",让她替换成空格
//removeClass(box , "b2");
//6.切换操作
toggleClass(box,"b2");
};
};
//定义一个函数，用来向一个元素种添加指定的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);
}
};
</script>
</head>
<body>
<button id="btn01">点一下div改变</button>
<br /><br />
<div id="box" class="b1"></div>
</body>
</html>
3.模块工具化的开发使用
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);
}
};
总结：图片得自己找
2825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
