|
|
| Line 1: |
Line 1: |
| − | <!DOCTYPE html>
| + | |
| | <html > | | <html > |
| | <head> | | <head> |
| | <meta charset="UTF-8"> | | <meta charset="UTF-8"> |
| | <title>Document</title> | | <title>Document</title> |
| − | <script>
| |
| − | window.onload=function() {
| |
| − |
| |
| − | var prev=document.getElementById("prev");
| |
| − | var next=document.getElementById("next");
| |
| − | var list=document.getElementById("list");
| |
| − | var buttons=document.getElementById("buttons").getElementsByTagName("span");
| |
| − | var containers=document.getElementById("containers");
| |
| − | var pzz=1;
| |
| − | var timer;
| |
| − | var animated=false;
| |
| − | function shownButton(){
| |
| − | for (var i = 0; i < buttons.length ; i++) {
| |
| − | if( buttons[i].className == 'on'){
| |
| − | buttons[i].className = '';
| |
| − |
| |
| − | break;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − | buttons[pzz -1].className="on";
| |
| − | }
| |
| − | function animate(offset){
| |
| − | var time = 300;
| |
| − | var inteval = 10;
| |
| − | var speed = offset/(time/inteval);
| |
| − | animated=true;
| |
| − | var newLeft=parseInt(list.style.left) +offset;
| |
| − | function go(){
| |
| − | if ( (speed > 0 && parseInt(list.style.left) < newLeft) || (speed < 0 && parseInt(list.style.left) > newLeft)) {
| |
| − | list.style.left = parseInt(list.style.left) + speed + 'px';
| |
| − | setTimeout(go, inteval);
| |
| − | }
| |
| − | else
| |
| − | {
| |
| − |
| |
| − | animated=false;
| |
| − |
| |
| − | if (newLeft >-600) {
| |
| − | list.style.left=-3000+"px";
| |
| − | };
| |
| − | if (newLeft <-3000) {
| |
| − | list.style.left=-600+"px";
| |
| − | };
| |
| − | }
| |
| − | }
| |
| − | go();
| |
| − | };
| |
| − |
| |
| − | prev.onclick=function(){
| |
| | | | |
| − | if (!animated) {
| |
| − | if (pzz==1) {
| |
| − | pzz=5;
| |
| − | }else {
| |
| − | pzz -=1;
| |
| − | }
| |
| − |
| |
| − | shownButton();
| |
| − | animate(600);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | };
| |
| − | next.onclick=function(){
| |
| − |
| |
| − |
| |
| − |
| |
| − | if (!animated) {
| |
| − | if (pzz==5) {
| |
| − | pzz=1;
| |
| − | }else {
| |
| − | pzz +=1;
| |
| − | }
| |
| − | shownButton();
| |
| − | animate(-600);
| |
| − | }
| |
| − | };
| |
| − | for (var i = 0; i < buttons.length; i++) {
| |
| − | buttons[i].onclick=function(){
| |
| − |
| |
| − | if (this.className=="on") {
| |
| − | return;
| |
| − | }
| |
| − | var mypzz=parseInt(this.getAttribute("pzz"));
| |
| − | var offset=-600*(mypzz-pzz);
| |
| − | if (!animated) {
| |
| − | animate(offset);
| |
| − | }
| |
| − | pzz=mypzz;
| |
| − | shownButton();
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function play(){
| |
| − | timer=setInterval(function(){
| |
| − | next.onclick();
| |
| − | },2000);
| |
| − | }
| |
| − | function stop(){
| |
| − | clearInterval(timer);
| |
| − | }
| |
| − | play();
| |
| − | containers.onmouseover=stop;
| |
| − | containers.onmouseout=play;
| |
| − | }
| |
| − | </script>
| |
| | <style type="text/css"> | | <style type="text/css"> |
| | * | | * |
