JS实现轮播图

最新推荐文章于 2021-03-05 15:35:02 发布
原创 最新推荐文章于 2021-03-05 15:35:02 发布 · 236 阅读 · 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
关注
简单的js轮播图
06-20
简单的JS轮播图插件，代码简介，使用方便，欢迎下载，
精选资源
纯js实现轮播图(3种轮播图).zip
12-28
在前端开发中，轮播图（Carousel）是一...以上内容涵盖了纯JavaScript实现轮播图所需的核心知识点，通过学习和实践这三种不同的轮播图实现，开发者可以深入理解JavaScript在前端动态效果中的应用，提升自己的前端技能。
JS实现简单的轮播图（非常简单，一看就懂）
热门推荐
风丶不会停息
03-15 12万+
主要思路：先将需要轮播的4张图使用绝对定位让其重叠在banner这个盒子中，然后遍历所有的图片将其隐藏，再获取当前图片的index值，根据当前的index值设置当前的图片显示出来。设置间歇定时器setInterval每隔1秒使得index的值加1，如果大于图片个数则index=0，每隔1秒调用changeImg()函数，改变图片的显示。li项的实现原理一样，总的来说就是围绕index的值来进行设置...
JS实现简单的轮播图
qsc19971022的博客
09-04 1445
JS实现简单的轮播图 js用面向过程的方法实现简单的轮播图 先写好简单的html布局； 正常轮播图所要实现的功能有一下几个： 1.banner图的自动切换； 2.通过左右按钮来切换banner图； 3.通过banner图下方的小圆点来切换banner图； 然后在使用CSS对页面进行布局： css样式因为时间问题，写的可能有点繁琐，给为小伙伴在阅读或者使用的时候可以自己精简一下。 因为在日常...
js简单轮播图
BlueSky
09-13 678
#tab {     overflow: hidden;     width: 100%;     position: relative;     float: left; }  #tab>img:not(:first-child) {     display: none; }     @foreach ($pdt_images as $pdt_image)        
js制作简单的轮播图
qq_36388734的博客
11-29 866
今天帅帅学到了js部分就想简单的做一个小的轮播图,在网上也看过别人写的,决定自己尝试下–&gt;&gt;&gt; 样例展示:图片需要自己替换: html部分: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播图&lt;/title&
js实现轮播图效果 纯js实现图片自动切换
11-19
本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片； 2. 鼠标离开，恢复自动播放； 3. 点击...
js实现轮播图效果 z-index实现轮播图
10-15
1. **JavaScript实现轮播图的基本原理** 要实现轮播图，首先需要一个包含多张图片的列表，然后通过改变这些图片的位置或可见性来达到切换效果。在上述代码中，作者使用了一个`<ul>`列表来存放图片，每个`<li>`元素...
纯JS实现轮播图
10-20
在实现轮播图时，虽然示例中没有展示具体的JavaScript代码，但可以推断出其大致逻辑是使用原生JavaScript进行DOM操作和事件监听。这种实现方式的好处是轻量级，不依赖任何外部库，但缺点是代码量较大，且需要开发者...
js简易轮播图
qq_45693419的博客
08-23 220
原生js轮播图 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./animate.j
JS实现一个简单的轮播图
weixin_42662269的博客
03-05 1240
轮播图是一个常见的组件，今天用js来实现一个简单的轮播图。 功能如下： 1.自动轮播，有滑动效果。 2.左右箭头可实现上一张下一张的切换，并作了节流处理。 3.点击下方小圆点可切换至对应的图片。 4.鼠标悬停至图片或小圆点处会暂停轮播，移开则继续。 原理： 如上图所示 ，以展示三张图且切换下一张为例。123数字代表图1，图2，图3，蓝色矩形框为可视范围，即轮播图展示的范围，其余图片均隐藏。 状态A：页面的初始状态，默认显示第一张图片。 状态B：整个图片列表向左移动，即可显示第二张图
js轮播图
Edasi的博客
08-28 250
前几天准备看看轮播图的时候找到了这个版本的轮播图 这个代码逻辑十分清晰，也很简单 我对代码进行了一丢丢加工，可以根据插入图片数量的多少进行增加元素节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值