<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>轮播图练习2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin: 0; padding: 0; }
ul,ol{list-style: none;}
.box{ width: 300px;height: 200px;margin: 100px auto; border: 1px solid #333;position: relative;padding: 10px; }
.box .scroll{width: 300px;height: 200px;position: relative;overflow: hidden;}
.box .scroll ul{ width: 700%; position: absolute;top:0;left: -300px;}
.box .scroll ul li{float: left;}
.box .scroll ol{position: absolute;width: 110px;margin-left: -55px;bottom:10px; left:50%;text-align: center;}
.box .scroll ol li{ float: left;width: 15px;height: 15px;line-height: 15px;text-align: center; border-radius: 15px;margin-right: 5px; color: white; font-size: 12px;}
.box ol .current{ background-color: orange; }
.arrow{ width: 100%; height: 40px; position: absolute; top: 50%; left: 0;margin-top: -20px;}
.arrow_l,.arrow_r{cursor: pointer;}
.arrow_l{ float: left; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.arrow_r{float: right;border-top-left-radius: 6px;border-bottom-left-radius: 6px; }
.arrow span{display: inline-block;width: 20px;height: 40px; background-color: rgba(255,212,221,0.2); font-size: 20px;line-height: 40px; text-align: center;color: #fff; }
.arrow .arrow_l span {border-top-right-radius: 6px;border-bottom-right-radius: 6px; }
.arrow .arrow_r span { border-top-left-radius: 6px;border-bottom-left-radius: 6px; }
</style>
<body> <div class="box"> <div class="scroll"> <ul> <li><img src="img1/5.jpg" alt="" /></li>
<li><img src="img1/1.jpg" alt="" /></li> <li><img src="img1/2.jpg" alt="" /></li> <li><img src="img1/3.jpg" alt="" /></li> <li><img src="img1/4.jpg" alt="" /></li> <li><img src="img1/5.jpg" alt="" /></li> <li><img src="img1/1.jpg" alt="" /></li> </ul> <div class="arrow"> <div class="arrow_l"><span><</span></div> <div class="arrow_r"><span>></span></div> </div> </div>
</div>
</body>
</html>
<script>
/*1、获得元素*/
var box = document.getElementsByClassName('box')[0];
// console.log(box);
var scroll = document.getElementsByClassName('scroll')[0];
// console.log(scroll);
var ul = document.getElementsByTagName('ul')[0];
var ulLis = ul.children;
// console.log(ulLis.length);
// ul.appendChild(ul.children[0].cloneNode(true));
// var ol = document.createElement("ol");
// scroll.appendChild(ol);
var ol = document.createElement("ol");
scroll.appendChild(ol);
for(var i = 0; i<ulLis.length-2;i++){
var li = document.createElement('li');
ol.appendChild(li);
li.innerHTML = i+1;
}
var olLis =ol.children;
// console.log(olLis.length);
ol.children[0].className = "current";
var arrow = document.getElementsByClassName('arrow')[0];
var arrow_l = arrow.children[0];
var arrow_r = arrow.children[1];
// console.log(arrow_l);
/*动画即ul位置变化*/
function animate(obj,target){
clearInterval(obj.timer);
var speed = target>obj.offsetLeft? 10:-10;
obj.timer = setInterval(function(){
var result = target-obj.offsetLeft;
// console.log(obj.offsetLeft);
// console.log(target);
obj.style.left = obj.offsetLeft + speed +"px";
if(Math.abs(result)<=10){
clearInterval(obj.timer);
// alert("af")
obj.style.left = target+"px";
}
},10);
}
/*小圆点动画（手动切换位置）--位置变化*/
for(var i=0;i<olLis.length;i++){
olLis[i].index = i; /* 获取当前的索引值*/
// console.log(olLis[i].index)
olLis[i].onmouseover = function(){ /*当鼠标经过某一个点之后*/
for(var i = 0;i<olLis.length;i++){ /*所有点清空类名*/
olLis[i].className = "";
}
this.className = "current"; /*给当前的带你添加current的类名*/
animate(ul,-(this.index+1)*300); /*图片的位置 当前点的所引号*图片的长度*/
key=this.index+1;
console.log(this.index);
square = this.index;
}
}
/*图片自动播放的动画 小圆点岁图片的变化而变化*/
var key = 1; /*图片的数量*/
var square = 0; /*圆点的数*/
var timer = null;
timer = setInterval(autoplay,1000); /*开启定时器，每隔一秒执行自动播放动画*/
function autoplay(){
key++; /*图片数量增加1*/
if(key>ulLis.length-1){ /*判断图片数是否比总的图片数大？？*/
// clearInterval
ul.style.left=-300+'px'; /*如果大 清空定时器 同时key=1，从第二张开始播放*/
key = 2;
}
animate(ul,-key*300);
// alert("1") /*ul的位置进行变化*/
square++; /*圆点的书加一*/
if(square>olLis.length-1){ /*判断圆点数是否比总的圆点数大？？*/
square = 0; /*若大 则square=0 重新开始*/
}
for(var i=0;i<olLis.length;i++){
olLis[i].className = ""; /*所有类名清空*/
}
olLis[square].className = "current";/*square的点的类名为current*/
}
box.οnmοuseοver=function(){ /*当鼠标经过大盒子的时候 清空定时器 保持不动*/
clearInterval(timer);
}
box.οnmοuseοut=function(){ /*当鼠标离开大盒子 添加定时器 同时从当前位置开始计数*/
timer = setInterval(autoplay,1000);
}
/*左右箭头控制图片动画*/
arrow_l.οnmοuseοver=function(){
this.style.backgroundColor= 'rgba(255,212,221,0.9)'; /*鼠标经过箭头 箭头背景色变化*/
}
arrow_l.onclick = function(){ /*鼠标点击左箭头，key-1 */
key--;
if(key<0){ /*当key<0的时候*/
// clearInterval
ul.style.left=-1500+'px'; /*图片跳到第5张*/
key = 4; /*key=4*/
}
animate(ul,-key*300);
square--; /*圆点square-1*/
if(square<0){ /*小于0时*/
square = 4; /*跳到5编号*/
}
for(var i=0;i<olLis.length;i++){
olLis[i].className = ""; /*所有类名清空*/
}
olLis[square].className = "current";/*square的点的类名为current*/
}
arrow_r.onclick = function(){
key++; /*图片数量增加1*/
if(key>ulLis.length-1){ /*判断图片数是否比总的图片数大？？*/
// clearInterval
ul.style.left=-300+'px'; /*如果大 清空定时器 同时key=1，从第二张开始播放*/
key = 2;
}
animate(ul,-key*300);
square++; /*圆点的书加一*/
if(square>olLis.length-1){ /*判断圆点数是否比总的圆点数大？？*/
square = 0; /*若大 则square=0 重新开始*/
}
for(var i=0;i<olLis.length;i++){
olLis[i].className = ""; /*所有类名清空*/
}
olLis[square].className = "current";/*square的点的类名为current*/
}
arrow_l.οnmοuseοut=function(){
this.style.backgroundColor= 'rgba(255,212,221,0.2)';
}
arrow_r.οnmοuseοver=function(){
this.style.backgroundColor= 'rgba(255,212,221,0.9)';
}
arrow_r.οnmοuseοut=function(){
this.style.backgroundColor= 'rgba(255,212,221,0.2)';
}
</script>
1004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
