博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
问题:关于坛友的一个js轮播效果的实现
阅读量:4287 次
发布时间:2019-05-27

本文共 3508 字,大约阅读时间需要 11 分钟。

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

我的大概思路:先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件,转到下一个时  显示影藏的div,再把原来的div给隐藏掉

lunbo.html代码:

1: 
2: 
3:     
4:         
5:         轮播Test
6:         
7:         
8:     
9:     
10:         
11:             
理财小知识
[全部]
12:             
13:                 
    14:                     
  • 什么是股票基金?
  • 15:                     
  • 股票基金的种类
  • 16:                     
  • 股票基金的优点
  • 17:                     
  • 股票基金的投资风险
  • 18:                     
  • 分级基金的投资技巧
  • 19:                 
    20:             
    21:             
    22:                 
      23:                     
    • 我的博客:www.ido321.com
    • 24:                     
    • 程序爱好者
    • 25:                     
    • QQ群:259280570
    • 26:                     
    • 如果你是coder
    • 27:                     
    • 欢迎你加入
    • 28:                 
      29:             
      30:             
      31:                 
      32:                     
      33:                     
      34:                     
      35:                     
      36:                 
      37:             
      38:         
      39:     
      40: 

       

      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);

      效果:

      来源:

      你可能感兴趣的文章
      双色球笔记4--爬取500彩票网站双色球开奖信息
      查看>>
      读写CSV文件
      查看>>
      RIDE屏蔽INFO级别的日志输出
      查看>>
      Ubuntu小技巧19--Kibana安装方法
      查看>>
      思科设备常用命令备注
      查看>>
      linux命令(Ubuntu)
      查看>>
      URL中的特殊字符
      查看>>
      搭建本地python环境
      查看>>
      Spring Boot的两种部署方式:jar包和war包
      查看>>
      Spring Boot日志配置:logback
      查看>>
      【Vuetify】安装使用(一)
      查看>>
      【Vuetify】基础(二)
      查看>>
      JMeter-Web request
      查看>>
      Hive SQL报错:SemanticException [Error 10004]: Invalid table alias or column reference
      查看>>
      Hive SQL踩坑记录-NULL判断、字符串拼接、执行报错:Expression not in GROUP BY key
      查看>>
      【Hive SQL】使用正则表达式做数据清洗
      查看>>
      学习笔记-集合框架
      查看>>
      学习笔记-散列表
      查看>>
      学习笔记-Map映射
      查看>>
      学习笔记-面向对象思想
      查看>>