具体需求:
1. 页面加载后每隔2秒自动从轮播图片
2. 鼠标悬停或是点击页面中小图片时,大图片自动跟随切换,并且停止轮播
3. 鼠标离开小图片时,图片重新开始轮播
实现思路:
具体代码:
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Js实现图片轮播</title> <link rel="stylesheet" href="css/layout.css" /> </head> <body> <img id="img-display" src="img/1.jpg" /> <ul id="ul-images"> <li> <a href="img/1.jpg"> <img src="img/1.jpg"/> </a> </li> <b></b> <li> <a href="img/2.jpg"> <img src="img/2.jpg"/> </a> </li> <b></b> <li> <a href="img/3.jpg"> <img src="img/3.jpg"/> </a> </li> <b></b> <li> <a href="img/4.jpg"> <img src="img/4.jpg"/> </a> </li> </ul> <script type="text/javascript" src="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实现一个图片轮播效果 ?
原文：http://xmdevops.blog.51cto.com/11144840/1855189