天气好冷，都不想写代码。就先写个没有焦点的轮播图，过两天在补全。
用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX()
只做了轮播和 鼠标进入停止轮播，离开继续轮播这几项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.banner{
width: 960px;
height: 360px;
/* border: 1px solid black; */
margin: 100px auto;
overflow: hidden;
position: relative;
}
ul{
width: 200000px;
list-style: none;
height: 360px;
transform: translateX(-960px);
transition: all .5s;
}
li{
float: left;
}
img{
width: 960px;
height: 360px;
vertical-align: middle;
display: block;
}
*{
margin: 0;
padding: 0;
}
.right,.left {
position: absolute;
top: 50%;
font-size: 50px;
text-decoration: none;
color: white;
display: block;
background-color: #ccc;
width: 50px;
height: 60px;
text-align: center;
display: none;
}
.right{
right: 0px;
}
</style>
</head>
<body>
<div class="banner">
<a href="#" class="right">></a>
<a href="#" class="left"><</a>
<ul>
<li><a href="#"><img src="images/p_5.jpg" height="220" width="587" ></a></li>
<li><a href="#"><img src="images/p_1.jpg" height="220" width="587" ></a></li>
<li><a href="#"><img src="images/p_2.jpg" height="220" width="587" ></a></li>
<li><a href="#"><img src="images/p_3.jpg" height="220" width="587" ></a></li>
<li><a href="#"><img src="images/p_4.jpg" height="220" width="587" ></a></li>
<li><a href="#"><img src="images/p_5.jpg" height="220" width="587" ></a></li>
<li><a href="#"><img src="images/p_1.jpg" height="220" width="587" ></a></li>
</ul>
</div>
</body>
</html>
<script>
//获取banner
var banner = document.querySelector(‘.banner‘);
//获取宽度
var bannerWidth = banner.offsetWidth;
//获取Ul
var moveUl = document.querySelector(‘ul‘);
//获取li
var lis = document.querySelectorAll(‘li‘);
//循环遍历li 为li绑定index
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
};
var index = 1;
var setTime = setInterval(function (){
index++;
moveUl.style.transition = ‘all .5s‘;
moveUl.style.transform = ‘translateX(‘+index*bannerWidth*-1+‘px)‘;
},1000)
moveUl.addEventListener(‘webkitTransitionEnd‘, function (){
if(index == 6){
index = 1;
moveUl.style.transition = ‘none‘;
moveUl.style.transform = ‘translateX(‘+index*bannerWidth*-1+‘px)‘;
}
})
//鼠标移入停止轮播
banner.onmouseenter = function (){
//清空计时器
clearInterval(setTime);
}
banner.onmouseleave = function (){
setTime = setInterval(function (){
index++;
moveUl.style.transition = ‘all .5s‘;
moveUl.style.transform = ‘translateX(‘+index*bannerWidth*-1+‘px)‘;
},1000)
}
</script>
附 效果图
时间： 2024-10-26 17:24:03