首页 > 代码库 > 每日一题_JavaScript.利用纯JavaScript Dom Core实现一个图片轮播效果 ?
每日一题_JavaScript.利用纯JavaScript Dom Core实现一个图片轮播效果 ?
具体需求:
1. 页面加载后每隔2秒自动从轮播图片
2. 鼠标悬停或是点击页面中小图片时,大图片自动跟随切换,并且停止轮播
3. 鼠标离开小图片时,图片重新开始轮播
实现思路:
具体代码:
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Js实现图片轮播</title> <link rel="stylesheet" href="http://www.mamicode.com/css/layout.css" /> </head> <body> <img id="img-display" src="http://www.mamicode.com/img/1.jpg" /> <ul id="ul-images"> <li> <a href="http://www.mamicode.com/img/1.jpg"> <img src="http://www.mamicode.com/img/1.jpg"/> </a> </li> <b></b> <li> <a href="http://www.mamicode.com/img/2.jpg"> <img src="http://www.mamicode.com/img/2.jpg"/> </a> </li> <b></b> <li> <a href="http://www.mamicode.com/img/3.jpg"> <img src="http://www.mamicode.com/img/3.jpg"/> </a> </li> <b></b> <li> <a href="http://www.mamicode.com/img/4.jpg"> <img src="http://www.mamicode.com/img/4.jpg"/> </a> </li> </ul> <script type="text/javascript" src="http://www.mamicode.com/js/carousel.js"></script> </body> </html>
css
body { padding: 0; margin: 2px 0 0 2px; } ul, li, p { padding: 0; margin: 0; } ul b { float: left; border: solid 2px transparent; } ul>li { list-style: none; float: left; } ul>li>a>img { width: 157px; } ul>li>a>img:hover { border-bottom: solid 5px #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #img-display { border: solid 1px #eee; border-radius: 2px; }
js
// 说明: 添加函数到加载后事件队列 function addOnLoadEvent(func){ var oldOnLoad = window.onload if(typeof window.onload == ‘function‘){ window.onload = function(){ oldOnLoad() func() } }else{ window.onload = func } } // 说明: 鼠标悬停改变图片 function switchPic(link){ if(!document.getElementById(‘img-display‘)) return true var imgDisplay = document.getElementById(‘img-display‘) var href = link.getAttribute(‘href‘) imgDisplay.setAttribute(‘src‘, href) return false } // 说明:绑定所有链接悬停事件到switchPic function prepareSwitch(){ if(!document.getElementById) return false if(!document.getElementsByTagName) return false if(!document.getElementById(‘ul-images‘)) return false var ulImages = document.getElementById(‘ul-images‘) var links = ulImages.getElementsByTagName(‘a‘) var switchLinks = [] for(var i=0; i<links.length;i++){ switchLinks.push(links[i]) } // 页面加载后启动间歇任务,取得任务ID var taskid = null taskid = setInterval(function(){ var imgDisplay = document.getElementById(‘img-display‘) var link = switchLinks.shift() var href = link.getAttribute(‘href‘) imgDisplay.setAttribute(‘src‘, href) switchLinks.push(link) }, 2000) for(var i=0; i<links.length; i++){ // 鼠标悬停或单击关闭所有间歇任务 links[i].onmouseover = function(){ if(taskid) clearInterval(taskid) return switchPic(this) } links[i].onclick = links[i].onmouseover // 鼠标离开重新启动间歇任务并生成新的任务ID links[i].onmouseleave = function(){ taskid = setInterval(function(){ var imgDisplay = document.getElementById(‘img-display‘) var link = switchLinks.shift() var href = link.getAttribute(‘href‘) imgDisplay.setAttribute(‘src‘, href) switchLinks.push(link) }, 3000) return false } } } addOnLoadEvent(prepareSwitch)
有图有像:
本文出自 “ζ自动化运维开发之路ζ” 博客,请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1855189
每日一题_JavaScript.利用纯JavaScript Dom Core实现一个图片轮播效果 ?
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。