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手动切换效果相关推荐
- xbanner 动画特效设置android,Axure教程：如何实现爱彼迎App首页Banner的切换效果
原标题:Axure教程:如何实现爱彼迎App首页Banner的切换效果 本文分享一个用Axure实现爱彼迎App首页Banner切换效果的方法,供大家参考,欢迎一起交流. 作者最近闲暇时间试着将爱彼迎 ...
- 平缓的banner图片切换效果
平时所写的banner图片滚动效果要么是从左至右滚动,要么是从右至左滚动.这种效果利用的原理是banner图的父盒子绝对定位,每隔一段时间移动父盒子的位置,如left="": 而现 ...
- 网站Banner图切换效果（flash）
主要切换的功能由flash完成的 使用方法: <script type="text/javascript" src="js/swfppt.js">& ...
- php轮播代码生成器,最简单的Banner轮播左右切换效果代码及实现思路（附带源码）...
Banner轮播左右切换效果代码及实现思路,支持左右切换图片,支持点击选择对应的图片.实现思路通过定时器去自动选图和点击触发事件去选择图片.而图片的选择是通过计算对应图片的宽度和第几张图的距离进行动画 ...
- html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片 带进度条 图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
- axure 图片切换图片的交互_Axure教程：在动态面板里面设置图片自动/手动切换
原标题:Axure教程:在动态面板里面设置图片自动/手动切换 本文作者分享自己做过的一个PC端的高保真原型,来教大家,如何在动态面板里面设置图片的自动和手动的切换. 给大家分享自己做过的一个案例,来自 ...
- js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
- click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
- html背景图平移显示一次,js实现单张图片平移切换效果
由于个人不需要手动切换功能,因此把那部分的内容删了,主要是增加了无缝切换的效果. 原理也很简单,大概是一张图移动到左边以后,从底部移回最右,等待下一次循环. jquer实现图片切换 $(functio ...
最新文章
- 一步步部署SharePoint Workflow 2013
- 架构师之路 — 分布式系统 — Protocol Buffers 序列化协议
- NetCore入门篇：（二）Net Core项目创建
- DHCP数据抓包分析--wireshark
- 开发用户导航栏和权限信息接口
- (王道408考研操作系统)第四章文件管理-第一节8：文件保护
- Windows编程—获取Chrome浏览器的安装目录
- 超级实用的设计类网址导航--一流设计导航
- go设置后端启动_使用 Go Wails 框架来构建桌面应用（Go+Vue.js）
- seajs的模块化开发--实践笔记
- 点在多边形内 java_判断点在多边形内部的方法(Java版)
- excel自动调整列宽_高效使用Excel透视表，必须要注意的十个细节
- matlab画网格等高线,matlab绘制网格图
- mp4视频文件压缩率大概是多大？
- 解决ntp的错误：no server can be used,exiting
- 对《ToonSynth: Example-Based Synthesis of Hand-Colored Cartoon Animations》一文的理解(上)
- 大数据+物联网智能交通系统
- CNN+LSTM--一种运动想象分类新模型
- Conwaylife_HDLbits（康威生命游戏）
- springboot 入门以使用