Difference between revisions of "Team:CPU CHINA"

Line 1: Line 1:
 
<html>
 
<html>
−
 
−
<head>
 
−
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
 
−
<title>自动播放——幻灯片效果</title>
 
−
</head>
 
−
 
 
<style>
 
<style>
−
*{
+
/*定义大盒子*/
−
margin:0;
+
    #demo{            
−
padding:0;
+
        overflow: hidden;
−
}
+
        width:200px;
−
body{
+
        height:150px;
−
background:black;
+
        position: relative;
−
text-align:center;
+
−
font:12px/20px Arial;
+
−
}
+
−
ul{
+
−
list-style-type:none;
+
−
}
+
−
#box{
+
−
position:relative;
+
−
width:710px;
+
−
height:470px;
+
−
background:#000;
+
−
border-radius:5px;
+
−
border:8px solid #000;
+
−
margin:10px auto;
+
−
margin-top:150px;
+
−
}
+
−
#box .list{
+
−
position:relative;
+
−
width:710px;
+
−
height:470px;
+
−
overflow:hidden;
+
−
//border:1px solid #ccc;
+
−
}
+
−
#box .list li{
+
−
position:absolute;
+
−
top:0;
+
−
left:0;
+
−
width:710px;
+
−
height:450px;
+
−
opacity:0;
+
−
filter:alpha(opacity=0);
+
−
}
+
−
#box .list li.current{
+
−
opacity:1;
+
−
filter:alpha(opacity=100);
+
−
}
+
−
#box .count{
+
−
position:absolute;
+
−
right:0;
+
−
bottom:5px;
+
−
}
+
−
#box .count li{
+
−
color:#224b8f;
+
−
float:left;
+
−
width:20px;
+
−
height:20px;
+
−
cursor:pointer;
+
−
margin-right:8px;
+
−
overflow:hidden;
+
−
background:#afb4db;
+
−
opacity:0.7;
+
−
filter:alpha(opacity=70);
+
−
border:1px solid #78a355;
+
−
border-radius:10px;
+
−
font-size:15px;
+
−
}
+
−
#box .count li.current{
+
−
opacity:1;
+
−
filter:alpha(opacity=100);
+
−
font-weight:700;
+
−
background:#afb4db;
+
−
}
+
−
</style>
+
−
 
+
−
<script>
+
−
window.onload = function(){
+
−
    var oBox= document.getElementById("box");
+
−
    var aUl = document.getElementsByTagName("ul");
+
−
    var aImg = aUl[0].getElementsByTagName("li");
+
−
    var aNum = aUl[1].getElementsByTagName("li");
+
−
    var timer = play = null;
+
−
    var i = index = 0 ;
+
−
   
+
−
    //切换按钮
+
−
    for (i= 0;i<aNum.length ;i++ )
+
−
    {
+
−
        aNum[i].index= i ;
+
−
        aNum[i].onmouseover = function(){
+
−
            show(this.index);
+
−
        }
+
 
     }
 
     }
−
    //鼠标划过关闭定时器
+
/*图片盒子*/
−
     oBox.onmouseover = function(){
+
     #demoimg{
−
         clearInterval(play);
+
         width:600px;
 +
        height:150px;
 +
        position: absolute;
 
     }
 
     }
−
 
+
     #demoimg li{
−
    //自动播放函数
+
         float:left;
−
     function autoPlay(){
+
        list-style: none;
−
         play = setInterval(function(){
+
        width:200px;
−
            index++;
+
         height:150px;
−
            index >= aImg.length && (index = 0);
+
−
            show(index);
+
−
         },3000);
+
 
     }
 
     }
−
    autoPlay();
+
/*blue 部分是附加效果，图片下边对应的蓝色小块*/
−
 
+
     #blue{
−
    //鼠标离开box时自动播放
+
         bottom:0;
−
     oBox.onmouseout = function(){
+
        position: absolute;
−
         autoPlay();
+
 
     }
 
     }
 +
    #blue li{
 +
        list-style: none;
 +
        width:30px;
 +
        height:5px;
 +
        background:#ccc;
 +
        float:left;
 +
        margin: 0 3px;
 +
    }
 +
</style>
 +
 +
