隐现轮播动画
开发工具与关键技术：DW . Web
作者：陈荣基
撰写时间：2019年1月18号
隐现轮播动画设计
一． Html代码布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>隐现轮播动画</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box" id="box">
<div class="tpbox" style="left: -300px;" id="tpbox">
<img src="TB1LOAhKFXXXXXcaXXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt="">
<img src="TB1AD9sKXXXXXcAXFXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt="">
<img src="TB1f869KVXXXXb8XVXXYXGcGpXX_M2.SS2_320x320.jpg" alt="">
<img src="TB1hKZMMpXXXXadXpXXXXXXXXXX_!!0-item_pic.jpg" alt="">
<img src="TB1jbJFMFXXXXXBXVXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt="">
<img src="TB1LOAhKFXXXXXcaXXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt="">
<img src="TB1AD9sKXXXXXcAXFXXXXXXXXXX_!!0-item_pic.jpg_320x320.jpg" alt="">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
二．Css代码布局
@charset "utf-8";
/* CSS Document */
.box{
width: 300px;
height: 300px;
border-radius: 50%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.tpbox{
width: 2100px;
height: 300px;
border-radius: 50%;
position: absolute;
top:0px;
}
.tpbox img{
width: 300px;
height: 300px;
border-radius: 50%;
float: left;
}
三． JavaScript代码布局
// JavaScript Document
var box=document.getElementById("box");
var tpbox=document.getElementById("tpbox");
var img=document.getElementById("tpbox").getElementsByTagName("img");
var aa;
/*********切换图片的轮播封装代码**********************/
window.function(){//页面加载事件
a=setInterval(yin,2000);
b=setInterval(function(){
lunbo(-300);
xian();
},4000);
box.onmouseover=function(){//鼠标移入事件
qingchu();
xian();
};
box.onmouseout=function(){//鼠标移出事件
a=setInterval(yin,2000);
b=setInterval(function(){
lunbo(-300);
xian();
},4000);
};
};
/*********切换图片的轮播封装代码**********************/
function lunbo(offset){
aa=true;//逻辑判断true
var time=300;
var interval=10;
var newleft=parseInt(tpbox.style.left)+offset;
var speed=newleft/(time/interval);
function go(){
if(speed<0&&newleft<parseInt(tpbox.style.left)||speed>0&&newleft>parseInt(tpbox.style.left)){
tpbox.style.left=parseInt(tpbox.style.left)+speed+"px";
setTimeout(go,interval);
}
else{
tpbox.style.left=newleft+"px";
if(newleft<-1500){
tpbox.style.left=-300+"px";
}
if(newleft>-300){
tpbox.style.left=-1500+"px";
}
aa=false;//逻辑判断false
}
}
go();
}
/*********隐藏的封装代码**********************/
function yin(){
if(aa){
return;
}
for(var i=0;i<img.length;i++){
img[i].style.opacity="0";
img[i].style.transition="opacity 2s ease-in-out";
}
}
/*********显示的封装代码**********************/
function xian(){
for(var i=0;i<img.length;i++){
img[i].style.opacity="1";
img[i].style.transition="opacity 2s ease-in-out";
}
}
/*********清除计时器的封装代码*********************/
function qingchu(){
clearInterval(a);
clearInterval(b);
}
//setInterval()间隔性计时器 clearInterval()清除间隔性计时器
//setTimeout()一次性计时器 clearTimeout()清除一次性计时器（间隔性计时器调用自身也可以通过死循环的原理来实现间隔性计时器的功能）
注意：
1.图片切换的原理：通过改变定位来实现切换效果
2.图片隐藏显示的原理：通过改变图片的透明度来实现隐现效果
3.隐现轮播的原理：图片切换和隐现的原理结合通过计时器控制时间差来实现
4.想学的话先复制代码不断地去试一下代码效果更容易入手哦
你们可以复制我的代码去试一下效果 记得在img标签换上你们喜欢的图片哦
如果喜欢这效果可以认真学下哦上面都给你们注释了
最后有任何问题可以加我qq号：2952174903
欢迎大家随时询问哦
1223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
