问题：关于坛友的一个js轮播效果的实现

最新推荐文章于 2024-04-24 09:22:16 发布

会飞的Pikachu

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/u011043843/article/details/39103151

版权

93 篇文章 1 订阅

订阅专栏

需求：点击向前按钮进行向前翻页，向后按钮进行向后翻页，点击中间蓝色小圆圈可以来回自由切换

我的大概思路：先默认显示一个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);

效果：

关注