现在大多数网站都会在页面做一个轮播效果,看着舒服,同样的内容能展示更多的内容,很方便,我在今天接触到了这个无缝轮播图,在一番调试下总算是简单实现了效果,不多说,上代码
html:
<div class="top" id="top">
<ul id="imgs">
<li><img src="images/banner_1.jpg" alt=""></li>
<li><img src="images/banner_2.png" alt=""></li>
<li><img src="images/banner_3.png" alt=""></li>
<li><img src="images/banner_4.png" alt=""></li>
<li><img src="images/banner_5.png" alt=""></li>
<li><img src="images/banner_6.png" alt=""></li>
<li><img src="images/banner_7.png" alt=""></li>
</ul>
<ol id="oo">
</ol>
<a href="#" class="l" id="left"><</a>
<a href="#" class="r" id="right">></a>
</div>
js:
<script src="common.js"></script>
<script>
var scrren = my$("top");//相框
var imgWidth = scrren.offsetWidth;//相框的宽度
var ulObj = my$("imgs");//ul
var list = my$("imgs").getElementsByTagName("li");//所有的li的节点
var olObj = my$("oo");//ol
var btnL = my$("left");//左右两边按钮的盒子
var btnR = my$("right");//左右两边按钮的盒子
var index = 0;
//1.创建小按钮。 根据小按钮, 切换对应的图片
for(var i = 0 ; i < list.length; i++){
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.setAttribute("index", i);
liObj.onmouseover = function () {
for(var j = 0 ; j < olObj.children.length ; j++){
olObj.children[j].removeAttribute("class");
}
this.className = "current";
//获取对应的索引
var picIndex = this.getAttribute("index");
animateBian(ulObj, -picIndex * imgWidth);
index = this.getAttribute("index");
}
}
olObj.firstElementChild.className = "current";
//2.自动播放
//克隆一个ul的第一个图片, 添加到最后面去
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timer = setInterval(move, 1000);
index = 0;
function move() {
if(index >= list.length-1){
//直接跳转到第一个图片
index = 0;
ulObj.style.left = "0px";
}
index++;
animateBian(ulObj, -index * imgWidth);
//先干掉所有的li的背景颜色
for(var j = 0 ; j < olObj.children.length ; j++){
olObj.children[j].removeAttribute("class");
}
//判断小圆点
if(index == list.length -1){
olObj.children[0].className = "current";
}else{
olObj.children[index].className = "current";
}
};
//3.鼠标移入移出
my$("top").onmouseover = function () {
clearInterval(timer);
}
my$("top").onmouseout = function () {
timer = setInterval(move, 1000);
}
//4.点击两边按钮
my$("right").onclick = function (){
move();
return false;
}
my$("left").onclick = function () {
if(index == 0){
index = list.length - 1;
ulObj.style.left = -index * imgWidth + "px";
}
index--;
animateBian(ulObj, -index * imgWidth);
//先干掉所有的li的背景颜色
for(var j = 0 ; j < olObj.children.length ; j++){
olObj.children[j].removeAttribute("class");
}
olObj.children[index].className = "current";
return false;
}
</script>
common.js
//变速的动画
function animateBian(element,target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
var step =(target-current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
current += step;
if (Math.abs(target - current) > Math.abs(step)){
element.style.left = current + "px";
} else{
clearInterval(element.timeId);
element.style.left = target + "px";
}
},50);
}
// 通过id名获取的元素
function my$(id) {
return document.getElementById(id);
}
//通过标签名获取的元素
function ele$(element) {
return document.getElementsByTagName(element);
}
这个common.js 是我在学习中不断完善的一个自用的js文件,这里只放了上边代码所用到的。效果这里不做描述,刚开是写完的时候没发现什么问题,在多次实验后发现在鼠标移入原点移到指定图片,鼠标移出图片框之后,轮播还是从之前自动轮播停止的位置开始继续,在我看来这是一个瑕疵(反正我看着不舒服),那怎么办呢?
这个情况是因为鼠标移入到原点,图片是移动了,但是所对应的index值并没有发生变化,还是自动轮播停止时的值,所以就需要我们去给index进行赋值,使它符合当前图片所对应的index,在liObj.onmouseover 中加入一句index = this.getAttribute(“index”); 这里“=”前的index是我们定义的全局变量,而后边方法中的 “index” 是我们对圆点添加的自定义属性,到这里就实现了简单的效果了。
新手总结,如有错误,请各位多提意见!