注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

早衰男的巢

大音希声 道隐无名

 
 
 

日志

 
 

JS: 一个简单幻灯片切换(轮播)效果  

2017-01-16 15:48:47|  分类: UI/CSS/HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
有时候我想要的仅仅是一个简单的画面淡入淡出切换效果而已
并不需要那么复杂华丽的特效,也不需要播放控制、左右滑动等等的支持

尝试了几个网上能搜到的别家的代码,都还是觉得臃肿过于复杂,设计过度。
还是自己写一个省事..废话不多说,下面备忘个精简版

HTML部分

<html>

<head>

...

<style>

/*轮播效果*/
#slides { /*轮播控件的尺寸根据自己需要进行定义*/
position: relative;
background: #6C6C6C;
width: 100%;
height: 13rem;
}
#slides img {display:none;}
#slides .divimg{
position: absolute;
width: 100%;
height: 100%;
display: none;
}
</style>

</head>

<body>

<div id="slides">
<div class="divimg" id="slides_bg_0"></div>
<div class="divimg" id="slides_bg_1"></div>
<img src="imgs/pd1.jpg"/>
<img src="imgs/pd2.jpg"/>
<img src="imgs/pd3.jpg"/>
<img src="imgs/pd4.jpg"/>
<img src="imgs/pd5.jpg"/>
<!--//需要添加多少个轮换的图片,如此类推就好-->
</div>

...

</body>


JS部分,也是放在同一个页面源码内就好(依赖jQuery)

<script>

//轮播
var rollSize = 0;
var showPicIn = 0; //显示的图像的ID

var divimgId = 0;
function rolliton(){
showPicIn++;

divimgId = 1 - divimgId; //在0,1之间切换
if(showPicIn>=rollSize) showPicIn = 0; //复位
var nextShow = "#slides_bg_"+divimgId;
var targetImg = $("#slides img")[showPicIn];
var imgAddr = $(targetImg).attr("src");
$(nextShow).css({
"background":"url('"+imgAddr+"')",
"background-position":"center center",
"background-size":"cover"
});

//这里控制每张图切换和显示的时长,单位ms
$(nextShow).fadeIn(300,function(){
setTimeout(function(){
$(nextShow).fadeOut(500);
rolliton(); //交叠进行
},3000);
})
}



//页面加载完后执行

$(function(){

//轮播初始化
rollSize = $("#slides img").length;
if(rollSize>0){
rolliton();//滚起来
}

});


<script>


代码..我觉得还算简洁蛤...
整体思路上就是隐藏一组<img>,然后让两个重叠的<div> 交替地fadeIn/fadeOut 顺序显示这组图像
  评论这张
 
阅读(147)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018