javascript五圖輪播切換實用版
更新時間：2012年08月17日 22:15:17 作者：
今天發(fā)表一個自己剛學(xué)js的練習(xí)，javascript五圖輪播切換---實用版，這個實力有個缺陷就是沒有過渡效果，這個本人也還在研究中，也希望高手可以指點一下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>測試</title>
<meta name="author" content="ximan">
<meta name="keywords" content="">
<meta name="description" content="">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="content">
<ul id="num">
<li style="background: #f00;">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<ul id="img_box">
<li>
<a href="#">
<img src="pailabi_shop1.jpg" alt="哈哈哈" />
</a>
</li>
<li>
<a href="#">
<img src="pailabi_shop2.jpg" alt="哈哈哈" />
</a>
</li>
<li>
<a href="#">
<img src="paila_shop3.jpg" alt="哈哈哈" />
</a>
</li>
<li>
<a href="#">
<img src="paila_shop4.jpg" alt="哈哈哈" />
</a>
</li>
<li>
<a href="#">
<img src="paila_shop5.jpg" alt="哈哈哈" />
</a>
</li>
</ul>
</div>
<script type="text/javascript">
</script>
<script type="text/javascript">
window.onload=function (){
var num = document.getElementById("num");
var num_li = document.getElementById("num").getElementsByTagName("li");
var img_box = document.getElementById("img_box");
var img_box_li = document.getElementById("img_box").getElementsByTagName("li");
var bliw = img_box_li[0].offsetWidth;
var n = 0;
img_box.style.left = 0
var autoscroll = setInterval(auto,3000);
for (var i = 0;i < num_li.length;i++){
num_li[i].onmouseover = function(){
clearInterval(autoscroll);
for (var i = 0;i < num_li.length;i++){
num_li[i].style.background = "";
if(num_li[i]==this){
this.style.background = "#f00";
slide(i);
}
}
}
num_li[i].onmouseout = function(){
for (var i = 0;i < num_li.length;i++){
if(num_li[i]==this){
n = i;
autoscroll = setInterval(auto,3000)
}
}
}
}
function slide(i){
img_box.style.left = -bliw*i + "px";
}
function auto(){
n++;
if(n == img_box_li.length){
n =0;
}
for (var i =0;i < num_li.length;i++){
num_li[i].style.background = "";
}
num_li[n].style.background = "#f00";
slide(n);
}
}
</script>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了ES2020 新特性(種草),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
quickjs調(diào)用lvgl函數(shù)的示例代碼
這篇文章主要介紹了quickjs調(diào)用lvgl函數(shù),實現(xiàn)本次使用quickjs的最主要目的，就是通過程序動態(tài)加載js，然后調(diào)用lvgl函數(shù)庫，實現(xiàn)渲染，需要的朋友可以參考下2023-11-11
javascript 數(shù)組去重復(fù)(在線去重工具)
很多情況下我們需要去掉重復(fù)的內(nèi)容，一般我們都是將很多內(nèi)容放到一個數(shù)組里面，然后再去重復(fù)，這里簡單為大家整理一下2016-12-12
原生Javascript實現(xiàn)繼承方式及其優(yōu)缺點詳解
JS作為面向?qū)ο蟮娜躅愋驼Z言,繼承也是其非常強大的特性之一,那么這篇文章主要給大家介紹了關(guān)于原生Javascript實現(xiàn)繼承方式及其優(yōu)缺點的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了JavaScript?模塊化詳解，塊的內(nèi)部數(shù)據(jù)與實現(xiàn)是私有的,?只是向外部暴露一些接口(方法)與外部其它模塊通信，下面一起進入文章來接更多詳細內(nèi)容2021-12-12
JavaScript實現(xiàn)數(shù)據(jù)脫敏的三種解決方式
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)數(shù)據(jù)脫敏的三種解決方式,包括電話、姓名、郵箱、身份證等,有需要的小伙伴可以參考一下2024-11-11
reduce()方法接收一個函數(shù)做為累加器,數(shù)組中的每一個值(從左到右)開始縮減,最終計算為一個值,下面這篇文章主要給大家介紹了關(guān)于JavaScript中reduce()詳解及使用方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了moment.js 時間日期處理詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
TypeScript環(huán)境搭建的實現(xiàn)步驟
本文主要介紹了TypeScript環(huán)境搭建的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)飄落星星特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08