js学习总结_轮播图之渐隐渐现版(实例讲解)
程序员文章站
2023-02-24 10:15:31
具体代码如下：
具体代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
-webkit-user-select:none;
}
ul,li{
list-style
}
img{
display: block;
border:none;
}
.banner{
position:relative;
width:1000px;
height:300px;
margin:0 auto;
overflow:hidden;
}
.banner .bannerinner{
width:100%;
height:100%;
background:url("../img/default.gif") no-repeat center center #e1e1e1;
}
.banner .bannerinner div{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:0;
opacity:0;
filter:alpha(opacity=0);
}
.banner .bannerinner img{
display:none;
width:100%;
height:100%s;
}
.banner .bannertip{
position:absolute;
height:18px;
overflow:hidden;
right:20px;
bottom:20px;
z-index:10;
}
.banner .bannertip li{
float:left;
margin-left:10px;
width:18px;
height:18px;
background:lightblue;
cursor:pointer;
border-radius:50%;
}
.banner .bannertip li.bg{
background:red;
}
.banner a{
display:none;
position:absolute;
top:50%;
z-index:20;
margin-top:-22.5px;
width:30px;
height:45px;
background:url("../img/pre.png");
opacity:0.5;
filter:alpha(opacity=50);
}
.banner a:hover{
opacity:1;
filter:alpha(opacity=100);
}
.banner a.bannerleft{
left:20px;
background-position:0 0;
}
.banner a.bannerright{
right:20px;
background-position:-50px 0;
}
</style>
</head>
<body>
<div class='banner' id='banner'>
<div class='bannerinner'>
<div><img src="" alt="" trueimg="img/banner1.jpg"></div>
<div><img src="" alt="" trueimg="img/banner2.jpg"></div>
<div><img src="" alt="" trueimg="img/banner3.jpg"></div>
<div><img src="" alt="" trueimg="img/banner4.jpg"></div>
</div>
<ul class='bannertip'>
<li class='bg'></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerleft'></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerright'></a>
</div>
<script>
var banner = document.getelementbyid('banner');
var bannerinner = utils.firstchild(banner),bannertip = utils.children(banner,"ul")[0],bannerlink = utils.children(banner,'a'),bannerleft = bannerlink[0],bannerright = bannerlink[1];
var divlist = bannerinner.getelementsbytagname('div');
var imglist = bannerinner.getelementsbytagname('img');
var olis = bannertip.getelementsbytagname('li');
//1、ajax读取数据
var jsondata = null;
~function(){
var xhr = new xmlhttprequest;
xhr.open("get","json/banner.txt?_="+math.random(),false);
xhr.onreadystatechange = function(){
if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){
jsondata = utils.formatjson(xhr.responsetext)
}
}
xhr.send(null)
}()
//2、数据绑定
~function(){
var str = "",str2 = "";
if(jsondata){
for(var i = 0,len=jsondata.length;i<len;i++){
var curdata = jsondata[i];
str+='<div><img src="" alt="" trueimg="'+curdata['img']+'"></div>';
i===0?str2+="<li class='bg'></li>":str2+="<li></li>"
}
}
bannerinner.innerhtml = str;
bannertip.innerhtml = str2;
}()
//3、图片的延迟加载
window.settimeout(lazyimg,500)
function lazyimg(){
for(var i = 0,len = imglist.length;i<len;i++){
~function(i){
var curimg = imglist[i];
var oimg = new image;
oimg.src = curimg.getattribute('trueimg');
oimg.onload = function(){
curimg.src = this.src;
curimg.style.display = block;
//只对第一张处理
if(i===0){
var curdiv = curimg.parentnode;
curdiv.style.zindex = 1;
myanimate(curdiv,{opacity:1},200);
}
oimg = null;
}
}(i)
}
}
//4、自动轮播
var interval = 3000,autotimer = null,step = 0;
autotimer = window.setinterval(automove,interval);
function automove(){
//当已经把最后一张展示完成后(step等于最后一张的索引),我们应该展示第一张，我们让step = -1,这样再经过一次累加，step就变为0，来展示第一张
if(step === jsondata.length-1){
step = -1
}
step++;
setbanner();
}
//实现轮播图切换效果的代码
function setbanner(){
//1、让step索引对应的那个div的zindex的值为1，其他的zindex为0
for(var i = 0,len = divlist.length;i<len;i++){
var curdiv = divlist[i];
if(i===step){
utils.css(curdiv,"zindex",1)
//2、让当前的透明度从0变为1,当动画结束，我们需要让其他的div的透明度的值直接变为0
myanimate(curdiv,{opacity:1},200,function(){
var curdivsib = utils.siblings(this);
for(var k = 0,len = curdivsib.length;k<len;k++){
utils.css(curdivsib[k],'opacity',0)
}
})
continue
}
utils.css(curdiv,"zindex",0)
}
//实现焦点对其
for(i = 0,len = olis.length;i<len;i++){
var curli = olis[i];
i === step?utils.addclass(curli,"bg"):utils.removeclass(curli,"bg");
}
}
//5、实现鼠标悬停停止自动轮播和离开在开启自动轮播
banner.onmouseover = function(){
window.clearinterval(autotimer);
bannerleft.style.display = bannerright.style.display = "block"
}
banner.onmouseout = function(){
autotimer = window.setinterval(automove,interval);
bannerleft.style.display = bannerright.style.display = "none"
}
//6、实现点击焦点切换
~function(){
for(var i = 0,len = olis.length;i<len;i++){
var curli = olis[i];
curli.index = i;
curli.onclick = function(){
step = this.index;
setbanner();
}
}
}()
//7、实现左右切换
bannerright.onclick = automove;
bannerleft.onclick = function(){
if(step === 0){
step = jsondata.length;
}
step--;
setbanner();
}
</script>
</body>
</html>
以上这篇js学习总结_轮播图之渐隐渐现版(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： 详解vue 模版组件的三种用法
下一篇： 深入理解vue2.0路由如何配置问题