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

怼烎@ 2022-08-12 00:19 127阅读 0赞

![SouthEast][]

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

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

效果：

![SouthEast 1][]![SouthEast 2][]

来源：[http://www.ido321.com/522.html][http_www.ido321.com_522.html]

[SouthEast]: /images/20220810/544bf0b7fd5346339327bcef90ed9555.png
[SouthEast 1]: https://img-blog.csdn.net/20140906191719849?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: /images/20220810/83eafd752f5d4924b247163d37523b7d.png
[http_www.ido321.com_522.html]: http://www.ido321.com/522.html