<script>
 +
    var i=0;
 +
    function qiehuan(){
 +
        //获取元素
 +
        var demoimg = document.getElementById("demoimg");
 +
        var demoli = demoimg.getElementsByTagName("li");
 +
        //获取图片盒子距左边的距离给left，图片的宽度给swidth，
 +
        //图片盒子中li即图片总数给lis
 +
        var left = demoimg.offsetLeft;
 +
        var swidth = demoli[0].offsetWidth;
 +
        var lis = demoli.length;
 +
        //left从0开始逐渐递减，图片盒子向左移动。
 +
        //当所有图片都移动到左边之后，left=0，重新开始，形成循环播放。
 +
        if(left>-swidth*(lis-1)){
 +
            left = left - swidth;
 +
            demoimg.style.left = left+"px";
 +
            i = i+1;
 +
        }else{
 +
            left = 0;
 +
            demoimg.style.left = left+"px";
 +
            i = 0;
 +
        }
  
−
    function show(a){
 
−
        if(aNum[a].className != "current"){
 
−
            index = a;
 
−
            var alpha = 0;
 
−
            for (i=0;i<aNum.length ;i++ )
 
−
            {
 
−
                aNum[i].className="";
 
−
            }
 
−
            aNum[index].className="current";
 
−
            clearInterval(timer);
 
  
−
            for(i = 0;i<aImg.length;i++){
+
        //附加效果 blue部分 
−
                aImg[i].style.opacity = 0;
+
        var dblue = document.getElementById("blue");
−
                aImg[i].style.filter="alpha(opacity=0)";
+
        //通过参数i设置与图片li对应的blue部分第i个li背景色
 +
        dblue.getElementsByTagName("li")[i].style.background = "blue";
 +
        var thisi = dblue.getElementsByTagName("li")[i];
 +
        var syi = dblue.getElementsByTagName("li");
 +
        //遍历blue的所有li元素，设置非当前li的背景色，注意:syi[j]!=thisi
 +
        for(j=0;j<lis;j++){
 +
            if(syi[j]!=thisi){
 +
              syi[j].style.background="#ccc";
 
             }
 
             }
−
            timer = setInterval(function(){
 
−
                alpha +=4;
 
−
                alpha>100 && (alpha=100);
 
−
                aImg[index].style.opacity=alpha/100;
 
−
                aImg[index].style.filter = "alpha(opacity="+alpha+")";
 
−
                alpha == 100 && clearInterval(timer);
 
−
            },20);
 
 
         }
 
         }
 
     }
 
     }
−
};
+
 
 +
//定时器，每隔2000毫秒执行一次qiehuan()代码，数值越小，幻灯片切换越快
 +
    window.setInterval("qiehuan()",2000);
 
</script>
 
</script>
−
 
+
−
<body>
+
<div id="demo">
−
<div id="box">
+
     <ul id="demoimg">
−
     <ul class="list">
+
         <li><img src="https://static.igem.org/mediawiki/2017/4/40/T--CPU_CHINA--gallery1.png"></li>
−
         <li class="current" ><img src="https://static.igem.org/mediawiki/2017/4/40/T--CPU_CHINA--gallery1.png" width="710" height="470"/></li>
+
         <li><img src="https://static.igem.org/mediawiki/2017/7/70/T--CPU_CHINA--gallery2.png"></li>
−
         <li><img src="https://static.igem.org/mediawiki/2017/7/70/T--CPU_CHINA--gallery2.png" width="710" height="470"/></li>
+
         <li><img src="https://static.igem.org/mediawiki/2017/1/1c/T--CPU_CHINA--gallery3.png"></li>
−
         <li><img src="https://static.igem.org/mediawiki/2017/1/1c/T--CPU_CHINA--gallery3.png" width="710" height="470"/></li>
+
−
        <li><img src="images/13.jpg" width="710" height="470"/></li>
+
−
        <li><img src="images/黑白.jpg" width="710" height="470"/></li>
+
 
     </ul>
 
     </ul>
−
     <ul class="count">
+
     <ul id="blue">
−
         <li class="current">1</li>
+
         <li style="background:blue"></li>
−
         <li>2</li>
+
         <li></li>
−
         <li>3</li>
+
         <li></li>
−
        <li>4</li>
+
−
        <li>5</li>
+
 
     </ul>
 
     </ul>
 
</div>
 
</div>
−
</body>
+
</html>
−
 
+
−
</html>
+

Revision as of 06:49, 16 June 2017