首页 > 代码库 > C3属性的轮播图（持续更新）
C3属性的轮播图（持续更新）
天气好冷，都不想写代码。就先写个没有焦点的轮播图，过两天在补全。
用的是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="http://www.mamicode.com/#" class="right">></a>
<a href="http://www.mamicode.com/#" class="left"><</a>
<ul>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/p_5.jpg" height="220" width="587" ></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/p_1.jpg" height="220" width="587" ></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/p_2.jpg" height="220" width="587" ></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/p_3.jpg" height="220" width="587" ></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/p_4.jpg" height="220" width="587" ></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/p_5.jpg" height="220" width="587" ></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/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>
附 效果图
C3属性的轮播图（持续更新）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。