js学习总结_轮播图之渐隐渐现版(实例讲解)
具体代码如下：
<!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学习总结_轮播图之渐隐渐现版(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会
-
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <
-
原生JS实现图片网格式渐显、渐隐效果
先给出效果图: 写的小组件支持图片的渐显.渐隐,并且可以是有序.随机两种方式. 我采用的原型是属性写在构造函数内,方法写在原型对象内.方法写构造函数内有个问题,就是每次调用这个方法就相当于重新实例化一次,举个粟子: 实现网格效果的原理上是将读取图片的宽高,按照设定的参数,分成等高宽的网格(我用的span标签表示的网格),网格利用定位铺满整个图片,每个网格的背景图都是原图片,原理同sprite,利用background-position属性改变显示区域.接下来就是按照设定的顺序实现渐显或渐隐.渐显
-
js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播效果代码如下 <html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table i
-
JS实现的简单轮播图运动效果示例
本文实例讲述了JS实现的简单轮播图运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title&
-
原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
-
js学习总结_轮播图之渐隐渐现版(实例讲解)
具体代码如下: <!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 } im
-
js实现移动端轮播图
本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 这是结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0&
-
JS+css3实现幻灯片轮播图
本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-user-select: none;
-
JS实现炫酷轮播图
本文实例为大家分享了JS实现炫酷轮播图的具体代码,供大家参考,具体内容如下 效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
-
js实现简单的轮播图效果
本文实例为大家分享了js实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"
-
原生JS实现pc端轮播图效果
本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下 案例:轮播图需求 布局:ul下有很多li标签:浮动在一行: 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden: 功能需求: 序号轮播 左右按钮的轮播 自动轮播 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播 实现效果: html部分 <div class="box" id="box"> <div class=
-
js实现移动端轮播图滑动切换
本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下 移动端手势 轮播图分析 1.自动轮播且无缝 [定时器.过渡动画] 2.分页器要随着图片的轮播而改变 [根据索引切换] 3.滑动效果 [touch事件] 4.图片随着分页器变化 5.滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡] 6.滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]] html页面结构 <!--轮播图--> <div class=&qu
-
js+css实现卡片轮播图效果
本文实例为大家分享了js+css实现卡片轮播图效果的具体代码,供大家参考,具体内容如下 实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样 下面是代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
-
原生JS实现简单的轮播图效果
本文实例为大家分享了JS实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 实现效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 2.点击右侧按钮一次,图片往左播放一张,左侧按钮同理. 3.图片播放的同时,下面的小圆圈模块也跟随一起变化. 5.鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片. 轮播图向右移动的时候要用到缓动画的函数,具体见博客:JS实现添加缓动画的方法 (1)布局:轮播图部分的图片用ul进行布局,里面的每个li放a标签,