HTML+CSS+JavaScript網路相簿【有縮圖】
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" onmouseover="stop()" onmouseout="again()" /></li> </ul> </div>
<div class="thum">
<ul class="tbs">
<!-- 這裡沒用js 暫時不寫 下個版本再改進 -->
<li class=""><img src="./thumbs/1.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/2.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/3.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/4.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/5.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/6.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/7.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/8.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/9.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/10.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/11.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/12.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/13.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/14.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/15.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/16.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/17.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/18.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/19.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/20.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/21.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/22.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
<li class="thumbs_none"><img src="./thumbs/23.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>
</ul>
</div>
</body>
</html>
相關推薦
HTML+CSS+JavaScript網路相簿【有縮圖】
1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大肥</title> <style type="text/css"> di
【HTML+CSS+JavaScript】日歷生成器
itl you ava lse max 星期幾 mat mar 超出 需求：實現日歷生成器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
【HTML+CSS+JavaScript】實現待辦事項（純DOM實現）
todolist ive relative spa java set 釣魚 scrip input 需求：實現待辦事項 <!DOCTYPE html> <html lang="en"> <head> <meta chars
【HTML+CSS+JavaScript】實現地址選擇聯動
div chang city UNC padding () 定義 html 寧波 需求：實現地址選擇聯動 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
【學習筆記】前端學習筆記 HTML+CSS+JavaScript+JQuery
學這些太痛苦了，我一定要成為演算法工程師！ HTML 簡介 Hyper Text Mark Language，超文字標記語言，使用一套標記標籤來描述網頁。 標籤，開始標籤，結束標籤，標籤內容，屬性。開始標籤後加/來結束，如<br/>。推薦使用小寫。
【HTML+CSS+JavaScript】網頁實戰開發筆記之二—關於Web標準，你不能不知道的事
毛星雲，網路ID「淺墨」，90後，熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術，就職於騰訊互娛。 微軟最有價值專家 著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》 碩士就讀於南京航空航天大學航天學院（2013級碩士研究生），已於2016年三月畢業。本科
【Share Code | HTML & CSS & Javascript】動畫片段幻燈片
資源下載： 介紹 本文使用"Pieces"庫輕鬆實現動畫片段幻燈片效果。 今天我們想向您展示如何建立一個具有動畫片段幻燈片效果的圖片。 圖片被分成多個片段，這些片段將以不同的方式進行動畫製作，使用Pieces，可以輕鬆實現這些有趣的效果。 這將是最終結果：
【程式碼筆記】HTML+CSS+JavaScript實現密碼輸入框顯示文字
原理： 通過設定一個input為password，預設display為none，再設定一個input為text設定為block，利用js指令碼控制顯隱。 具體思路： 給type型別為text的輸入框加一個點選事件，點選事件是設定text型別輸入框的display為none，
【程式碼筆記】HTML+CSS+JAVAScript+jQuery點選圖示下滑列表
原理：同前一篇，不過使用的是sildeToggle方法。 具體思路：同前一篇。 具體實現程式碼： JS檔案： function showSort() { $("#sort").click(funct
讓你的eclipse實現寫JAVA代碼，HTML,CSS,JAVASCRIPT代碼提示
css ref win imp center asc java代碼 char 保存文件 1.打開eclipse→Windows→Preferences→Java→Editor→Content Assist 改動Auto Activation triggers f
html+css+JavaScript例題
html javascript css 這個例題主要是做一個表格，一個存儲學生資料的表格，能夠完成以下功能：添加學生刪除學生修改學生分頁查詢學生html代碼：<!DOCTYPE html> <html> <head> <meta
2018/1/1 Html+CSS+JavaScript
css樣式 三種 ttl 編程基礎 執行 層次 對象 修改 ont 1、頭信息的作用 可以網頁的標題 tittle 搜索關鍵詞：keywords 頁面描述：description 網頁跳轉： http-eqip2、css樣式的導入@import，實際上相
復習HTML CSS JavaScript
lean ret html 隨著 gree 調用 基準 pac 選擇器 HTML cellspacing與cellpadding： 1 <table width="400px" cellpadding="0px" border = "1" cellspac
前端html+css+JavaScript 需要掌握的單詞
前端html+css+JavaScript 需要掌握的單詞 broswer 瀏覽器（客戶端） html 超文字標記語言 css 層疊樣式表 javascript 語言名字(類似python/php/c…) title 標題 body 身體 head 頭 div 盒子(類似收納箱) fon
淺析html+css+javascript之間的關係與作用 三者間的關係
淺析html+css+javascript之間的關係與作用 三者間的關係 一個基本的網站包含很多個網頁，一個網頁由html, css和javascript組成。 html是主體，裝載各種dom元素；css用來裝飾dom元素；javascript控制dom元素。
HTML + CSS + JavaScript總結
HTML + CSS + JavaScript總結
html+CSS+javaScript遇到的問題
如何設定收藏本站 問題： window.external.AddFavorite(url,title); 不起作用！！！ 解決：https://blog.csdn.net/a296007576/article/details/26961563 這種方式只能在IE中成功，在Cho
HTML-CSS-JavaScript
CSS 層疊樣式表 Cascading Style Sheets 優勢: 內容與表現分離 網頁表現統一，容易修改 豐富的樣式，使得頁面佈局更加靈活 減少網頁程式碼量，增加網頁瀏覽速度，節省網路寬頻 運用獨立於頁面的CSS，有利於網頁被搜尋引擎搜尋 CSS內部樣式 標籤 style
前端三劍客HTML+CSS+JavaScript/jquery庫
前端三劍客HTML+CSS+JavaScript HTML(超文字標記語言)負責網頁的結構 CSS(層疊樣式表)負責網頁的樣式(比如顏色/字型/邊框等屬性設定) JavaScript(指令碼語言)負責網頁的行為(點選/輸入輸出/滾動等等) HTML部分: html文件結構:整個h
前端三劍客HTML+CSS+JavaScript
通配符選擇器 空格 靈活 方式 ear 中間 排序 mouse 腳本 前端三劍客HTML+CSS+JavaScript HTML(超文本標記語言)負責網頁的結構 CSS(層疊樣式表)負責網頁的樣式(比如顏色/字體/邊框等屬性設置) JavaScript(腳本語言)負責網頁