當前位置：
首頁 >
banner手动切换效果
發布時間：2025/7/14
37
豆豆
生活随笔
收集整理的這篇文章主要介紹了
banner手动切换效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
自動切換的還不會做。至于兩邊放一個按鈕點擊就上一張/下一張的相對簡單，我用了兩種辦法來做這個效果。我的感覺就是學了js以后把簡單的事情搞得更復雜了。灑淚~~灑淚~~~
?
<!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(){//****************************************************************//****************************************************************/** 這是第一種方法。也是以前玩腳本的時候常用的手法。那時候還沒開始學js連語法都是網上查的* 只是看到有人做這個。我就根據他的做法。跟我自己的想法結合了一下* *///****************************************************************//****************************************************************//****************************************************************var n=1;var newBtn;var newbtn1;click(); //默認顯示第一張，所以n=1，并且調用一次函數；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();}//****************************************************************//****************************************************************/** 這是第二種方法。剛學到了函數。今天沒事干就回來改了一下* *///****************************************************************//****************************************************************//****************************************************************var input=document.getElementsByTagName('input');var banner1=document.getElementById('banner');//默認選中1input[0].style.background='red';for(var i=0;i<input.length;i++){input[i].onclick=function(){ //給每個input添加點擊事件this.style.background='red'; //此時的this指的是點擊的對象。點擊誰this就是誰/** 上面的效果是點擊了誰誰的背景顏色就會變為紅色* 下面要把上一個點擊對象的背景色設為空* * 難點：* 1.怎么找到上一個點擊的對象* 因為上一個對象是隨機的。所以我們把this以外的都改一遍* 2.怎么找到相應的對應的背景圖片名字呢* */for(var j=0;j<input.length;j++){if(input[j]!=input[this.id]){ //把未點擊的btn背景改為空。那么不走這里的j就是點擊的btn對應的下標值：jinput[j].style.background='';}else{//改變相應的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>?
轉載于:https://www.cnblogs.com/-news-Wjh/p/10156974.html
總結
以上是生活随笔為你收集整理的banner手动切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定义组件 点击空白处隐藏
- 下一篇： Matlab周期图法使用FFT实现