问题：关于坛友的一个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 ...
随机推荐
- BZOJ 1697: [Usaco2007 Feb]Cow Sorting牛排序
Description 农夫JOHN准备把他的 N(1 <= N <= 10,000)头牛排队以便于行动.因为脾气大的牛有可能会捣乱,JOHN想把牛按脾气的大小排序.每一头牛的脾气都是一个 ...
- 网站404,500错误页面的处理,及500异常写入errorLog日志
1.web.xml 配置 <error-page> <error-code>404</error-code> <location>/404.jsp< ...
- 1046-第K回文数
描述 回文数是这样一个正整数:它从左往右读和从右往左读是一样的.例如1,111,121,505都是回文数.将1到100,000,000内所有回文数按从小到达排序后,第k个回文数是多少呢? 输入 第一行 ...
- zoj 3380 Patchouli's Spell Cards 概率DP
题意:1-n个位置中,每个位置填一个数,问至少有l个数是相同的概率. 可以转化求最多有l-1个数是相同的. dp[i][j]表示前i个位置填充j个位置的方案数,并且要满足上面的条件. 则: dp[i] ...
- Eclipse 安装FindBugs插件
FindBugs 是由马里兰大学提供的一款开源 Java静态代码分析工具.FindBugs通过检查类文件或 JAR文件,将字节码与一组缺陷模式进行对比从而发现代码缺陷,完成静态代码分析.FindBug ...
- 阿里云 EDAS-HSF 用户指南
阿里云 EDAS-HSF 用户指南 针对 EDAS v2.3.0©Alibaba EDAS 项目组2015/8/19 1 前言本文档旨在描述阿里云 EDAS 产品中应用服务化模块的基本概念,以及如何使 ...
- nginx静态资源分离部署
修改nginx.conf文件,用于nginx处理静态资源. 主要配置如下(在server配置中加入location配置即可): server { listen 80; server_name 123. ...
- FileZilla Server 防火墙端口开启设置 windows 2008 win
入站规则 添加21端口, 程序FileZilla server.exe 出站规则 %SystemRoot%\System32\ftp.exe
- Python字符串编码问题
编码问题:Unicode把所有语言都统一到一套编码里,这样就不会再有乱码问题了. ASCII编码和Unicode编码的区别:ASCII编码是1个字节,而Unicode编码通常是2个字节.字母A用ASC ...
- Cygwin安装时，选择163的源后出错：Unable to get setup.ini from <http://mirrors.163.com/cygwin/>
[问题] 折腾: [记录]Cygwin下把make从v3.82换成v3.81 期间,选择了163的源,结果出错: Cygwin Setup Unable to get setup.ini from & ...