【JavaScript】用原生js实现幻灯片效果

github地址：https://github.com/MeichaoWen/JSInstance

<script>function getByClass(oParent, sClass) {aEle = document.getElementsByTagName('*');var arr = [];for (var i = 0; i < aEle.length; i++) {if (aEle[i].className == sClass) {arr.push(aEle[i])}}return arr;}window.onload = function () {var oDiv = document.getElementById('playimages');var oDivPrev = getByClass(oDiv, 'prev')[0]var oDivNext = getByClass(oDiv, 'next')[0]var oDivMrak_left = getByClass(oDiv, 'mark_left')[0]var oDivMark_right = getByClass(oDiv, 'mark_right')[0]var oSmall = getByClass(oDiv, 'small_pic')[0]var aLiSmall = oSmall.getElementsByTagName('li')var oBig = getByClass(oDiv, 'big_pic')[0]var aLiBig = oBig.getElementsByTagName('li')var oUlSmall = oSmall.getElementsByTagName('ul')[0]oUlSmall.style.width = aLiSmall[0].offsetWidth * aLiSmall.length + 'px'//左右按钮oDivPrev.onmouseover = oDivMrak_left.onmouseover = function () {startMove(oDivPrev, 'opacity', 100)}oDivPrev.onmouseout = oDivMrak_left.onmouseout = function () {startMove(oDivPrev, 'opacity', 0)}oDivNext.onmouseover = oDivMark_right.onmouseover = function () {startMove(oDivNext, 'opacity', 100)}oDivNext.onmouseout = oDivMark_right.onmouseout = function () {startMove(oDivNext, 'opacity', 0)}//小图点击var nowZIndex = 2var now = 0for (var i = 0; i < aLiSmall.length; i++) {aLiSmall[i].index = iaLiSmall[i].onclick = function () {if (this.index == now) return;now = this.indextab()}aLiSmall[i].onmouseover = function () {startMove(this, 'opacity', 100)}aLiSmall[i].onmouseout = function () {if (this.index != now) {startMove(this, 'opacity', 60)}}}function tab() {aLiBig[now].style.height = 0aLiBig[now].style.zIndex = nowZIndex++for (var i = 0; i < aLiSmall.length; i++) {startMove(aLiSmall[i], 'opacity', 60)}startMove(aLiSmall[now], 'opacity', 100)startMove(aLiBig[now], 'height', 320)if (now == 0) {startMove(oUlSmall, 'left', 0)} else if (now == aLiSmall.length - 1) {startMove(oUlSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth)} else {startMove(oUlSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth)}}oDivPrev.onclick = function () {now--if (now == -1) {now = aLiSmall.length - 1}tab()}oDivNext.onclick = function () {now++if (now == aLiSmall.length) {now = 0}tab()}var timer = setInterval(oDivNext.onclick, 2000)oDiv.onmouseover = function () {clearInterval(timer)}oDiv.onmouseout = function () {timer = setInterval(oDivNext.onclick, 2000)}}
</script>

【JavaScript】用原生js实现幻灯片效果相关推荐

原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录效果图设计思路基本架子蒙版放大效果图逻辑设计蒙版跟放大的图肯定要先隐藏鼠标移入图片显示蒙版鼠标移动蒙版跟着移动处理边界情况大图移动小优 ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
html制作满天星,怎样使用原生js做出满天星效果
这次给大家带来怎样使用原生js做出满天星效果,使用原生js做出满天星效果的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下://图片自己加入改变路径 html{height: 100%;} ...
原生js添加动画效果
原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...
原生JS实现分页效果
做开发久了,会越来越依赖框架,毕竟利用框架可以快速的完成工作任务,如常见的分页效果,只需要与后端配合,由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能,就可以轻松的实现分页效果,那如果在不 ...
原生js漂浮广告效果
原生js漂浮广告效果静态页面代码 <body><div id="box"><img src="1.jpg" alt=" ...
原生js制作动画效果
理论基础:需要获取元素的任意css属性值 getComputedStyle(element,null),支持谷歌,火狐 element.currentStyle,支持ie8 //获取任意css属性值( ...
JavaScript：原生JS实现Facebook实时消息抓捕
基础知识准备: HTML5给我们提供了一个新的对象叫作:MutationObserver.为了兼容,还有WebKitMutationObserver.MozMutationObserver,挂靠在wi ...

【JavaScript】用原生js实现幻灯片效果

【JavaScript】用原生js实现幻灯片效果相关推荐

最新文章

热门文章