返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用JavaScript实现轮播图特效
  • 267
分享到

使用JavaScript实现轮播图特效

2024-04-02 19:04:59 267人浏览 八月长安
摘要

本文实例为大家分享了javascript实现轮播图特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <hea

本文实例为大家分享了javascript实现轮播图特效的具体代码,供大家参考,具体内容如下


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/CSS">
   .aaa {
    width: 600px;
    height: 350px;
    position: relative;
    margin: 50px auto;
   }
   .picture img {
    position: absolute;
   }
   .dot {
    position: absolute;
    bottom: 5px;
   }
   .dot li {
    float: left;
    width: 16px;
    height: 16px;
    background-color: #e8e8e8;
    border-radius: 50%;
    list-style: none;
    margin-right: 10px;
    cursor: pointer;
   }
   .left {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 169px;
    text-align: center;
    background-color: #000000;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;
   }
   .right {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 169px;
    right: 0;
    text-align: center;
    background-color: #000000;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;
   }
   .aaa .spot {
    background-color: #FF0000;
   }
  </style>
 </head>
 <body>
  <div class="aaa">
   <div class="picture">
    <img src="images/1.jpg" style="width: 600px;height: 350px;">
    <img src="images/2.jpg" style="width: 600px;height: 350px;">
    <img src="images/3.jpg" style="width: 600px;height: 350px;">
    <img src="images/4.jpg" style="width: 600px;height: 350px;">
    <img src="images/5.jpg" style="width: 600px;height: 350px;">
   </div>
   <ul class="dot">
    <li class="spot"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   <div class="left">&lt;</div><!--&lt;  转义字符 -->
   <div class="right">&gt;</div><!--&gt;  转义字符 -->
  </div>
  <script>
   var lis = document.querySelectorAll(".dot li")
   var picture = document.querySelectorAll(".picture img")
   var left = document.querySelector(".left")
   var right = document.querySelector(".right")
   var aaa = document.querySelector(".aaa")
   var index = 0 //设置索引号变量
   picture[index].style.opacity = 1 //第一张图片显示出来
   //右按钮换图
   right.onclick = function() {
    fn("+")
   }
   //左按钮换图
   left.onclick = function() {
    fn("-")
   }
   //定时器换图,每隔3000毫秒换图
   var timer = setInterval(function() {
    fn("+")
   }, 3000)
   //鼠标进入暂停
   aaa.onmouseover = function() {
    clearInterval(timer)
   }
   //鼠标离开继续
   aaa.onmouseout = function() {
    timer = setInterval(function() {
     fn("+")
    }, 3000)
   }
   //鼠标触碰小点换图
   for (var i = 0; i < lis.length; i++) {
    lis[i].in = i
    lis[i].onmouseover = function() {
     fn(this.in)
    }
   }
   //函数
   function fn(ope) {
    picture[index].style.opacity = 0 //上一张图片隐藏
    lis[index].className = "" //清除小点样式
    //判断ope
    if (typeof ope === 'number') {
     index = ope
    } else if (ope === '+') { //判断是否右按钮
     if (index === 4) {
      index = 0
     } else {
      index++
     }
    } else {
     if (index === 0) { //判断是否左按钮
      index = 4
     } else {
      index--
     }
    }
    picture[index].style.opacity = 1 //当前图片显示
    lis[index].className = "spot" //给小点加上样式
   }
  </script>
 </body>
</html>

效果如图所示:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 使用JavaScript实现轮播图特效

