javascript五圖輪播切換實(shí)用版
更新時(shí)間：2012年08月17日 22:15:17 作者：
今天發(fā)表一個(gè)自己剛學(xué)js的練習(xí)，javascript五圖輪播切換---實(shí)用版，這個(gè)實(shí)力有個(gè)缺陷就是沒(méi)有過(guò)渡效果，這個(gè)本人也還在研究中，也希望高手可以指點(diǎn)一下
復(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>測(cè)試</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>
您可能感興趣的文章:
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- js圖片輪播手動(dòng)切換效果
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
- 原生js實(shí)現(xiàn)圖片層疊輪播切換效果
- javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效
- Bootstrap 最常用的JS插件系列總結(jié)（圖片輪播、標(biāo)簽切換等）
- JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果
- 原生JS實(shí)現(xiàn)圖片輪播切換效果
- js實(shí)現(xiàn)淡入淡出輪播切換功能
- js實(shí)現(xiàn)圖片輪播切換效果
相關(guān)文章
ES6中的rest參數(shù)與擴(kuò)展運(yùn)算符詳解
rest參數(shù)和擴(kuò)展運(yùn)算符都是ES6新增的特性。下面這篇文章主要給大家介紹了關(guān)于ES6中rest參數(shù)與擴(kuò)展運(yùn)算符的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解
這篇文章主要介紹了JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JavaScript forEach的幾種用法小結(jié)
forEach()是JavaScript中一個(gè)常用的方法,用于遍歷數(shù)組或類數(shù)組對(duì)象中的每個(gè)元素,本文就來(lái)介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
用js獲取本地電腦信息（但是只能在IE瀏覽器下才行，其他瀏覽器其獲取不到的）2013-01-01
Bootstrap每天必學(xué)之按鈕組工具欄，本文講解的就是大家最為常用的按鈕組工具欄，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了如何利用js在兩個(gè)html窗口間通信，如果讀者們有類似的需求，可以參考下2021-04-04
這篇文章主要為大家介紹了JS前端圖片最優(yōu)化壓縮方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了JavaScript BOM構(gòu)成和常用事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
深入淺析javascript立即執(zhí)行函數(shù)
在Javascript中，任何function在執(zhí)行的時(shí)候都會(huì)創(chuàng)建一個(gè)執(zhí)行上下文，因?yàn)闉閒unction聲明的變量和function有可能只在該function內(nèi)部，這個(gè)上下文，在調(diào)用function的時(shí)候，提供了一種簡(jiǎn)單的方式來(lái)創(chuàng)建自由變量或私有子function。2015-10-10
網(wǎng)頁(yè)加載速度優(yōu)化技巧的方案詳解
這篇文章主要為大家介紹了網(wǎng)頁(yè)加載速度優(yōu)化技巧的方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-05-05