js實(shí)現(xiàn)百度聯(lián)盟中一款不錯(cuò)的圖片切換效果完整實(shí)例
本文實(shí)例講述了js實(shí)現(xiàn)百度聯(lián)盟中一款不錯(cuò)的圖片切換效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<title>js實(shí)現(xiàn)百度聯(lián)盟中的一個(gè)不錯(cuò)的圖片切換效果</title>
<body>
<script>
var links = new Array();
links[1] = "http://www.baidu.com/";
links[2] = "http://www.dbjr.com.cn/";
links[3] = "http://www.sohu.com/";
links[4] = "http://sc.jb51.net/";
var imgs = new Array();
for(var n = 1; n <= 5; n++) imgs[n] = new Image();
imgs[1].src = "images/m01.jpg";
imgs[2].src = "images/m02.jpg";
imgs[3].src = "images/m03.jpg";
imgs[4].src = "images/m04.jpg";
var tits = new Array();
tits[1] ="百度搜索";
tits[2] = "腳本之家";
tits[3] = "搜狐主頁";
tits[4] = "素材之家";
var imgwidth = 550;//圖片寬度
var imgheight = 134;//圖片寬度
var str = "<style type='text/css'>";
str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";
str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";
str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";
str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";
str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";
str += "</style>";
str += "<div style='position:relative'>";
str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";
//修改點(diǎn)1:循環(huán)添加內(nèi)層div內(nèi)容以增加個(gè)數(shù)
str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div></div>";
str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
str += "</div>";
document.write(str);
var oi = document.getElementById("dimg");
var pause = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var opacity = 100;
var speed = 15;
var delay = (document.all)? 400:700;
function SetAlpha(){
if(document.all){
if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
}else{
oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
}
}
function ImgSwitch(id, p){
if(p){
pause = true;
opacity = 100;
SetAlpha();
}
oi.src = imgs[id].src;
document.getElementById("dlink").href = links[id];
document.getElementById("it" + lastid).className = "off";
document.getElementById("it" + id).className = "on";
document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
curid = lastid = id;
}
function ScrollImg(){
if(pause && opacity >= 100) return;
if(sw == 0){
opacity += 2;
if(opacity > delay){ opacity = 100; sw = 1; }
}
if(sw == 1){
opacity -= 3;
if(opacity < 10){ opacity = 10; sw = 3; }
}
SetAlpha();
if(sw != 3) return;
sw = 0;
curid++;
//修改點(diǎn)2:這里的4也是個(gè)數(shù)
if(curid > 4) curid = 1;
ImgSwitch(curid, false);
}
function Pause(s){
pause = s;
}
function StartScroll(){
setInterval(ScrollImg, speed);
}
function CheckLoad(){
if (imgs[1].complete == true && imgs[2].complete == true) {
clearInterval(checkid);
setTimeout(StartScroll, 2000);
}
}
var checkid = setInterval(CheckLoad, 10);
</script>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- JavaScript 圖片切換展示效果alibaba拓展版
- javascript實(shí)現(xiàn)圖片切換的幻燈片效果源代碼
- 基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理
- jquery簡單圖片切換顯示效果實(shí)現(xiàn)方法
- js仿土豆網(wǎng)帶縮略圖的焦點(diǎn)圖片切換效果實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法
- jquery圖片切換插件
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動端幻燈片圖片切換特效
- jquery圖片切換實(shí)例分析
- jquery簡單實(shí)現(xiàn)圖片切換效果的方法
- js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享
- js+div實(shí)現(xiàn)文字滾動和圖片切換效果代碼
- jquery的幻燈片圖片切換效果代碼分享
- js帶前后翻頁的圖片切換效果代碼分享
相關(guān)文章
JavaScript實(shí)現(xiàn)簡單圖片滾動附源碼下載
JavaScript實(shí)現(xiàn)簡單圖片滾動,9張圖告訴你,C羅欲哭無淚,另附源碼下載,方便學(xué)習(xí)2014-06-06javascript實(shí)現(xiàn)移動的模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動的模態(tài)框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JS實(shí)現(xiàn)的集合去重,交集,并集,差集功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的集合去重,交集,并集,差集功能,結(jié)合實(shí)例形式分析了javascript基于數(shù)組實(shí)現(xiàn)的集合去重、交集、并集、差集等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03JavaScript數(shù)據(jù)綁定實(shí)現(xiàn)一個(gè)簡單的 MVVM 庫
MVVM 是 Web 前端一種非常流行的開發(fā)模式,利用 MVVM 可以使我們的代碼更專注于處理業(yè)務(wù)邏輯而不是去關(guān)心DOM 操作。接下來通過本文給大家介紹JavaScript使用數(shù)據(jù)綁定實(shí)現(xiàn)一個(gè)簡單的 MVVM 庫,感興趣的朋友一起學(xué)習(xí)吧2016-04-04前端JavaScript實(shí)現(xiàn)本地模糊搜索功能的方法實(shí)例
對于模糊查詢,一般都是傳關(guān)鍵字給后端,由后端來做。但是有時(shí)候一些輕量級的列表前端來做可以減少ajax請求,在一定程度上提高用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于前端JavaScript如何實(shí)現(xiàn)本地模糊搜索功能的相關(guān)資料,需要的朋友可以參考下2021-07-07微信小程序 云開發(fā)模糊查詢實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序 云開發(fā)模糊查詢實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09js彈出框、對話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄猨s彈出框、對話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05基于jquery的高性能td和input切換并可修改內(nèi)容實(shí)現(xiàn)代碼
在實(shí)際工作中,我們會碰到這樣一個(gè)情況。在頁面中顯示著100個(gè)數(shù)據(jù),同時(shí)用戶還希望他可以更改其中的數(shù)據(jù),普通的方式可能如下2011-01-01