JS实现轮播图

原创 于 2018-09-27 22:30:53 发布 · 225 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

主要思路：先将需要轮播的4张图使用绝对定位让其重叠在banner这个盒子中，然后遍历所有的图片将其隐藏，再获取当前图片的index值，根据当前的index值设置当前的图片显示出来。设置间歇定时器setInterval每隔1秒使得index的值加1，如果大于图片个数则index=0，每隔1秒调用changeImg()函数，改变图片的显示。

li项的实现原理一样，总的来说就是围绕index的值来进行设置图片的显示与隐藏，或是Li项的样式，从而达到轮播图的效果。

以下为代码部分：

HTML代码：


 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>JS实现轮播图</title>

  6. <link rel="stylesheet" type="text/css" href="css/style.css">

  7. </head>

  8. <body>

  9. <div class="main" id="main">

  10. <div class="nav" id="nav">

  11. <ul>

  12. <li class="changeColor">首页</li>

  13. <li>点击看看</li>

  14. <li>会自动的</li>

  15. <li>我的网站</li>

  16. </ul>

  17. </div>

  18. <div class="banner" id="banner">

  19. <a href="#">

  20. <div class="banner-slide slide1"></div>

  21. </a>

  22. <a href="#">

  23. <div class="banner-slide slide2"></div>

  24. </a>

  25. <a href="#">

  26. <div class="banner-slide slide3"></div>

  27. </a>

  28. <a href="#">

  29. <div class="banner-slide slide4"></div>

  30. </a>

  31. </div>

  32. </div>

  33. <script type="text/javascript" src="js/script.js"></script>

  34. </body>

  35. </html>

CSS代码：


 

  1. * {

  2. padding: 0;

  3. margin: 0;

  4. }

  5.  

  6. .main {

  7. width: 1200px;

  8. height: auto;

  9. margin: 50px auto;

  10. overflow: hidden;

  11. }

  12.  

  13. .nav {

  14. width: 1200px;

  15. height: 80px;

  16. }

  17.  

  18. ul {list-style-type: none;}

  19.  

  20. li {

  21. float: left;

  22. width: 25%;

  23. height: 80px;

  24. text-align: center;

  25. line-height: 80px;

  26. cursor: pointer;

  27. }

  28.  

  29. .changeColor {

  30. background: #ffcc00;

  31. border-radius: 5px;

  32. }

  33.  

  34. .banner {

  35. width: 1200px;

  36. height: 460px;

  37. overflow: hidden;

  38. }

  39.  

  40. .banner-slide {

  41. width: 1200px;

  42. height: 460px;

  43. background-repeat: no-repeat;

  44. position: absolute;

  45. }

  46.  

  47. .slide1 {

  48. background-image: url("../img/1.jpg");

  49. }

  50. .slide2 {

  51. background-image: url("../img/2.jpg");

  52. }

  53. .slide3 {

  54. background-image: url("../img/3.jpg");

  55. }

  56. .slide4 {

  57. background-image: url("../img/4.jpg");

  58. }

JS代码：


 

  1. var timer = null,

  2. index = 0,

  3. pics = document.getElementsByClassName("banner-slide"),

  4. lis = document.getElementsByTagName("li");

  5.  
  6.  

  7. //封装一个代替getElementById()的方法

  8. function byId(id){

  9. return typeof(id) === "string"?document.getElementById(id):id;

  10. }

  11.  

  12. function slideImg() {

  13. var main = byId("main");

  14. var banner = byId("banner");

  15. main.onmouseover = function(){

  16. stopAutoPlay();

  17. }

  18. main.onmouseout = function(){

  19. startAutoPlay();

  20. }

  21. main.onmouseout();

  22.  

  23. //点击导航栏切换图片

  24. for(var i=0;i<pics.length;i++){

  25. lis[i].id = i;

  26. //给每个li项绑定点击事件

  27. lis[i].onclick = function(){

  28. //获取当前li项的index值

  29. index = this.id;

  30. changeImg();

  31. }

  32. }

  33. }

  34. //开始播放轮播图

  35. function startAutoPlay(){

  36. timer = setInterval(function(){

  37. index++;

  38. if(index>3){

  39. index = 0;

  40. }

  41. changeImg();

  42. },1000);

  43. }

  44. //暂停播放

  45. function stopAutoPlay(){

  46. if (timer) {

  47. clearInterval(timer);

  48. }

  49. }

  50. //改变轮播图

  51. function changeImg(){

  52. for(var i=0;i<pics.length;i++){

  53. pics[i].style.display = "none";

  54. lis[i].className = "";

  55. }

  56. pics[index].style.display = "block";

  57. lis[index].className = "changeColor";

  58. }

  59.  

  60. slideImg();

效果如下：

 

--------------------- 本文来自 风丶不会停息 的优快云 博客 ，全文地址请点击：https://blog.youkuaiyun.com/Best_CXY/article/details/79565983?utm_source=copy

muttry
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值