首頁 > 開發者 > CSS

HTML+CSS+JavaScript網路相簿【有縮圖】

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：for   elements   image   i+1      log   ima   one   ==   

 

今晚整理了一下，把班級相簿弄了一下，加了個縮圖，版本有點醜，下個版本再更新吧。

 1  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大肥</title>
<style type="text/css">
div{margin:0px auto;}
.box{width: 800px;height: 530px;overflow: hidden;border-radius: 10px;}
.thum{height: 200px;width: 1500px;margin-top: 50px;}
ul{list-style: none;margin:0px;padding: 0px;}
li{float: left;}
.thumbs_none{opacity:0.6;filter:alpha(opacity=40); }

</style>

<script type="text/javascript">
//定義一個變數控制全域定時器
var times;

window.onload=function(){
//用變數控制定時器
times = setInterval(‘lb()‘,1000);
}

//圖片輪播方法
var i=2;
function lb(){
//擷取src屬性 更改圖片路徑
var info = document.getElementById("img");
var thu=document.getElementById("thumbs");

var li_list=document.getElementsByTagName("li");
for (var j = 1; j<li_list.length;j++) {
//給所有縮圖添加透明樣式
li_list[j].className="thumbs_none";
//匹配縮圖 同步去除透明度
if(j==i){
li_list[j].className="";
}
}

//移除透明度樣式
thu.className="";
info.src="./"+i+".JPG";
//運行後i+1 到達最大數時候迴歸清零
i++;
if(i>23){
i=1;
}
}

//滑鼠經過停止
function stop(){
//清理定時器
clearInterval(times);
}

//滑鼠離開繼續輪播
function again(){
//清除定時器的時候要把這個也要清除 否則兩個同時運行會重疊
times = setInterval(‘lb()‘,1000);
}
</script>
</head>
<body>
<div class="box">
<ul><li><img src="./1.JPG" id="img" onmouseover="stop()" onmouseout="again()" /></li> </ul> </div>

<div class="thum">
<ul class="tbs">
<!-- 這裡沒用js 暫時不寫 下個版本再改進 -->
<li class=""><img src="./thumbs/1.JPG" id="thumbss" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/2.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/3.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/4.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/5.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/6.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/7.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/8.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/9.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/10.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/11.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/12.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/13.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/14.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/15.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/16.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/17.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/18.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/19.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/20.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/21.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/22.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/23.JPG" id="thumbs" onmouseover="stop()" onmouseout="again()" class="" /></li>


</ul>
</div>
</body>
</html>

 

如下:

  

線上示範地址：http://bbqwifi.info/php/show/ 不過圖片上傳後好像有點延遲，大家別介意。

HTML+CSS+JavaScript網路相簿【有縮圖】

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More