banner手动切换效果
生活随笔
收集整理的这篇文章主要介绍了
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实现