问题：关于坛友的一个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 ...
随机推荐
- mysql建表且某字段内不允许出现重复值
CREATE TABLE `admin` ( `id` ) NOT NULL AUTO_INCREMENT , `username` varchar() NOT NULL , `password` v ...
- 对象工具类 - ObjectUtils.java
对象工具类,提供对象克隆.获取对象属性.类型判断.Map转换对象.对象转Map.设置对象属性等. 源码如下:(点击下载 - ObjectUtils.java .JsonUtils.java .gso ...
- Extjs4 treePanel异步加载菜单（后台从数据库读取）
运行环境:springMVC+mybatis 一.建表 说明:0表示此节点为非叶子节点,即此节点还包括了子节点:1表示此节点为叶子节点,即此节点没有子节点.:关于图标iconCls是从Extjs的文件 ...
- hdu 4712
看了大牛的解法 第一次知道可以产生随机数解题 在计算hamming距离时用了位运算 很简便 /************************************************* ...
- JAVA与ABA问题
在<JAVA并发编程实战>的第15.4.4节中看到了一些关于ABA问题的描述.有一篇文章摘录了书里的内容. 书中有一段内容为: 如果在算法中采用自己的方式来管理节点对象的内存,那么可能出现 ...
- IE Web 开发支持将迁移到 StackOverflow
http://stackoverflow.com/questions/tagged/internet-explorer
- 如何定制Sink扩展.Net Remoting功能
http://www.cnblogs.com/rickie/archive/2004/10/21/54891.html
- DNS安全浅议、域名A记录(ANAME)，MX记录，CNAME记录（转）
http://www.cnblogs.com/LittleHann/p/3828927.html 相关学习资料 http://baike.baidu.com/link?url=77B3BYIuVsB3 ...
- Scrapy在win7 32位的安装及依赖包
Scrapy,一个网络爬虫的框架,首先第一步肯定是安装. 参考网上的文章. 安装过程中需要用到pip工具,请自行安装. 1.安装python 这个是必须的,既然都用到scrapy了,肯定已经安装了py ...
- 中国海洋大学第四届朗讯杯高级组 Cash Cow（模拟）
题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2721 题意: 给定n个左标,跟那n个坐标 ...