具体思路如下:要得到图片滑动效果 就意味着几张图片并排摆放,为方便实现我在无序列表中添加图片,再将其旋转至水平,图片再转正,调整好长度宽度。再设置绝对定位就得到了一组并排的图片。接下来只需每隔一段时间修改ul的left的值,就能实现轮播滑动效果。滑动的速度是根据起点到目标点的位置进行动态调整。距离目标位置越近,速度越慢,越远速度越快。核心代码如下:
function move(obj,ita,attr){
obj.timer = null;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cur = parseInt(getstyle(obj,attr));
var speed = (ita-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(ita==cur){
clearInterval(obj.timer);
}else{
obj.style[attr] = speed+cur+'px';
}
},30);
ul{
position: absolute;
margin: 0 auto;
list-style-type: none;
}
ul li{
width: 600px;
height: 600px;
}
ul li img{
width: 600px;
height: 400px;
z-index: 0;
transform:rotate(-90deg);
}
.btn {
width: 60px;
height: 50px;
position: absolute;
z-index: 3;
}
.btn img{
width: 60px;
height: 50px;
opacity: 0.3;
}
.btn img:hover{
opacity: 1;
}
window.onload =function(){
var aBTN = document.getElementsByClassName('btn');
aBTN[0].style.top = '140px';
aBTN[1].style.top = '140px';
aBTN[1].style.left = '540px';
var aIMG = document.getElementsByTagName('ul');
var nr = document.getElementById('nr');
now = 0;
function tab(){
++now;
if(now>2){
now=0;
}
move(aIMG[0],480-600*now,'left');
}
//setInterval(tab,2000);自动滚动
aBTN[0].onclick = function(){
--now;
alert("当前"+now);
if(now<0){
now=2;
}
move(aIMG[0],480-600*now,'left');
}//点击展示前一个
aBTN[1].onclick = function(){
++now;alert("当前"+now);
if(now>2){
now=0;
}
move(aIMG[0],480-600*now,'left');
}//点击展示后一个
}
<div id="nr" style="position: relative;margin: 0 auto;width: 600px;height: 400px;overflow: hidden;">
<div class="btn">
<img src="../img/箭头左.jpg" />
</div>
<div class="btn">
<img src="../img/箭头右.jpeg">
</div>
<ul style="transform:rotate(90deg);top: -800px;left: 480px;">
<li ><img src="../img/年.jpg"></li>
<li ><img src="../img/银装素裹.jpg"></li>
<li ><img src="../img/青城山.jpg"></li>
</ul>
</div>