用原生JavaScript实现无缝轮播

html代码

<div id="banner"><ul><li><img src="data:images/1.jpg"></li><li><img src="data:images/2.jpg"></li><li><img src="data:images/3.jpg"></li><li><img src="data:images/4.jpg"></li></ul><div id="direction"><a href="##"><</a><a href="##">></a></div><div id="btn"><a href="##" class="active"></a><a href="##"></a><a href="##"></a><a href="##"></a></div>
</div>

css代码

  * {margin: 0;padding: 0;}ul, li {list-style: none;}#banner {width: 800px;height: 400px;margin: 40px auto;position: relative;overflow: hidden;}#banner > ul {position: absolute;}#banner > ul > li {float: left;width: 800px;height: 400px;}#banner > ul > li > img {width: 800px;height: 400px;}#direction {position: relative;display: none;}#direction > a {position: absolute;width: 60px;height: 60px;text-align: center;line-height: 55px;color: #fff;text-decoration: none;background: rgba(0, 0, 0, .5);font-size: 40px;top: 170px;opacity: 0.5;border-radius: 50%;}#direction > a:nth-child(2) {right: 0;}#btn {position: absolute;bottom: 0;left: 340px;}#btn > a {float: left;margin-left: 10px;width: 20px;height: 20px;border-radius: 50%;background: #f40;}#btn > .active {background: #fff;}

JS代码

封装运动框架

// 完美运动框架
function move(obj, json, fn) {clearInterval(obj.timer);obj.timer = setInterval(function () {var bStop = true;for (var attr in json) {//先判断是否是透明度var iCur;if (attr == "opacity") {iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);} else {iCur = parseInt(getStyle(obj, attr));}//算速度var speed = (json[attr] - iCur) / 8;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (json[attr] != iCur) {bStop = false;}if (attr == "opacity") {obj.style.opacity = (iCur + speed) / 100;obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")"} else {obj.style[attr] = iCur + speed + 'px';}}if (bStop) {clearInterval(obj.timer);fn && fn();}}, 30)
}

var ul = document.getElementById("banner").getElementsByTagName("ul")[0];var aLi = ul.getElementsByTagName("li");var iw = aLi[0].offsetWidth;var aBtn = document.getElementById("btn").getElementsByTagName("a");var dir = document.getElementById("direction").getElementsByTagName("a");var iNow = 0;var timer = null;//首先复制一张图片放在ul的最后面var li = aLi[0].cloneNode(true);ul.appendChild(li);//算ul的宽度ul.style.width = aLi.length * iw + 'px';for (var i = 0; i < aBtn.length; i++) {aBtn[i].index = i;aBtn[i].onmouseover = function () {for (var j = 0; j < aBtn.length; j++) {aBtn[j].className = "";}this.className = "active";move(ul, {left: -(this.index) * iw});iNow = this.index;}}//点击左边的按钮的时候dir[0].onclick = function () {if (iNow == 0) {//当iNow为0的时候下次出现的图片应该是length-2iNow = aLi.length - 2;//为了不出现回啦的感觉 我们让ul的left值为 length-1*iw的宽度ul.style.left = -(aLi.length - 1) * iw + 'px';} else {iNow--;}toImg();};//点击右边的按钮的时候dir[1].onclick = function () {if (iNow == aLi.length - 1) {//因为下一次显示要从下标为1的开始iNow = 1;//为了不出现回啦的那种感觉 我们瞬间让ul的left值为0ul.style.left = 0;} else {iNow++;}toImg()};//移入的时候变亮dir[0].onmouseover = function () {this.style.opacity = "1";};dir[1].onmouseover = function () {this.style.opacity = "1";};//移出的时候变暗dir[0].onmouseout = function () {this.style.opacity = "0.5";};dir[1].onmouseout = function () {this.style.opacity = "0.5";};//移入的时候轮播停止banner.onmouseover = function () {clearInterval(timer);direction.style.display = "block";};//移除的时候轮播继续banner.onmouseout = function () {autoPlay();direction.style.display = "none";};autoPlay();//自动轮播function autoPlay() {timer = setInterval(function () {if (iNow == aLi.length - 1) {//因为下一次显示要从下标为1的开始iNow = 1;//为了不出现回啦的那种感觉 我们瞬间让ul的left值为0ul.style.left = 0;} else {iNow++;}toImg()}, 2000)}//轮播原理function toImg() {move(ul, {left: -iNow * iw});for (var i = 0; i < aBtn.length; i++) {aBtn[i].className = "";}aBtn[iNow == aLi.length - 1 ? 0 : iNow].className = "active";}

用原生JavaScript实现无缝轮播相关推荐

JavaScript实现无缝轮播图效果
通过原生js实现无缝轮播效果. 思路: 1.利用html+css完成轮播图片,按钮,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切换,底部小点随图片切换而切换. 步骤1: 建立无 ...
原生JS实现无缝轮播
什么叫无缝轮播无缝轮播是网页中比较常见的一种轮播方式,很多网站首页都应用了无缝轮播,这种效果使页面看起来更顺滑. 先来看一下我实现的效果图: 无缝轮播的实现下面用示意图清楚的展现了无缝轮播的原理: ...
原生javascript之实战轮播图
成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的搭建HTML和CSS结构 HTML代码如下: 1 <div class=" ...
用原生JavaScript实现简单轮播图
html代码 <div id="banner"><ul><li><img src="images/1.jpg"> ...
原生Javascript实现图片轮播效果
首先引入js运动框架 1 function getStyle(obj,name){ 2 if(obj.currentStyle){ 3 return obj.currentStyle[name]; 4 ...
原生javascript实现图片轮播
这里是css样式 * {margin: 0;padding: 0;}ul,li {list-style: none;}img {display: block;/*vertical-align: mid ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

用原生JavaScript实现无缝轮播

用原生JavaScript实现无缝轮播相关推荐

最新文章

热门文章