banner手动切换效果
生活随笔
收集整理的這篇文章主要介紹了
banner手动切换效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
自動(dòng)切換的還不會(huì)做。至于兩邊放一個(gè)按鈕點(diǎn)擊就上一張/下一張的相對(duì)簡(jiǎn)單，我用了兩種辦法來做這個(gè)效果。我的感覺就是學(xué)了js以后把簡(jiǎn)單的事情搞得更復(fù)雜了。灑淚~~灑淚~~~
?
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><style type="text/css">* {margin: 0;padding: 0;}/*banner star*/#banner {height: 620px;background: url(banner01.jpg) no-repeat top center;position: relative;}#banner div{position: absolute;bottom: 20px;left: 50%;margin-left: -74px;}#banner input {height: 15px;width: 15px;border-radius: 50%;border: 1px solid white;background: rgba(255, 255, 255, 0);cursor: pointer;}</style><script>window.onload=function(){//****************************************************************//****************************************************************/** 這是第一種方法。也是以前玩腳本的時(shí)候常用的手法。那時(shí)候還沒開始學(xué)js連語法都是網(wǎng)上查的* 只是看到有人做這個(gè)。我就根據(jù)他的做法。跟我自己的想法結(jié)合了一下* *///****************************************************************//****************************************************************//****************************************************************var n=1;var newBtn;var newbtn1;click(); //默認(rèn)顯示第一張，所以n=1，并且調(diào)用一次函數(shù)；function click(){var banner=document.getElementById('banner');for (var i=1;i<=4;i++ ){newBtn=('btn'+i);//獲取id的值newbtn1=document.getElementById(newBtn);newbtn1.style.background='rgba(255,255,255,0)';//全部透明度改為全透明if (i==n){newbtn1.style.background='rgba(255,255,255,1)';banner.style.background='url(banner0'+i+'.jpg) no-repeat top center';};};};btn1.onclick=function(){n=1;click();}btn2.onclick=function(){n=2;click();}btn3.onclick=function(){n=3;click();}btn4.onclick=function(){n=4;click();}//****************************************************************//****************************************************************/** 這是第二種方法。剛學(xué)到了函數(shù)。今天沒事干就回來改了一下* *///****************************************************************//****************************************************************//****************************************************************var input=document.getElementsByTagName('input');var banner1=document.getElementById('banner');//默認(rèn)選中1input[0].style.background='red';for(var i=0;i<input.length;i++){input[i].onclick=function(){ //給每個(gè)input添加點(diǎn)擊事件this.style.background='red'; //此時(shí)的this指的是點(diǎn)擊的對(duì)象。點(diǎn)擊誰this就是誰/** 上面的效果是點(diǎn)擊了誰誰的背景顏色就會(huì)變?yōu)榧t色* 下面要把上一個(gè)點(diǎn)擊對(duì)象的背景色設(shè)為空* * 難點(diǎn)：* 1.怎么找到上一個(gè)點(diǎn)擊的對(duì)象* 因?yàn)樯弦粋€(gè)對(duì)象是隨機(jī)的。所以我們把this以外的都改一遍* 2.怎么找到相應(yīng)的對(duì)應(yīng)的背景圖片名字呢* */for(var j=0;j<input.length;j++){if(input[j]!=input[this.id]){ //把未點(diǎn)擊的btn背景改為空。那么不走這里的j就是點(diǎn)擊的btn對(duì)應(yīng)的下標(biāo)值：jinput[j].style.background='';}else{//改變相應(yīng)的banner圖片banner1.style.background='url(banner0'+(j+1)+'.jpg) no-repeat top center';};};};};};</script><title>Document</title></head><body><!--banner--><div id="banner"><div><input type="button" id="btn1" /><input type="button" id="btn2" /><input type="button" id="btn3" /><input type="button" id="btn4" /></div></div></body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/-news-Wjh/p/10156974.html
總結(jié)
以上是生活随笔為你收集整理的banner手动切换效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定义组件 点击空白处隐藏
- 下一篇： Matlab周期图法使用FFT实现