css|.113轮播图练习 javascript|html

轮播图练习* { padding: 0; margin: 0; }#outer { /* 设置宽和高 */ width: 657px; height: 364px; /* 设置背景颜色 */ background-color: #bfa; /* 设置居中 */ margin: 100px auto; /* 设置上下边距 */ padding: 10px 0; /* 开启父元素的定位 */ position: relative; /* 将多余部分切掉 */ overflow: hidden; }ul { /* 设置Ul的宽度 */ /* width: 1971px; */ /* 开启绝对定位 */ position: absolute; }ul li { /* 去除黑点 */ list-style: none; /* 设置浮动 */ float: left; /* 设置左右外边距 */ margin: 0 10px; }#btn { /* 开启绝对定位，使其显示在图片上 */ position: absolute; /* 将按钮设置为居中 */ bottom: 12px; /* 通过JS设置使其更加灵活 */ /* left: 295px; */ }#btn a { /* 设置浮动 */ float: left; width: 12px; height: 12px; background-color: red; margin: 0 5px; /* 设置透明效果 */ opacity: 0.5; /* 兼容IE8透明效果 */ filter: alpha(opacity=50); }/* 设置鼠标移入的样式 */ #btn a:hover { background-color: black; } 文章图片文章图片文章图片文章图片

下面为引入的外部文件tools.js中的内容

// 定义一个获取元素样式的函数 function getStyle(obj, name) { if (window.getComputedStyle) { // 其他浏览器 return getComputedStyle(obj, name)[name]; } else { // IE浏览器 return obj.currentStyle[name]; }}/* 定义一个移动div的函数 - obj 执行动画的对象 target 目标位置 speed 速度 style 样式 callback 回调函数 */ function move(obj, target, speed, style, callback) { // 获取当前div的位置 var current = parseInt(getStyle(obj, style)); // 判断速度的正负 if (current > target) { speed = -speed; } // 由于每点击一次就会开启一个定时器，所以每次都需要关闭前一个定时器 clearInterval(obj.timer); // 创建一个定时器 obj.timer = setInterval(function () { // 获取方块left初始值parseInt()可以将字符串转换为数字，即获取有效值 var oldleft = parseInt(getStyle(obj, style)); // 赋予方块left新值 var newleft = oldleft + speed; // 当到达1000px时停下 if (newleft < target && speed < 0 || newleft > target && speed > 0) { newleft = target; } // 为方块left设置新值 obj.style[style] = newleft + 'px'; if (newleft == target) { clearInterval(obj.timer); callback && callback(); }}, 30); }

效果： 【css|.113轮播图练习】点击按钮时，图片会切换；不点击按钮时，图片会自动切换