具体需求:
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" alt=""/>
<ul id="ul-p_w_picpaths">
<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-p_w_picpaths')) return false var ulImages = document.getElementById('ul-p_w_picpaths') 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)
有图有像:
转载于:https://blog.51cto.com/xmdevops/1855189