|
|
| Line 1: |
Line 1: |
| − | <!DOCTYPE html>
| |
| − | <html lang="en">
| |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <title>Document</title>
| |
| − | <link rel="stylesheet" href="css/test-style.css">
| |
| − | <style type="text/css">
| |
| − | *
| |
| − | {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | body
| |
| − | {
| |
| − | padding: 20px;
| |
| − | }
| |
| − | #container
| |
| − | { position: relative;
| |
| − | overflow: hidden;
| |
| | | | |
| − | width: 600px; height: 400px; border: 3px solid #333;
| |
| − | }
| |
| − | #list
| |
| − | { position: absolute;
| |
| − | z-index: 1;
| |
| − | width: 4200px;
| |
| − | height: 400px;
| |
| − | }
| |
| − | #list img
| |
| − | {
| |
| − | float: left;
| |
| − | width: 600px;
| |
| − | }
| |
| − | #buttons
| |
| − | {
| |
| − | position: absolute;
| |
| − | z-index: 2;
| |
| − | bottom: 20px;
| |
| − | left: 250px;
| |
| − | width: 100px;
| |
| − | height: 10px;
| |
| − | }
| |
| − | #buttons span
| |
| − | {float: left;
| |
| − | width: 10px;
| |
| − | height: 10px;
| |
| − | margin-right: 5px;
| |
| − |
| |
| − | cursor: pointer;
| |
| − | border: 1px solid #fff;
| |
| − | border-radius: 50%;
| |
| − | background: #333;
| |
| − | }
| |
| − | #buttons .on
| |
| − | {
| |
| − | background: orangered;
| |
| − | }
| |
| − | .arrow
| |
| − | {font-size: 36px;
| |
| − | font-weight: bold;
| |
| − | line-height: 39px;
| |
| − | position: absolute;
| |
| − | z-index: 2;
| |
| − | top: 180px;
| |
| − | display: none;
| |
| − | width: 40px;
| |
| − | height: 40px;
| |
| − |
| |
| − | cursor: pointer;
| |
| − | text-align: center;
| |
| − | color: #fff;
| |
| − | background-color: RGBA(0,0,0,.3);
| |
| − | }
| |
| − | .arrow:hover
| |
| − | {
| |
| − | background-color: RGBA(0,0,0,.7);
| |
| − | }
| |
| − | #container:hover .arrow
| |
| − | {
| |
| − | display: block;
| |
| − | }
| |
| − | #prev
| |
| − | {
| |
| − | left: 20px;
| |
| − | }
| |
| − | #next
| |
| − | {
| |
| − | right: 20px;
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | window.onload=function() {
| |
| − | // body...
| |
| − | var prev=document.getElementById("prev");
| |
| − | var next=document.getElementById("next");
| |
| − | var list=document.getElementById("list");
| |
| − | var buttons=document.getElementById("buttons").getElementsByTagName("span");
| |
| − | var container=document.getElementById("container");
| |
| − | var index=1;
| |
| − | var timer;
| |
| − | var animated=false;
| |
| − | function shownButton(){
| |
| − | for (var i = 0; i < buttons.length ; i++) {
| |
| − | if( buttons[i].className == 'on'){
| |
| − | buttons[i].className = '';
| |
| − | /* prev和next每click一次，
| |
| − | 就会清除一次前一个class为on的span元素，
| |
| − | 所以没有必要再去循环下面的span*/
| |
| − | break;
| |
| − | }
| |
| − | // 或者直接遍历清除 buttons[i].className=""；
| |
| − | }
| |
| − | buttons[index -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;
| |
| − | // list.style.left=newLeft+"px";
| |
| − | if (newLeft >-600) {
| |
| − | list.style.left=-3000+"px";
| |
| − | };
| |
| − | if (newLeft <-3000) {
| |
| − | list.style.left=-600+"px";
| |
| − | };
| |
| − | }
| |
| − | }
| |
| − | go();
| |
| − | };
| |
| − |
| |
| − | prev.onclick=function(){
| |
| − | /*添加一个if判断index为1时，如果继续往前滚的话就让index返回第五个span
| |
| − | 但是当快速点击arrow时会出现一种span点亮延迟的情况。可以尝试把判断index是否大于1或小于5的情况放进
| |
| − | 判断是否animated的if语句中，先判断能不能点击，再点亮。
| |
| − | */
| |
| − | if (!animated) {
| |
| − | if (index==1) {
| |
| − | index=5;
| |
| − | }else {
| |
| − | index -=1;
| |
| − | }
| |
| − |
| |
| − | shownButton();
| |
| − | animate(600);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | };
| |
| − | next.onclick=function(){
| |
| − |
| |
| − |
| |
| − |
| |
| − | if (!animated) {
| |
| − | if (index==5) {
| |
| − | index=1;
| |
| − | }else {
| |
| − | index +=1;
| |
| − | }
| |
| − | shownButton();
| |
| − | animate(-600);
| |
| − | }
| |
| − | };
| |
| − | for (var i = 0; i < buttons.length; i++) {
| |
| − | buttons[i].onclick=function(){
| |
| − | //无关紧要
| |
| − | if (this.className=="on") {
| |
| − | return;
| |
| − | }
| |
| − | var myIndex=parseInt(this.getAttribute("index"));
| |
| − | var offset=-600*(myIndex-index);
| |
| − | if (!animated) {
| |
| − | animate(offset);
| |
| − | }
| |
| − | index=myIndex;
| |
| − | shownButton();
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function play(){
| |
| − | timer=setInterval(function(){
| |
| − | next.onclick();
| |
| − | },2000);
| |
| − | }
| |
| − | function stop(){
| |
| − | clearInterval(timer);
| |
| − | }
| |
| − | play();
| |
| − | container.onmouseover=stop;
| |
| − | container.onmouseout=play;
| |
| − | }
| |
| − | </script>
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − | <div id="container">
| |
| − | <div id="list" style="left: -600px;">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/d/d8/T--BIT--InterLab_Figure-CFU1.jpeg" alt="1"/>
| |
| − | <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="1"/>
| |
| − | <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="2"/>
| |
| − | <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="3"/>
| |
| − | <img src="https://2018.igem.org/File:T--Bordeaux--description2.png" alt="4"/>
| |
| − | <img src="img/555.jpg" alt="5"/>
| |
| − | <img src="img/111.jpg" alt="5"/>
| |
| − | </div>
| |
| − | <div id="buttons">
| |
| − | <span index="1" class="on"></span>
| |
| − | <span index="2"></span>
| |
| − | <span index="3"></span>
| |
| − | <span index="4"></span>
| |
| − | <span index="5"></span>
| |
| − | </div>
| |
| − | <a href="javascript:;" id="prev" class="arrow"><</a>
| |
| − | <a href="javascript:;" id="next" class="arrow">></a>
| |
| − | </div>
| |
| − | </body>
| |
| − | </html>
| |
