第三种
旋转木马式:
因为以上两个轮播图,我已仔细介绍过body和css部分,所以在这里不做介绍,亦可点击下文链接查看缓动动画函数的封装
js部分:
方法一:
window.onload = function(){
var box = document.getElementById('box'); //最外面的大盒子
var content = document.getElementById('content'); //主图的盒子
var imgArr = document.getElementsByTagName('img'); //图片的索引
var pre = document.getElementById('pre');
var next = document.getElementById('next');
//把五张图片的css方式放到 json 中,1、5相对应,2、4相对应,(注意:此处我写的位置全部相对于主图盒子,当然也可以以最外层的大盒子为参考,可以先在css中把样式写完然后在拿过来)。
var json1 = {"width":400,"zIndex":1,"opacity":30,"left":-140,"top":-40};
var json5 = {"width":400,"zIndex":1,"opacity":30,"left":540,"top":-40};
var json3 = {"width":800,"zIndex":100,"opacity":100,"left":0,"top":0};
var json2 = {"width":600,"zIndex":20,"opacity":80,"left":-200,"top":40};
var json4 = {"width":600,"zIndex":20,"opacity":80,"left":400,"right":-200,"top":40};
//定义一个数组,把json对象放到数组中去
var arr = [json1,json2,json3,json4,json5];
var currentIndex = 0; //定义一个索引
function auto(){ //当你刷新界面的时候,图片全部从中间的盒子,缓动到相对应的位置。
for(var i = 0; i < imgArr.length; i++){
animate(imgArr[i],arr[i]);
}
}
auto();
function preImg(){ //上一张图片,即左侧按钮
for(var i = 0; i < imgArr.length; i++){
animate(imgArr[i],arr[(currentIndex+1)%5]); //当执行这个函数时,所有的图片移动到对应索引加1的位置。
currentIndex++; //索引要加1,以保证所有的图片和索引相对应
if(currentIndex>5){
currentIndex %= 5;
}
}
currentIndex++; //当执行一次这个函数时,对应的索引整体加1
console.log(currentIndex);
}
function nextImg(){
for(var i = 0; i < imgArr.length; i++){
if(currentIndex <= 0){ //把索引规定在一定的范围内
currentIndex += 5;
}
animate(imgArr[i],arr[(currentIndex - 1)%5]); //当你执行下一张图片函数时,所有的图片要运动到下一个位置,如0对应的图片运动到4的位置,1到0的位置。
// 0 4
// 1 0
// 2 1
// 3 2
// 4 3
// 5 4
currentIndex++; //随着i的增加,索引增加
if(currentIndex>5){
currentIndex %= 5;
}
}
currentIndex--; //执行一次函数后,整体索引减1。
}
pre.onclick = preImg; //当你点击左侧按钮时,执行左侧
next.onclick = nextImg; //当你点击右侧按钮时,执行右侧
}
方法二:
var arr = [json1,json2,json3,json4,json5]
var currentIndex = 0; //代表图片的位置
function auto(currentIndex){
for(var i = 0; i < imgArr.length; i++){
var locationIndex = i - currentIndex; //当curentIndex++时,0对应-1, 当再次执行currentIndex++时,此时编号为0的图片在-1位置, 0对应-2, 即编号为0的图片,从-1位置移动到-2位置
if(locationIndex < 0){ //因为位置范围为0~4,所以每当他小于0时,执行加5操作,同样当他等于5时,就把它化为0。
locationIndex += 5;
}
animate(imgArr[i],arr[locationIndex]);
}
}
auto(0); //刷新页面时传入0
next.onclick = function(){
currentIndex++;
if (currentIndex == 5) {
currentIndex = 0;
}
auto(currentIndex);
console.log(currentIndex);
}
pre.onclick = function(){
currentIndex--;
if(currentIndex < 0){
currentIndex = 4;
}
auto(currentIndex);
}
注意:方法一和方法二轮播的方法是相反的
第一种轮播图链接:http://blog.csdn.net/qq_33599109/article/details/77249062
缓动动画函数封装:http://blog.csdn.net/qq_33599109/article/details/77257182
作者:kuke_kuke
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!