• 简易轮播图和打地鼠


    目录

    轮播图

    需求

    思路

    结构

    代码实现

    实现效果

    总结

    打地鼠

    需求

    思路分析

    结构

    代码实现

    实现效果

    总结


    轮播图

    需求

    仍然是没有活的实习生......所以写个最简单的轮播图玩玩。具体要求就是,使用display:none隐藏图片,实现图片的轮播。

    思路

    结构

    具体结构就是,父容器中盛放若干图片,这些图片横向或者纵向排列都行(因为这里使用的是display实现,如果是使用定位实现就需要注意横向或者纵向了)。每一时刻只有一张图片display为block,其余都是none,这样就能保证只有一张图片显示。图片的宽高跟父容器一样,并且设置父容器overflow:hidden(同样,因为是display实现,所以也不需要一定设置这个,但是为了加载时效果正常,还是设置上比较好)。

    这就是html和css的基本结构。然后轮播效果需要借助JavaScript实现,一定要用到定时器。为了在同一时刻只有一张图片显示,我们需要一个变量index记录当前显示的是第几张图片。封装一个方法,只显示第index张图片,并且使index递增,然后使用定时器,每隔一段时间调用这个方法即可。

    基本轮播图的功能就这样实现。

    还可以在图片两侧加上两个按钮,作为显示上一张和下一张的按钮。点击上一张按钮时,先清除定时器,以免引起混乱,然后修改index并让第index张图片显示,再重新开启定时器。下一张按钮的逻辑类似。

    代码实现

    html部分

    1. <div class="container">
    2. <img src="pictures/1.jpg" class="picture">
    3. <img src="pictures/2.jpg" class="picture">
    4. <img src="pictures/3.jpg" class="picture">
    5. <img src="pictures/4.jpg" class="picture">
    6. <img src="pictures/5.jpg" class="picture">
    7. <img src="pictures/6.jpg" class="picture">
    8. <div class="btn last">div>
    9. <div class="btn next">div>
    10. div>

    PS:图片都是盖玥希照片,盖盖太好看了呜呜呜呜......

    css部分

    1. .container {
    2. display: flex;
    3. width: 400px;
    4. height: 400px;
    5. overflow-x: hidden;
    6. margin: 200px auto;
    7. /* 相对定位 */
    8. position: relative;
    9. }
    10. .container .picture {
    11. width: 400px;
    12. height: 400px;
    13. }
    14. .container .btn {
    15. position: absolute;
    16. height: 30px;
    17. width: 30px;
    18. line-height: 30px;
    19. text-align: center;
    20. background-color: aliceblue;
    21. border-radius: 50%;
    22. cursor: pointer;
    23. }
    24. .container .last {
    25. left: 20px;
    26. top: 50%;
    27. transform: translateY(-50%);
    28. }
    29. .container .next {
    30. right: 20px;
    31. top: 50%;
    32. transform: translateY(-50%);
    33. }

    JavaScript部分

    1. // 当前显示第几张图片
    2. let index = 0;
    3. // 获取所有图片
    4. let img_list = document.getElementsByClassName('picture')
    5. // 显示图片
    6. function showImg() {
    7. // 这时候index递增,这样能保证index确实是正在显示的图片
    8. index = (index + 1) % 6
    9. // 除了第index张外全部display:none
    10. for (let i = 0; i < img_list.length; i++) {
    11. img_list[i].style.display = "none"
    12. }
    13. img_list[index].style.display = "block"
    14. }
    15. // 开启定时器
    16. let timer = setInterval(showImg, 1500);
    17. // 点击上一张按钮
    18. function last() {
    19. clearInterval(timer)
    20. if (index === 0) {
    21. index = 5
    22. } else {
    23. index--
    24. }
    25. // 除了第index张外全部display:none
    26. for (let i = 0; i < img_list.length; i++) {
    27. img_list[i].style.display = "none"
    28. }
    29. img_list[index].style.display = "block"
    30. timer = setInterval(showImg, 1500);
    31. }
    32. // 点击下一张图片
    33. function next() {
    34. clearInterval(timer)
    35. index = (index + 1) % 6
    36. // 除了第index张外全部display:none
    37. for (let i = 0; i < img_list.length; i++) {
    38. img_list[i].style.display = "none"
    39. }
    40. img_list[index].style.display = "block"
    41. timer = setInterval(showImg, 1500);
    42. }
    43. let btns = document.getElementsByClassName('btn')
    44. btns[0].onclick = last;
    45. btns[1].onclick = next;

    实现效果

    轮播图演示

    总结

    本文只是简单用display属性实现了轮播图,效果上并没有定位好一些,以后有时间再做吧。

    打地鼠

    需求

    继续无事......写个打地鼠玩玩。

    思路分析

    结构

    结构其实非常简单。我设计一个九宫格,每个九宫格内随机出现地鼠图片。具体实现方法就是,父元素div中包含9个div,并给父元素开启BFC,便于子元素浮动。子元素全部向左浮动,并且设置好border、width、height,每行三个,形成九宫格。每个子元素都是item类,设置一些统一的样式。有打地鼠的子元素,设置为mouse类。

    说完了HTML和css,就该设计JavaScript。

    逻辑就是,开启定时器,每次产生与上一次不同的0-8的随机数position,然后设置第position个子元素为mouse、item类,其余都仅仅是item类。然后,给每个item都绑定点击事件回调函数,判断event的目标元素,即event.target,它的class中有没有mouse。如果有mouse,则击中得分。

    思路不是很难,行云流水般就可以写出来了。

    代码实现

    html部分

    1. <div class="count_wrapper">0分div>
    2. <div class="container">
    3. <div class="item">div>
    4. <div class="item">div>
    5. <div class="item">div>
    6. <div class="item">div>
    7. <div class="item">div>
    8. <div class="item">div>
    9. <div class="item">div>
    10. <div class="item">div>
    11. <div class="item">div>
    12. div>

    在container中放置九个子元素。

    css部分

    1. .count_wrapper {
    2. width: 100px;
    3. height: 100px;
    4. margin: 0 auto;
    5. line-height: 100px;
    6. text-align: center;
    7. font-size: 30px;
    8. }
    9. .container {
    10. width: 600px;
    11. height: 600px;
    12. margin: 0 auto;
    13. background-color: antiquewhite;
    14. /* 开启BFC */
    15. overflow: hidden;
    16. }
    17. .container .item {
    18. float: left;
    19. border: 1px solid rgb(211, 209, 209);
    20. width: 198px;
    21. height: 198px;
    22. }
    23. /* 显示地鼠的item */
    24. .mouse {
    25. cursor: pointer;
    26. background-image: url('./pictures/mouse.jpg');
    27. background-size: cover;
    28. background-position: center;
    29. }

    JavaScript部分

    1. // 随机显示地鼠的地方
    2. let position = 0
    3. // 所有位置
    4. let mouses = document.getElementsByClassName('item')
    5. // 当前得分
    6. let count = 0;
    7. // 得分元素
    8. let count_wrapper = document.getElementsByClassName('count_wrapper')[0]
    9. // 显示地鼠
    10. function showMouse() {
    11. for (let i = 0; i < mouses.length; i++) {
    12. mouses[i].className = 'item'
    13. }
    14. mouses[position].className += " mouse"
    15. }
    16. // 随机显示地鼠
    17. function randomShowMouse() {
    18. let new_position = Math.floor(Math.random() * 9)
    19. // 找到新的随机点
    20. while (new_position == position) {
    21. new_position = Math.floor(Math.random() * 9)
    22. }
    23. position = new_position
    24. // 显示地鼠
    25. showMouse()
    26. }
    27. setInterval(randomShowMouse, 600);
    28. let items = document.getElementsByClassName('item')
    29. for (let i in items) {
    30. items[i].onclick = function (e) {
    31. if (e.target.className.indexOf('mouse') > -1) {
    32. count++
    33. count_wrapper.innerText = count + '分'
    34. }
    35. }
    36. }

    实现效果

    打地鼠演示

    总结

    打地鼠是个简单有趣的小游戏,也很容易实现。

  • 相关阅读:
    Bytebase加入阿里云PolarDB开源数据库社区
    基于复杂环境下的雷达目标检测技术(Matlab代码实现)
    HBase总结
    【网页前端】CSS样式表进阶之伪元素
    惯性导航定位技术
    Java面试中的常问的多线程问题
    Tomcat 限制对 Web 应用程序的访问
    锂电池欧姆内阻和极化内阻
    Java Math.tan()/Math.tanh()具有什么功能呢?
    【逻辑与计算机设计】数码系统和数字系统 | Digital systems and number systems
  • 原文地址:https://blog.csdn.net/weixin_45792464/article/details/125870914