问题：关于坛友的一个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 ...
随机推荐
- C#正则表达式Regex类
C#正则表达式Regex类的使用 C#中为正则表达式的使用提供了非常强大的功能,这就是Regex类.这个包包含于System.Text.RegularExpressions命名空间下面,而这个命名空间 ...
- memcached 在window下的安装与使用
memcached搭建缓存系统 一.概念 Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能. 二 ...
- JavaBean 和 Map 之间互相转换
JavaBean 和 Map 之间互相转换 import java.beans.BeanInfo; import java.beans.IntrospectionException; import j ...
- Linux命令ln的使用
ln是linux中一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的文件时, ...
- <Learning How to Learn>Week One: Focused versus Diffuse Thinking
1-1 Introduction to the focused and diffuse modes (4:40) 两种思考的模式:focused mode以及diffuse mode focused ...
- Nagios ： Verifying Your Configuration
Every time you modify your configuration files, you should run a sanity check on them. It is importa ...
- DLL搜索路径和DLL劫持
DLL搜索路径和DLL劫持 环境:XP SP3 VS2005 作者:magictong 为什么要把DLL搜索路径(DLL ORDER)和DLL劫持(DLL Hajack)拿到一起讲呢?呵呵,其实没啥深 ...
- samba配置smb.conf
[share] path = /home/phinecos/share available = yes browsealbe = yes public = ye ...
- ANDROID_MARS学习笔记_S01_010日期时间控件
1.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns: ...
- 核心思想：早胜过一切，张小龙的Foxmail居然可以卖1200万
现在谁都可以做一个类似的软件,但是市场已经成熟了,满大街都是,也就没有人会来收购你的软件了.