* {
margin: 0;
padding: 0;
}
.warp {
width: 1032px;
height: 250px;
overflow: hidden;
float: left;
margin: auto;
}
.banner {
height: 250px;
width: 2752px;
position: relative;
margin: auto;
float: left;
left: 0;
}
.banner-one {
height: 250px;
width: 330px;
float: left;
margin-left: 7px;
margin-right: 7px;
}
.prev {
width: 83px;
height: 270px;
background: url(img/last.png);
float: left;
}
.next {
width: 83px;
height: 270px;
background: url(img/next.png);
float: left;
}
.continear {
width: 1200px;
height: 100%;
margin: auto;
}
</head>
<body>
<div class="continear">
<div class="prev" id="prev"></div>
<div class="warp">
<div class="banner" id="banner">
<!--<div class="banner-one" style="background: url(img/programming1.png);"></div>
<div class="banner-one" style="background: url(img/programming2.png);"></div>-->
<div class="banner-one" style="background: url(img/programming3.png);"></div>
<div class="banner-one" style="background: url(img/programming4.png);"></div>
<div class="banner-one" style="background: url(img/programming5.png);"></div>
<div class="banner-one" style="background: url(img/programming6.png);"></div>
<div class="banner-one" style="background: url(img/programming7.png);"></div>
<div class="banner-one" style="background: url(img/programming8.png);"></div>
</div>
</div>
<div class="next" id="next"></div>
</div>
<script>
window.onload = function() {
//通过选择器查询元素
var obanner = document.querySelector("#banner");
var oPrev = document.querySelector("#prev");
var oNext = document.querySelector("#next");
var speed;
//给元素设置事件
//右边按钮事件
oNext.onmouseover = function() {
animate(obanner, "left", 3 * 344);
};
function animate(ele, attr, value) {
clearInterval(ele.timer);
//添加定时器
//setInterval() 方法每 5毫秒执行function() 函数 ，该函数可以实现图片滑动效果
ele.timer = setInterval(function() {
//获取当前属性值
//获取对象ele的属性值attr
var now = getComputedStyle(ele)[attr];
//转换数据类型
now = parseInt(now);
speed = value/43;
if (now == -value) {
//清理定时器
clearInterval(ele.timer);
}
else{
ele.style[attr] = (now - speed) + "px";
}
}, 50);
};
oNext.onmouseout=function(){
clearInterval(obanner.timer);
}
//左边按钮事件
oPrev.onmouseover = function() {
animate1(obanner, "left", 3 * 344);
};
function animate1(ele, attr, value) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
//获取当前属性值
var now = getComputedStyle(ele)[attr];
now = parseInt(now);
speed = value/43;
if (now == 0) {
//清理定时器
clearInterval(ele.timer);
}
else{
ele.style[attr] = (now + speed) + "px";
}
}, 50);
};
oPrev.onmouseout=function(){
clearInterval(obanner.timer);
}
}
</script>
