一.淡入淡出
HTML内容
<style>
.a{
width: 400px;
height: 300px;
margin: auto;
position: relative;
}
.imglist{
width: 400px;
height: 300px;
position: absolute;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.a>div>img{
width: 100%;
height: 100%;
}
.b{
position: absolute;
top: 260px;
left: 115px;
z-index: 11;
}
.b>div{
width: 20px;
height: 20px;
border: solid 2px #f5f2f0;
display: inline-block;
}
.c div{
position: absolute;
width: 20px;
height: 30px;
line-height: 30px;
cursor: pointer;
text-align: center;
color: white;
background-color: black;
}
.c>div:first-child{
left: 0;
top: 135px;
z-index: 11;
border-radius: 0 50% 50% 0; /* 顺时针1234*/
}
.c>div:last-child{
left: 380px;
top: 135px;
z-index: 11;
border-radius: 50% 0 0 50%;
}
</style>
</head>
<div class="a">
<div class="imglist"><img src="imges/1.jpg" alt=""/></div>
<div class="imglist"><img src="imges/2.jpg" alt=""/></div>
<div class="imglist"><img src="imges/3.jpg" alt=""/></div>
<div class="imglist"><img src="imges/4.jpg" alt=""/></div>
<div class="imglist"><img src="imges/5.jpg" alt=""/></div>
<div class="imglist"><img src="imges/6.jpg" alt=""/></div>
<div class="b">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="c">
<div><</div>
<div>></div>
</div>
js内容
<script>
//无论什么都写在函数里边
/*
* 1.让图片轮播起来
* ①设置层的情况
* ②写层的动画 //将当前的zindex记录下来,每次每个层都在加一 但5+1=0;
* ③调整透明度 //让最高层的opcity为0;即将变为最高层(zindex++之后值为5)的opcity为1;
* 2.写圈圈动画
* ①圈圈随着照片动(默认第一个有颜色) 写一个颜色方法,找到最高层的index
* ②鼠标进入和离开 (点 点出现对应的图片这一步骤前,先清除计时器)
* ③给点添加事件
* ④当前点变色,显示对应的图片 和三维动画一样,让转几次
* 3.写左右按键事件
* 左点击事件方法 第一种我写的
* 第二种老师写的:写反动画 我们写的是正动画 (反动画以后再尝试)
* */
var aele=document.getElementsByClassName("a")[0];
var lists=document.getElementsByClassName("imglist");
var left=document.getElementsByClassName("c")[0].children[0];
var right=document.getElementsByClassName("c")[0].children[1];
var cricle=document.getElementsByClassName("b")[0].children;
lists[0].style.opacity=1; //其余为透明,第一张为不透明,加transition动画
cricle[0].style.backgroundColor="red";
var timer=null;
var speed=1500;
var index=0; //索引
var num=0;
function ceng(){
for(var i=0;i<lists.length;i++){
lists[i].style.zIndex=lists.length-i-1;
}
}
function show(){
timer=setInterval(function(){
animate(1); // 常规调用一次
color();
},speed)
}
function animate(count){
for(var k=0;k<count;k++){ //将当前方法执行count次,控制动画执行的次数(利用形参)
for(var i=0;i<lists.length;i++){
var zindex=parseInt(lists[i].style.zIndex);
zindex++;
if(zindex>=lists.length){ //最高层进这里边
//当前最高层的透明度为0; zindex++之后值为5(即将变为最高层)的那一层的透明度为1
lists[i].style.opacity=0;
zindex=0;
} //将当前的zindex记录下来,每次每个层都在加一 但5+1=0;
if(zindex==lists.length-1) {
lists[i].style.opacity = 1;
index = i; //最高层的index,索引的对应问题
}
lists[i].style.zIndex=zindex;
}
//动态修改index的值 最上边那一层,zindex为5,opcity为1;
}
}
//点颜色的相关操作
function color(){
for(var i=0;i<cricle.length;i++){
if(i==index){
cricle[i].style.backgroundColor="red";
}
else{
cricle[i].style.backgroundColor="";
}
}
}
//点击左右事件
function zuoyou(){
left.onclick=function(){ //左边事件
count=lists.length-1; //3.的第一种方法 3.的第二种方法,写反动画
animate(count);
color();
};
right.onclick=function(){
animate(1); //右边事件常规调用一次
color();
};
}
//停止与开始计时器
function stop(){
aele.onmouseenter=function(){
clearInterval(timer);
}
aele.onmouseleave=function(){
show();
}
}
//给点添加事件
function dian(){
for(var i=0;i<cricle.length;i++){
cricle[i].index=i; //获取当前的索引
cricle[i].onmouseenter=function(){
var count=this.index-index>0?this.index-index:cricle.length+this.index-index;
//当前的索引减去之前的索引 正值:值为多少转几圈 负值:
console.log(count); //测试count值可以得出count大于0和小于0转的不同圈数
index=this.index; //this.index 为 i
color();
animate(count); //执行count次
//2④的第一种方法 利用函数的递归
/* if(count>0){
loop();
function loop(){
num++;
animate(); //转多少圈用的是循环计时器里边的函数方法,将函数方法分装出来;
if(num>=count){
clearTimeout(timer2);
return;
}
var timer2=setTimeout(loop(),1500);
}
}*/
}
}
}
window.onload=function(){
show();
ceng();
color();
stop();
dian();
zuoyou();
}
二.横向滚动
HTML内容
<style>
.a{
height: 300px;
width: 400px;
overflow-x: hidden;
overflow-y: hidden;
margin: auto;
position: relative;
}
.b{
width: 2800px;
height: 300px;
}
.b>div{
height: 300px;
width: 400px;
float: left;
}
.b>div>img{
width: 100%;
height: 100%;
}
.c{
position: absolute;
top: 270px;
left: 120px;
}
.c>div{
width: 15px;
height: 15px;
border: solid 3px #e4e4e4;
border-radius: 50%;
display: inline-block;
}
.span>div{
position: absolute;
height: 30px;
line-height: 30px;
text-align: center;
width: 20px;
background: blanchedalmond;
cursor: pointer;
}
.span>div:first-of-type{
left: 0;
top:125px;
}
.span>div:last-of-type{
left: 380px;
top:125px;
}
.trans{
transition: margin-left .5s ease-in;
}
</style>
</head>
<div class="a">
<div class="b trans">
<div><img src="imges/1.jpg" alt=""/></div>
<div><img src="imges/2.jpg" alt=""/></div>
<div><img src="imges/3.jpg" alt=""/></div>
<div><img src="imges/4.jpg" alt=""/></div>
<div><img src="imges/5.jpg" alt=""/></div>
<div><img src="imges/6.jpg" alt=""/></div>
<div><img src="imges/1.jpg" alt=""/></div>
</div>
<div class="c">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="span">
<div><</div>
<div>></div>
</div>
js内容
<script>
/*
* 1.画页面
* 2.动画 出现闪的情况,用一次性计时器
* 3.画点
* 4.鼠标事件
* 5.点对应相应的图片
* 6.左右点击事件
* */
var left=document.getElementsByClassName("span")[0].children[0];
var right=document.getElementsByClassName("span")[0].children[1];
var cricle=document.getElementsByClassName("c")[0].children;
var b=document.getElementsByClassName("b")[0];
var a=document.getElementsByClassName("a")[0];
var timer=null;
var speed=1500;
var count=0;
var index=0;
function animate(){
timer=setInterval(function(){
donghua();
},speed)
}
function donghua(){
b.className="b trans";
count++;
b.style.marginLeft=-400*count+"px"; //相应的count值对应相应索引的图片
//marginLeft为-400 图片便往前走400px
setTimeout(function(){ //出现那种闪的情况,利用一次性计时器
if(count >= b.children.length-1){
b.className="b";
count=0;
b.style.marginLeft="0px";
}
//console.log(count);
index=count; //发现count就是索引值
addcolor();
},500)
}
//画点
cricle[0].style.backgroundColor="red";
function addcolor(){
for(var i=0;i< cricle.length;i++){
cricle[i].style.backgroundColor="";
}
cricle[index].style.backgroundColor="red";
}
//点对应相应的图片
function yuan(){
for(var i=0;i<cricle.length;i++){
cricle[i].index=i;
cricle[i].onmouseenter=function(){
index=this.index;
//console.log(index); //index为当前点所对的索引
addcolor();
count=this.index-1;
donghua();
}
}
}
//右点击
right.onclick=function(){
donghua();
}
//左点击
left.onclick=function(){
count--;
console.log(count);
if(count<0){
b.className="b";
b.style.marginLeft=-2400+"px"; //先将第7张图片放过去
setTimeout(function(){
b.className="b trans";
count= 5;
index=count;
addcolor();
b.style.marginLeft=(-400*count)+"px"; //第6张图片 第六张图片往左拖
},0)
}
else{ //必须加else 否则又会重新添上动画 没有加else这些代码都会执行,类又会被加上
b.className="b trans";
index=count;
b.style.marginLeft=(-400*count)+"px";
addcolor();
}
/*这样写会有闪的情况 用一次性计时器写解决这个问题
count--;
if(count<0){
count=5;
}
console.log(count);
index=count;
b.style.marginLeft=-400*count+"px";
addcolor();*/
}
//鼠标事件
a.onmouseenter=function(){
clearInterval(timer);
}
a.onmouseleave=function(){
animate();
}
window.onload=function(){
animate();
yuan();
}
</script>
三.三维轮播
HTML内容
<style>
body{
background-color: #222222;
}
.a{
width: 1000px;
height: 400px;
border: solid 2px white;
margin: auto;
position: relative;
box-shadow: 0 0 3px 1px #fffdef; /*水平 上下 模糊距离 阴影程度 颜色*/
}
.b{
position: absolute;
top:420px;
left: 390px;
}
.b>div{
width: 20px;
height: 20px;
border: solid 3px white;
display: inline-block;
margin-left: 10px;
transform: rotate(45deg);
}
.imglist{
width: 400px;
position: absolute;
box-shadow: 0 0 15px #eae8da; /*水平 上下 模糊距离 阴影程度 颜色*/
height: 200px;
transition: all .1s linear; /*加动画 动画时间和一次性计时器时间要统一*/
}
.imglist>img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="imglist" style="left: 300px; top:199px; z-index: 5"><img src="imges/1.jpg" alt=""/></div>
<div class="imglist" style="left: 0px; top:100px; z-index:4"><img src="imges/2.jpg" alt=""/></div>
<div class="imglist" style="left: 0px; top:50px; z-index: 3"><img src="imges/3.jpg" alt=""/></div>
<div class="imglist" style="left: 300px; top:0px; z-index: 2"><img src="imges/4.jpg" alt=""/></div>
<div class="imglist" style="left: 600px; top:50px;z-index: 3 "><img src="imges/5.jpg" alt=""/></div>
<div class="imglist" style="left: 600px; top:100px;z-index: 4 "><img src="imges/6.jpg" alt=""/></div>
</div>
js内容
<script>
//1.网页加载完成,默认转动
//2.鼠标进入清除计时器 鼠标出去重启计时器
//3.画点的动画 ①点对应图片变色 ②进入点,清空计时器,点变色,出现对应的图片
//4.让图片转完一圈再转下一圈(在圈中晃动太快的bug)
var lists=document.getElementsByClassName("imglist");
var dian=document.getElementsByClassName("b")[0].children;
var speed=1500;
var timer=null;
var index=0; //记录 正面图的索引
var count=0; //记录转圈的次数
var finishCircle=true;//记录动画状态 默认boolen值
function showanimate(){
timer=setInterval(function(){
animate();
span();
},speed)
}
function animate(){
var ele=[lists[0].style.left,lists[0].style.top,lists[0].style.zIndex];
for(var i=0;i<lists.length;i++) {
if (i < lists.length - 1) {
lists[i].style.left = lists[i + 1].style.left;//将后一个的位置给前一个
lists[i].style.top = lists[i + 1].style.top;
lists[i].style.zIndex = lists[i + 1].style.zIndex;
}
else { //到i=5的时候拿第0个,但是第一张图片的位置在不停变化,第0个的位置是固定的,一开始就用数组接受
//若直接拿,得到的是变化后的位置,我们需要拿拿第0个变化前的位置
lists[i].style.left = ele[0];//将后一个的位置给前一个
lists[i].style.top = ele[1];
lists[i].style.zIndex = ele[2];
}
if(lists[i].style.zIndex==5){
index=i; //获取最前边图片的索引
}
}
}
//让点跟着图片变化
function span(){
for(var i=0;i<dian.length;i++){
//当前正面那张图变色 将正面图索引记下来
if(i==index){ //index 最前边那张图片的索引
dian[i].style.backgroundColor="green";
}
else{
dian[i].style.backgroundColor="";
}
}
}
//进入点,清空计时器,点变色,出现对应的图片
//放上点对应的图片展示到第一个(转圈圈)
function spanMouseEnter() {
for (var i = 0; i < dian.length; i++) {
dian[i].index=i;
dian[i].onmouseenter = function () {
clearInterval(timer);
if (finishCircle==true) {
finishCircle = false; //未改变值的话,就一直为true;
}
else {
return;
}
for (var i = 0; i < dian.length; i++) {
dian[i].style.backgroundColor="";
}
this.style.backgroundColor="green";
count=this.index-index;
if(count>0){
count=dian.length-this.index+index;
}
else{
count=index-this.index;
}
var num = 0;
loop();
function loop() {
num++; //点对应相应的图片,旋转count次,用函数的递归,注意跳出;
if (num > count) {
finishCircle = true;//动画完成 只有一个动画完成,才可以执行下一个
return;
}
animate();
setTimeout(loop, 100); //动画时间和一次性计时器时间要统一
// 要是动画时间长,计时器完了,动画还没完,图片会从动画半中腰开始执行下一个计时器
}
}
dian[i].onmouseleave = function () {
showanimate();
}
}
}
/* 转的圈数
count=this.index-index;
if(count>0){
count=dian.length-this.index+index;
}
else{
count=index-this.index;
}*/
function MouseEnter(){
for(var i=0;i<lists.length;i++){
//鼠标进入停止
lists[i].onmouseenter=function(){
clearInterval(timer);
};
//鼠标出去重启计时器
lists[i].onmouseleave=function(){
showanimate();
}
}
}
window.onload=function(){
showanimate();
MouseEnter();
span();
spanMouseEnter();
}
</script>