功能:
-
创建底部小圆点,根据圆点切换图片
-
自动轮播
-
鼠标移入移出显示隐藏左右按钮
-
点击左右按钮切换图片
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen" id="scrren"><!--相框-->
<ul id="uu">
<li>
<img src="images/1.jpg" width="500" height="200"/>
</li>
<li>
<img src="images/2.jpg" width="500" height="200"/>
</li>
<li>
<img src="images/3.jpg" width="500" height="200"/>
</li>
<li>
<img src="images/4.jpg" width="500" height="200"/>
</li>
<li>
<img src="images/5.jpg" width="500" height="200"/>
</li>
</ul>
<ol id="oo">
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script>
var scrren = my$("scrren");//相框
var imgWidth = scrren.offsetWidth;//相框的宽度
var ulObj = my$("uu");//ul
var list = my$("uu").getElementsByTagName("li");//所有的li的节点
var olObj = my$("oo");//ol
var btnBox = my$("arr");//左右两边按钮的盒子
//1.创建小按钮。 根据小按钮, 切换对应的图片
for(var i = 0 ; i < list.length; i++){
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = i + 1;
liObj.setAttribute("index", i);
//注册鼠标移入事件
liObj.onmouseover = function () {
//先干掉所有的li的背景颜色
for(var j = 0 ; j < olObj.children.length ; j++){
olObj.children[j].removeAttribute("class");
}
this.className = "current";
//获取对应的索引
var picIndex = this.getAttribute("index");
//移动ul
animate(ulObj, -picIndex * imgWidth);
}
}
//设置ol中第一个li默认有背景颜色
olObj.firstElementChild.className = "current";
//2.自动播放
//克隆一个ul的第一个图片, 添加到最后面去
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timerId = setInterval(move, 1000);
var index = 0;
function move() {
if(index >= list.length - 1){
//直接跳转到第一个图片
index = 0;
ulObj.style.left = "0px";
}
index++;
animate(ulObj, -index * imgWidth);
//判断小圆点
if(index == list.length -1){
//console.log(index);
//把最后一个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//给第一个按钮设置颜色
olObj.children[0].className = "current";
}else{
//先干掉所有的li的背景颜色
for(var j = 0 ; j < olObj.children.length ; j++){
olObj.children[j].removeAttribute("class");
}
olObj.children[index].className = "current";
}
};
//3.鼠标移入移出
my$("box").onmouseover = function () {
btnBox.style.display = "block";
clearInterval(timerId);
}
my$("box").onmouseout = function () {
btnBox.style.display = "none";
timerId = setInterval(move, 1000);
}
//4.点击两边按钮
my$("right").onclick = move;
my$("left").onclick = function () {
if(index == 0){
index = list.length - 1;
ulObj.style.left = -index * imgWidth + "px";
}
index--;
animate(ulObj, -index * imgWidth);
//先干掉所有的li的背景颜色
for(var j = 0 ; j < olObj.children.length ; j++){
olObj.children[j].removeAttribute("class");
}
olObj.children[index].className = "current";
}
</script>
</body>
</html>
common.js
// 通过id名获取的元素
function my$(id) {
return document.getElementById(id);
}
//通过标签名获取的元素
function ele$(element) {
return document.getElementsByTagName(element);
}
//设置任意的标签中的任意文本内容
function setInnerText(element, text) {
//判断是否支持这个属性
if(typeof element.textContent == "undefined"){
console.log(element.textContent+"====");
//说明不支持
element.innerText = text;
}else{
console.log(element.textContent);
element.textContent = text;
}
}
//封装 获取任意标签中的文本内容. 需要返回值
function getInnerText(element){
if(element.textContent == undefined){
return element.innerText;
}else{
return element.textContent;
}
}
//封装一个获取任意一个父级元素的第一个子元素
function getFirstElementChild(parentElement) {
if(parentElement.firstElementChild){
//隐式布尔类型转换 --->true
//如果支持
return parentElement.firstElementChild;
}else{
return parentElement.firstChild;
}
}
/*
* @params : 对象 事件类型 回调函数
* 作用: 为任意元素, 绑定任意的事件, 执行任意的处理函数
* */
function addEventListener(element, type, fn) {
//判断是不是支持这个方法 对象.方法名同样可以判断
if(element.addEventListener){
element.addEventListener(type, fn, false);
}else if(element.attachEvent){
element.attachEvent("on" + type, fn);
}else{
element["on"+type] = fn;
}
}
//封装匀速动画函数--->任意一个元素移动到指定的目标位置
//@params : 元素 目标位置
function animate(element,target ) {
//先清理定时器,防止多次绑定
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//1.获取div当前的位置--->看成盒子当前的left值
var current = element.offsetLeft;//number类型
//2.div每一次移动多少像素 = 10 即步数
var step = 10;
//2.1判断往哪边移动
step = current <= target ? step : -step;
//3.每次移动后的距离
current += step;
////4.判断剩余的步数是否大于 step
if(Math.abs(target - current) > Math.abs(step)){
element.style.left = current + "px";
}else{
clearInterval(element.timeId);
element.style.left = target + "px";
}
},5)
}
//简化 :封装获取页面向上或者是向左卷曲出去的距离值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft,
top: window.pageYOffset || document.documentElement.scrollTop
};
}
//封装变速动画
//@params : 元素 目标位置
function animateBian(element, target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取当前的元素的位置
var current = element.offsetLeft;
//设置移动的步数
var step = (target - current)/10;
//判断步数 > 0, 则向上取整 ,否则向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//获取每次移动后的left值
current += step;
element.style.left = current + "px";
if(current == target){
clearInterval(element.timeId);
}
console.log("目标位置:" + target + ",每次移动的步数" + step +",当前位置:" + current );
},10)
}