? ? ? function f1() {? ? ? ? ? ? var container = document.getElementById('container1');? ? ? ? ? ? var list = document.getElementById('list1');? ? ? ? ? ? var buttons = document.getElementById('buttons1').getElementsByTagName('span');? ? ? ? ? ? var prev = document.getElementById('prev1');? ? ? ? ? ? var next = document.getElementById('next1');? ? ? ? ? ? var index = 1;? ? ? ? ? ? var len = 2;? ? ? ? ? ? var animated = false;? ? ? ? ? ? var interval = 3000;? ? ? ? ? ? var timer;? ? ? ? ? ? function animate (offset) {? ? ? ? ? ? ? ? if (offset == 0) {? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? animated = true;? ? ? ? ? ? ? ? var time = 600;? ? ? ? ? ? ? ? var inteval = 10;? ? ? ? ? ? ? ? var speed = offset/(time/inteval);? ? ? ? ? ? ? ? var left = parseInt(list.style.left) + offset;? ? ? ? ? ? ? ? var go = function (){? ? ? ? ? ? ? ? ? ? if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {? ? ? ? ? ? ? ? ? ? ? ? list.style.left = parseInt(list.style.left) + speed + 'px';? ? ? ? ? ? ? ? ? ? ? ? setTimeout(go, inteval);? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? else {? ? ? ? ? ? ? ? ? ? ? ? list.style.left = left + 'px';? ? ? ? ? ? ? ? ? ? ? ? if(left>-260){? ? ? ? ? ? ? ? ? ? ? ? ? ? list.style.left = -260 * len + 'px';? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? if(left<(-260 * len)) {? ? ? ? ? ? ? ? ? ? ? ? ? ? list1.style.left = '-260px';? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? animated = false;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? go();? ? ? ? ? ? }? ? ? ? ? ? function showButton() {? ? ? ? ? ? ? ? for (var i = 0; i < buttons.length ; i++) {? ? ? ? ? ? ? ? ? ? if( buttons[i].className == 'on'){? ? ? ? ? ? ? ? ? ? ? ? buttons[i].className = '';? ? ? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? buttons[index - 1].className = 'on';? ? ? ? ? ? }? ? ? ? ? ? function play() {? ? ? ? ? ? ? ? timer = setTimeout(function () {? ? ? ? ? ? ? ? ? ? next.onclick();? ? ? ? ? ? ? ? ? ? play();? ? ? ? ? ? ? ? }, interval);? ? ? ? ? ? }? ? ? ? ? ? function stop() {? ? ? ? ? ? ? ? clearTimeout(timer);? ? ? ? ? ? }? ? ? ? ? ? next.onclick = function () {? ? ? ? ? ? ? ? if (animated) {? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? if (index == 2) {? ? ? ? ? ? ? ? ? ? index = 1;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? else {? ? ? ? ? ? ? ? ? ? index += 1;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? animate(-260);? ? ? ? ? ? ? ? showButton();? ? ? ? ? ? }? ? ? ? ? ? prev.onclick = function () {? ? ? ? ? ? ? ? if (animated) {? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? if (index == 1) {? ? ? ? ? ? ? ? ? ? index = 2;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? else {? ? ? ? ? ? ? ? ? ? index -= 1;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? animate(260);? ? ? ? ? ? ? ? showButton();? ? ? ? ? ? }? ? ? ? ? ? for (var i = 0; i < buttons.length; i++) {? ? ? ? ? ? ? ? buttons[i].onclick = function () {? ? ? ? ? ? ? ? ? ? if (animated) {? ? ? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? if(this.className == 'on') {? ? ? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? var myIndex = parseInt(this.getAttribute('index'));? ? ? ? ? ? ? ? ? ? var offset = -260 * (myIndex - index);? ? ? ? ? ? ? ? ? ? animate(offset);? ? ? ? ? ? ? ? ? ? index = myIndex;? ? ? ? ? ? ? ? ? ? showButton();? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? container.onmouseover = stop;? ? ? ? ? ? container.onmouseout = play;? ? ? ? ? ? play();? ? ? ? } function f2() {? ? ? ? ? ? var container = document.getElementById('container');? ? ? ? ? ? var list = document.getElementById('list');? ? ? ? ? ? var buttons = document.getElementById('buttons').getElementsByTagName('span');? ? ? ? ? ? var prev = document.getElementById('prev');? ? ? ? ? ? var next = document.getElementById('next');? ? ? ? ? ? var index = 1;? ? ? ? ? ? var len = 3;? ? ? ? ? ? var animated = false;? ? ? ? ? ? var interval = 3000;? ? ? ? ? ? var timer;? ? ? ? ? ? function animate (offset) {? ? ? ? ? ? ? ? if (offset == 0) {? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? animated = true;? ? ? ? ? ? ? ? var time = 300;? ? ? ? ? ? ? ? var inteval = 10;? ? ? ? ? ? ? ? var speed = offset/(time/inteval);? ? ? ? ? ? ? ? var left = parseInt(list.style.left) + offset;? ? ? ? ? ? ? ? var go = function (){? ? ? ? ? ? ? ? ? ? if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {? ? ? ? ? ? ? ? ? ? ? ? list.style.left = parseInt(list.style.left) + speed + 'px';? ? ? ? ? ? ? ? ? ? ? ? setTimeout(go, inteval);? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? else {? ? ? ? ? ? ? ? ? ? ? ? list.style.left = left + 'px';? ? ? ? ? ? ? ? ? ? ? ? if(left>-440){? ? ? ? ? ? ? ? ? ? ? ? ? ? list.style.left = -440 * len + 'px';? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? if(left<(-440 * len)) {? ? ? ? ? ? ? ? ? ? ? ? ? ? list.style.left = '-440px';? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? animated = false;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? go();? ? ? ? ? ? }? ? ? ? ? ? function showButton() {? ? ? ? ? ? ? ? for (var i = 0; i < buttons.length ; i++) {? ? ? ? ? ? ? ? ? ? if( buttons[i].className == 'on'){? ? ? ? ? ? ? ? ? ? ? ? buttons[i].className = '';? ? ? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? buttons[index - 1].className = 'on';? ? ? ? ? ? }? ? ? ? ? ? function play() {? ? ? ? ? ? ? ? timer = setTimeout(function () {? ? ? ? ? ? ? ? ? ? next.onclick();? ? ? ? ? ? ? ? ? ? play();? ? ? ? ? ? ? ? }, interval);? ? ? ? ? ? }? ? ? ? ? ? function stop() {? ? ? ? ? ? ? ? clearTimeout(timer);? ? ? ? ? ? }? ? ? ? ? ? next.onclick = function () {? ? ? ? ? ? ? ? if (animated) {? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? if (index == 3) {? ? ? ? ? ? ? ? ? ? index = 1;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? else {? ? ? ? ? ? ? ? ? ? index += 1;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? animate(-440);? ? ? ? ? ? ? ? showButton();? ? ? ? ? ? }? ? ? ? ? ? prev.onclick = function () {? ? ? ? ? ? ? ? if (animated) {? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? if (index == 1) {? ? ? ? ? ? ? ? ? ? index = 3;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? else {? ? ? ? ? ? ? ? ? ? index -= 1;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? animate(440);? ? ? ? ? ? ? ? showButton();? ? ? ? ? ? }? ? ? ? ? ? for (var i = 0; i < buttons.length; i++) {? ? ? ? ? ? ? ? buttons[i].onclick = function () {? ? ? ? ? ? ? ? ? ? if (animated) {? ? ? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? if(this.className == 'on') {? ? ? ? ? ? ? ? ? ? ? ? return;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? var myIndex = parseInt(this.getAttribute('index'));? ? ? ? ? ? ? ? ? ? var offset =-440 * (myIndex - index);? ? ? ? ? ? ? ? ? ? animate(offset);? ? ? ? ? ? ? ? ? ? index = myIndex;? ? ? ? ? ? ? ? ? ? showButton();? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? container.onmouseover = stop;? ? ? ? ? ? container.onmouseout = play;? ? ? ? ? ? play();? ? ? ? } function addLoadEvent(func) {? var oldonload = window.onload;? if (typeof window.onload != 'function') {? ? window.onload = func;? } else { ?? ? window.onload = function() {? ? ? oldonload();? ? ? func();? ? }? }}addLoadEvent(f1);addLoadEvent(f2);