问题：关于坛友的一个js轮播效果的实现
需求：点击向前按钮进行向前翻页，向后按钮进行向后翻页，点击中间蓝色小圆圈可以来回自由切换
我的大概思路：先默认显示一个div 然后在原位置在隐藏一个div 给按钮添加click事件，转到下一个时 显示影藏的div,再把原来的div给隐藏掉
lunbo.html代码：
1: <!DOCTYPE HTML>
2: <html>
3: <head>
4: <meta http-equiv="content-type" content="text/html;charset=utf-8">
5: <title>轮播Test</title>
6: <link rel="stylesheet" type="text/css" href="lunbo.css">
7: <script type="text/javascript" src="lunbo.js"></script>
8: </head>
9: <body>
10: <div id="mydiv">
11: <div class="head">理财小知识<span>[全部]</span></div>
12: <div id="prev">
13: <ul>
14: <li><a href="http://www.ido321.com" target="_blank">什么是股票基金？</a></li>
15: <li><a href="http://www.ido321.com" target="_blank">股票基金的种类</a></li>
16: <li><a href="http://www.ido321.com" target="_blank">股票基金的优点</a></li>
17: <li><a href="http://www.ido321.com" target="_blank">股票基金的投资风险</a></li>
18: <li><a href="http://www.ido321.com" target="_blank">分级基金的投资技巧</a></li>
19: </ul>
20: </div>
21: <div id="next">
22: <ul>
23: <li><a href="http://www.ido321.com" target="_blank">我的博客:www.ido321.com</a></li>
24: <li><a href="http://www.ido321.com" target="_blank">程序爱好者</a></li>
25: <li><a href="http://www.ido321.com" target="_blank">QQ群：259280570</a></li>
26: <li><a href="http://www.ido321.com" target="_blank">如果你是coder</a></li>
27: <li><a href="http://www.ido321.com" target="_blank">欢迎你加入</a></li>
28: </ul>
29: </div>
30: <div id="control">
31: <form action="" method="">
32: <input type="button" id="prevButton">
33: <input type="radio" name="select" id="first" checked="checked">
34: <input type="radio" name="select" id="second">
35: <input type="button" id="nextButton">
36: </form>
37: </div>
38: </div>
39: </body>
40: </html>
lunbo.css样式
1: *
2: {
3: font-family: "Microsoft YaHei","sans-serif";
4: }
5: .head
6: {
7: margin-left: 38px;
8: margin-bottom: -15px;
9: }
10: span
11: {
12: color: #0DAAEA;
13: }
14: #mydiv
15: {
16: height:400px;
17: width:500px;
18: margin:0 auto;
19: }
20: #prev
21: {
22: display: block;
23: }
24: #next
25: {
26: display: none;
27: }
28: ul
29: {
30: list-style:none;
31: }
32: li a:link
33: {
34: text-decoration: none;
35: }
36: li a:hover
37: {
38: color: red;
39: }
40: form
41: {
42: margin-top: -10px;
43: margin-left: 300px;
44: }
45: form input
46: {
47: margin-left:-5px;
48: }
49: #prevButton
50: {
51: background:url(previmg.jpg)
52: }
53: #nextButton
54: {
55: background:url(nextimg.jpg)
56: }
lunbo.js
1: /**
2: *文档加载完后，运行名为func的函数
3: *@param func 需要运行的函数的名
4: *说明：window.onload事件处理函数的值存入变量oldonload;如果函数上没有绑定任何函数，则正常添
5: *加；若已经绑定有函数，则添加到指令末尾。
6: */
7: function addLoadEvent(func)
8: {
9: var oldonload = window.onload; //得到上一个onload事件的函数
10: if(typeof window.onload != 'function')
11: {
12: window.onload = func;
13: }
14: else
15: {
16: window.onload = function()
17: {
18: oldonload(); //调用之前覆盖的onload事件的函数
19: func(); //调用当前事件函数
20: }
21: }
22: }
23:
24: //添加按钮事件
25: function dealWith()
26: {
27: var prev = document.getElementById("prev");
28: var next = document.getElementById("next");
29: var prevButton = document.getElementById("prevButton");
30: var nextButton = document.getElementById("nextButton");
31: var first = document.getElementById("first");
32: var second = document.getElementById("second");
33:
34: //单击按钮
35: prevButton.onclick = function()
36: {
37: prev.style.display = "block";
38: next.style.display = "none";
39: first.checked = "checked";
40: }
41: nextButton.onclick = function()
42: {
43: prev.style.display = "none";
44: next.style.display = "block";
45: second.checked = "checked";
46: }
47:
48: //单击单选按钮
49: first.onclick = function()
50: {
51: prev.style.display = "block";
52: next.style.display = "none";
53: this.checked = "checked";
54: }
55: second.onclick = function()
56: {
57: prev.style.display = "none";
58: next.style.display = "block";
59: this.checked = "checked";
60: }
61: }
62: addLoadEvent(dealWith);
效果：
来源：http://www.ido321.com/522.html
问题：关于坛友的一个js轮播效果的实现的更多相关文章
- js 轮播效果
<!--图片轮播 Start--> <div class="pics-ul"> ...
- 纯js轮播效果（减速效果）待改进
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- js的轮播效果
图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...
- JS实现焦点图轮播效果
大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...
随机推荐
- CROSS APPLY和 OUTER APPLY 区别
转 http://www.cnblogs.com/end/archive/2011/02/17/1957011.html FROM employees AS e join employee ...
- 1045: [HAOI2008] 糖果传递 - BZOJ
Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1.Input 小朋友个数n 下面n行 aiOutput 求使所有人获得均等糖果的 ...
- C#查找子串在原串中出现次数
提供的是一种思路,和具体语言无关. string test = "good good study day day up"; string r = test.Replace(&quo ...
- javascript closure
http://www.jibbering.com/faq/notes/closures/ http://hi.baidu.com/bluedream_119/item/938dcd082b1e1880 ...
- c++ ANSI、UNICODE、UTF8互转
static std::wstring MBytesToWString(const char* lpcszString); static std::string WStringToMBy ...
- 使用Data Annotations进行手动数据验证
Data Annotations是在Asp.Net中用于表单验证的 它通过Attribute直接标记字段的有效性,简单且直观.在非Asp.Net程序中(如控制台程序),我们也可以使用Data Anno ...
- Eclipse SVN插件冲突导致不能使用解决办法
最近,由于安装插件导致eclipse的SVN插件不能使用,出现的问题实在很烦恼,通过试验发现当新安装的插件安装完毕后,只需要把eclipse-jee-kepler-SR2-win32-x86_64/e ...
- Android 设置EditText光标位置
Android中有很多可编辑的弹出框,其中有些是让我们来修改其中的字符,这时光标位置定位在哪里呢? 刚刚解了一个bug是关于这个光标的位置的,似乎Android原生中这种情况是把光标定位到字符串的最前 ...
- semantic versioning语义化版本号
语义化版本号 是由github创始人 Tom Preston-Werner 发起的一个关于软件版本号的命名规范,关于这个规范详细的说明可以在 官网 查看,也可访问其 GitHub项目页面 ,官网文档: ...
- js2word/html2word的简单实现
js2word/html2word的简单实现 以C#描述如下: StringBuilder sb = new StringBuilder(); sb.Ap ...