问题：关于坛友的一个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 ...
随机推荐
- GitHub 有哪些优秀的项目
GitHub 有哪些优秀的项目 http://www.zhihu.com/question/20584141
- SpringMVC注解@RequestParam（转）
鸣谢:http://shawnccx.iteye.com/blog/730239 -------------------------------------------------- 在SpringM ...
- JavaScript中创建字典对象（dictionary）实例
这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...
- Discuz云平台站点信息同步失败，An unknown error occurred. May be DNS Error.
站点信息同步失败 An unknown error occurred. May be DNS Error. (ERRCODE:1) 经过Discuz教程网(http://www.1314study.c ...
- PHP 7 值得期待的新特性（下）
这是我们期待已久的 PHP 7 系列文章的第二篇.点此阅读 第一篇本文系 OneAPM 工程师编译整理. 也许你已经知道,重头戏 PHP 7 的发布将在今年到来!现在,让我们来了解一下,新版本有哪些新 ...
- C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法
学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结,为了自己复习,也希望对后来者能有所帮助,如果有差错的地方还请各位多多指教(本文所有程序均通过VC 6.0运行) 1.cin 2.cin.get ...
- POJ 2318 TOYS && POJ 2398 Toy Storage（几何）
2318 TOYS 2398 Toy Storage 题意 : 给你n块板的坐标,m个玩具的具体坐标,2318中板是有序的,而2398无序需要自己排序,2318要求输出的是每个区间内的玩具数,而231 ...
- Android开发之自定义组合控件
自定义组合控件的步骤1.自定义一个View,继承ViewGroup,比如RelativeLayout2.编写组合控件的布局文件,在自定义的view中加载(使用View.inflate())3.自定义属 ...
- git stash
https://git-scm.com/docs/git-stash NAME git-stash - Stash the changes in a dirty working directo ...
- vbox android x86 分辨率
D:\Program Files\Oracle\VirtualBox>VBoxManage setextradata "android" "CustomVideoM ...