本文链接: https://www.lsjlt.com/news/134354.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用JavaScript实现轮播图特效
    本文实例为大家分享了JavaScript实现轮播图特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <hea...
    99+
    2024-04-02
  • 使用JavaScript实现轮播图效果
    本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 纯js,不使用轮播图控件怎么做轮播图呢,往下看吧 效果图: 1.可点击小圆点切换图片 2...
    99+
    2024-04-02
  • 用JavaScript实现轮播图效果
    本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html lang=...
    99+
    2024-04-02
  • 使用javascript怎么实现一个轮播特效
    本篇文章给大家分享的是有关使用javascript怎么实现一个轮播特效,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。javascript是一种什么语言javascript是一种...
    99+
    2023-06-14
  • 原生JavaScript实现轮播图效果
    本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 一、功能: 1、每隔2.5s自动切换下一张轮播图; 2、底部按钮切换对应轮播图; 3、鼠标...
    99+
    2024-04-02
  • 如何使用JavaScript实现轮播图
    这篇文章主要介绍了如何使用JavaScript实现轮播图,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 wxml(使用官方的等等组件来展示...
    99+
    2024-04-02
  • Android实现图片文字轮播特效
    本文实例讲解了Android实现图片文字轮播特效的详细代码,分享给大家供大家参考,具体内容如下 图片轮播是类似知乎日报上的一个轮播效果,如下图。 好了直接进入正题,首先是出示...
    99+
    2022-06-06
    图片 轮播 Android
  • js如何实现图片轮播特效
    这篇文章将为大家详细讲解有关js如何实现图片轮播特效,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先看一眼效果图:代码:<html> <head>...
    99+
    2024-04-02
  • 使用微信小程序实现图片轮播特效
    使用微信小程序实现图片轮播特效引言:随着智能手机的普及,微信成为了我们每天使用最频繁的app之一。微信小程序作为微信生态系统中的一部分,提供了一种快速开发和发布应用程序的方式。图片轮播特效不仅可以为应用程序增添动感和美观,还可以提升用户体验...
    99+
    2023-11-21
    图片轮播 微信小程序 特效
  • JavaScript实现首页图片轮播图效果
    目录一、轮番图二、源码展示设置body样式设置实现轮番一、轮番图 效果展示: 轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,这个模...
    99+
    2024-04-02
  • JavaScript实现简单的轮播图效果
    轮播图是什么? 轮播图:在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。这些图片就都是轮播图,这个模块就叫做轮播模块。 如何实现轮播图 如何才能在js里...
    99+
    2024-04-02
  • 原生javascript+CSS实现轮播图效果
    本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码,供大家参考,具体内容如下 1.html <ul id="banner" ></ul&g...
    99+
    2024-04-02
  • javascript实现图片轮播简单效果
    本文实例为大家分享了javascript实现图片轮播简单效果的具体代码,供大家参考,具体内容如下 这里是css样式  * {      margin: 0;  padding...
    99+
    2024-04-02
  • jquery如何实现无缝轮播图特效
    本文小编为大家详细介绍“jquery如何实现无缝轮播图特效”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何实现无缝轮播图特效”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、HTML结构首先需要创...
    99+
    2023-07-05
  • 使用jQuery实现图片轮播效果
    jQuery是对JavaScript的简化,语法没有太大区别,比较JavaScript更加容易理解,代码量更少。 用jQuery实现图片轮播需要有以下步骤: ​ 1.对图片区域获取,...
    99+
    2024-04-02
  • 用jquery实现轮播图效果
    本文实例为大家分享了用jquery实现轮播图的具体代码,供大家参考,具体内容如下 (带小圆点和左右箭头切换效果的) 原理:定义索引,定时任务实现轮播切换,切换时同样需要切换小圆点...
    99+
    2024-04-02
  • 用js实现轮播图效果
    今天来说一下利用js实现轮播图效果,供大家参考,具体内容如下 思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'> ...
    99+
    2024-04-02
  • jquery如何实现轮播特效
    这篇文章主要介绍了jquery如何实现轮播特效的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何实现轮播特效文章都会有所收获,下面我们一起来看看吧。1、获取li的个数length和宽度width&n...
    99+
    2023-07-04
  • jQuery怎么实现图文轮播切换特效
    今天小编给大家分享一下jQuery怎么实现图文轮播切换特效的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起...
    99+
    2024-04-02
  • 使用ViewPager2实现简易轮播图效果
    本文实例为大家分享了使用ViewPager2实现轮播图效果的具体代码,供大家参考,具体内容如下 0.实现效果 1.添加依赖 dependencies {     ...     i...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作