首页 > 代码库 > 问题：关于坛友的一个js轮播效果的实现

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

2024-07-21 10:55:35   219人阅读

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

我的大概思路：先默认显示一个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轮播效果的实现


联系
我们