使用js制作完整轮播图 （解决最后一张切换到前面一张的动画问题）
首先先做好界面部分 使所有的图片浮动到一行中， 然后overflow：hidden; 清除溢出
需要动的部分需要添加定位
用户看到的轮播效果就是 改变图片的偏移量，使其滚动，添加定时器使其自动播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="tools.js"></script> //自己封装了一个函数 下面给出了这个tools
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#banner{
width: 610px;
height: 470px;
margin:70px auto;
padding: 10px 0px;
/* background-color: #00FFFF; */
position: relative;
left: 0px;
overflow: hidden;
}
#imagesL{
/* width: 3100px; */
list-style: none;
position: absolute;
left: 0;
}
#imagesL li{
float: left;
margin: 0px 10px;
}
#nav{
position: absolute;
bottom: 15px;
}
#nav a{
float: left;
width: 15px;
height: 15px;
background-color: white;
border-radius: 50%;
margin: 0 5px;
opacity: 0.5;
filter: alpha(opacity=50);/* 兼容IE8 */
}
#nav a:hover{
background-color: #000000;
}
</style>
</head>
<body>
<div id="banner">
<ul id="imagesL">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
</ul>
<div id="nav">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
这是界面部分
需要注意的问题是在浮动的时候父元素的宽度一定要足够 应该等于下面的图片的宽度加上他的边距的和
这里我采用的是 使用js动态计算宽度 包括图片下方的小圆点也采用的js实现
至于图片为什么是6张 这个是为了解决第五张到第一张的切换问题，下面会详细讲到
js部分
可以实现的功能
1、自动播放
2、当鼠标放在图片上时停止播放 离开继续播放
3、使用下面的小圆点 点击切换 并且 不合自动播放冲突
<script type="text/javascript">
window.onload = function(){
var imagesL = document.getElementById("imagesL");
var imagesAL = document.getElementsByTagName("img");
imagesL.style.width = 610*imagesAL.length + "px";//动态计算父盒子的宽度
var banner = document.getElementById("banner");
var nav = document.getElementById("nav");
nav.style.left = (banner.offsetWidth - nav.offsetWidth)/2 + "px"; //计算小圆点的位置 使小圆点居中
var allA = document.getElementsByTagName("a");
var index = 0;
allA[index].style.backgroundColor = "black";
var timer;
for(var i = 0; i < allA.length; i++){ //单击小圆点 切换图片
allA[i].num = i;
allA[i].onclick = function(){
clearInterval(timer);
index = this.num;
// alert(this.num);
// imagesL.style.left = -610*index + "px";
setA(); 当鼠标放到小圆点上时改变颜色 切换后改变小圆点的颜色
move(imagesL, "left", 30, -610*index, function(){ //点击后继续自动播放
autoChange();
});
}
}
imagesL.onmouseover = function(){
clearInterval(timer);
} //鼠标停在图片上时 轮播动画停止
imagesL.onmouseout = function(){
autoChange();
} // 鼠标离开图片时轮播动画继续播
autoChange(); //开启自动播放
function setA(){ //关于小圆点颜色变化的函数
if(index >= imagesAL.length - 1){
index = 0;
imagesL.style.left = 0; // 使第六张 瞬间变为第一张，直接修改lef为0
}
for(var i=0 ;i<allA.length; i++){
allA[i].style.backgroundColor = "";//为了正常显示内联样式表的hover 只显示 样式表里的颜色
}
allA[index].style.backgroundColor = "black";
}
function autoChange(){ //自动播放函数
timer = setInterval(function(){
index ++;
move(imagesL, "left", 3, -610*index, function(){
setA(); //在刚播完第六张 瞬间切换到第一张 第六张与第一张是同一张图片
});
},3500);
}
}
</script>
function move(obj,attr,speed,target,callback){ //封装的函数为tools 功能为实现 元素的动态移动
var current = parseInt( getStyle(obj,attr)); //转化为数字计算
if(current > target) speed = -speed;
clearInterval(obj.timer); //清除计时器的累加
obj.timer = setInterval(function(){ //把timer添加到obj中使动画执行不冲突
var oldvalue = parseInt( getStyle(obj,attr));
var newvalue = oldvalue + speed ;
if(speed < 0 && newvalue < target || speed > 0 && newvalue > target){ //速度小于0 并且newvalue < target向左移
newvalue = target;
}
obj.style[attr] = newvalue + "px";
if(newvalue == target){
clearInterval(obj.timer);
callback && callback(); //回调函数 判断是否有这个有则执行 没有的话不影响该函数的执行
}
},3);
}
function getStyle(obj,name){ // 获取元素样式的函数
if(window.getComputedStyle){ //判断浏览器
return getComputedStyle(obj,null)[name];
}
else{
return box.currentStyle[name];
}
}
最后一张切换到第一张 这里应用了一个技巧
如果有5张图片
添加第六张图片 让第六张图片与第一张图片相同（由于我上面求父盒子宽度使用的js动态添加的所以不需要再考虑父盒子宽度不足的问题） 当播到第六张（与第一张相同）使第六张 瞬间变为第一张，直接修改left为0，这就实现了第六张与第一张 和谐切换
这次的轮播图 用到了封装好的 tools工具 和一个getStyle(）函数
这个可以参考我写的
getStyle()点击进入
如果想使用此轮播图 里面的图片及大小需要自己更改
905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
