快速 学会 滚动式 轮播图
作者：互联网
滚动式 轮播图 详解
很多网页上都有轮播图来展示商品或公司的主要特色,但是这是如何实现的呢?
工作急需要用,拿过来改下就好了哦
实例告诉你:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<!-- 设置css样式 -->
<style>
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
#banner{
width:900px;
height:500px;
overflow:hidden;
margin:25px auto;
position:relative;
border:1px solid black;
}
#imglist{
width:5400px;
height:500px;
}
#imglist li{
width:900px;
height:500px;
diasplay:none;
float:left;
}
#imglist img{
width:100%;
/*display:none;*/
}
#iconlist{
position:absolute;
right:20px;
bottom:10px;
}
#iconlist li{
border:1px solid black;
width:25px;
height:25px;
line-height:25px;
text-align:center;
border-radius:15px;
margin:3px;
float:left;
color:#fff;
cursor:pointer;
}
</style>
</head>
<body>
<div id = 'banner'>
<ul id='imglist'>
<li><a href=""><img src="./static/1.jpg" alt=""></a></li>
<li><a href=""><img src="./static/2.jpg" alt=""></a></li>
<li><a href=""><img src="./static/3.jpg" alt=""></a></li>
<li><a href=""><img src="./static/4.jpg" alt=""></a></li>
<li><a href=""><img src="./static/5.jpg" alt=""></a></li>
<li><a href=""><img src="./static/1.jpg" alt=""></a></li>
</ul>
<ul id="iconlist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<!-- 设置js样式 -->
<script>
// 获取元素
var imgs = document.getElementById('imglist').getElementsByTagName('a');
var icons = document.getElementById('iconlist').getElementsByTagName('li');
// 初始化图片位置
var left = 0;
imglist.style.marginLeft=left+"px"
// 设置定时器
var timer;
run();
function run(){
if (left <= -4500) {
left=0
};
// 位置为整张图时暂停一秒(下面是三元表达式)
var n = (left%900==0)?1000:10;
changeimg();
// 计算图片下标
var m = Math.floor(-left/900);
changeicon(m)
left-=10;
//将时间设置为可变变量
timer = setTimeout(run,n);
}
function changeimg(){
imglist.style.marginLeft=left+'px';
}
function changeicon(m){
for (var i = 0; i < icons.length; i++) {
icons[i].style.backgroundColor='';
};
icons[m].style.backgroundColor='orange';
}
// 绑定图片事件
for (var i = 0; i < imgs.length; i++) {
// ()(i)
(function(i){
imgs[i].onmouseover = function(){
clearTimeout(timer);
left=-i*900;
changeimg();
changeicon(i)
}
imgs[i].onmouseout=function(){
run();
}
})(i)
}
// 绑定图标事件
for (var i = 0; i < icons.length; i++) {
// ()(i)
(function(i){
icons[i].onmouseover = function(){
clearTimeout(timer);
left=-i*900;
changeimg();
changeicon(i)
}
icons[i].onmouseout=function(){
run();
}
})(i)
}
</script>
</body>
</html>
标签：轮播,imglist,height,width,25px,学会,滚动式,left 来源： https://blog.csdn.net/weixin_43474646/article/details/88131462