用javaScript实现轮播图效果包括自动变换，按钮控制，上一张下一张切换

1.HTML代码

<div id="wrap"><img src="data:images/1.jpg" alt="" class="on"><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt=""><img src="data:images/4.jpg" alt=""><div class="btn"><span class="active"></span><span></span><span></span><span></span></div><i class="left" id="prev"></i><i class="right" id="next"></i>
</div>

2.css代码

#wrap{position: relative;width:590px;height: 470px;
}
#wrap img{position: absolute;top: 0;left: 0;/*display: none;*/opacity: 0;}
#wrap .on{/*display: block;*/transition: 2s;opacity: 1;
}
.btn {position: absolute;bottom: 20px;left: 50%;margin-left: -44px;
}
.btn span{float: left;width: 8px;height: 8px;border:2px solid rgba(255,255,255,0.4);border-radius: 5px;margin-right: 10px;
}
.btn .active{background: white;cursor: pointer;
}
.left,.right{display: block;width: 37px;height: 53px;position: absolute;top: 50%;margin-top: -27px;cursor: pointer;
}
.left{background: url("images/arrow.png") left top;
}
.right{background: url("images/arrow.png") left -53px;right: 0;
}

3.js代码

window.onload = function () {var oWrap = document.getElementById('wrap');var aImg = oWrap.getElementsByTagName('img');var aBtn = oWrap.getElementsByTagName('span');var oPrev = document.getElementById('prev');var oNext = document.getElementById('next');var iNow =0;function tab(){for (var i =0;i<aBtn.length;i++){//清空所有按钮选中样式以及图片显示样式aBtn[i].className='';aImg[i].className='';}aBtn[iNow].className='active';//设置当前按钮选中样式以及当前图片透明度aImg[iNow].className='on';}setInterval( function () {//每两秒循环变换下一张图片iNow++;if (iNow==aBtn.length)iNow=0;tab();},2000);for (var i =0;i<aBtn.length;i++){aBtn[i].index=i;//为按钮添加自定义属性（索引）目的是使图片和按钮相对应//按钮aBtn[i].οnmοuseοver= function () {iNow=this.index; //是按钮所控制显示的图片与左右箭头控制显示的图片相对应tab();}//下一个箭头oNext.onclick = function () {iNow++;if (iNow==aImg.length)iNow=0;tab();}//上一个箭头oPrev.onclick = function () {iNow--;if (iNow==-1)iNow=aImg.length-1;tab();}}}

静态效果图：（不会截动态的）

用javaScript实现轮播图效果包括自动变换，按钮控制，上一张下一张切换相关推荐

HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...
用jQuery实现轮播图效果（自动播放，能手动切换）
大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果首先我们看到,它是由背景图片.方向图标和指示器组成.**我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位. ...
JavaScript模拟轮播图效果
轮播图相信小伙伴们应该不会陌生吧~ 就是网站中间的那个会定时切换的商品图今天咱们就来模拟一个轮播图~当然效果不是那么美观小伙伴们不要嫌弃哈~ 那么咱们开动了,额~先准备好几章轮播图片(直接在网上 ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
html动态轮播效果怎么做,详解JavaScript实现动态的轮播图效果
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之 ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

用javaScript实现轮播图效果包括自动变换，按钮控制，上一张下一张切换

用javaScript实现轮播图效果包括自动变换，按钮控制，上一张下一张切换相关推荐

最新文章

热门文章

用javaScript实现轮播图效果 包括自动变换，按钮控制，上一张下一张切换

用javaScript实现轮播图效果 包括自动变换，按钮控制，上一张下一张切换相关推荐

最新文章

热门文章

用javaScript实现轮播图效果包括自动变换，按钮控制，上一张下一张切换

用javaScript实现轮播图效果包括自动变换，按钮控制，上一张下一张切换相关推荐