轮播图-js_鼠标移到“播放器”图片上,左右两边显示类似:回退和往前播放按钮-CSDN博客

本文链接：https://blog.csdn.net/qq_45025670/article/details/125891753

本文详细介绍了如何使用JavaScript实现轮播图功能，包括鼠标悬停时左右按钮的显示和隐藏，自动播放与暂停，点击按钮切换图片，图片循环播放，以及底部小圆点与图片切换同步等功能。同时，文章解决了在轮播过程中动画效果连续性和循环无缝衔接的问题。

摘要由CSDN通过智能技术生成

在这里插入图片描述

功能特点：

鼠标不经过轮播图，轮播图会自动播放，经过时播放暂停
鼠标经过轮播图模块，左右按钮显示，离开左右按钮隐藏
图片播放的同时，小圆点跟着一起变化
点击左右按钮可以左右切换图片
图片循环切换：左切换到左边界点击按钮会回到最右边，右切换同理
点击底部的小圆点可以播放相应的图片

一、鼠标经过轮播图模块，左右按钮显示，离开左右按钮隐藏

// 1. 获取元素
var focus = document.querySelector(".focus");
var arrowl= document.querySelector(".arrow-l");
var arrowr= document.querySelector(".arrow-r");

// 2. 绑定鼠标进入事件
focus.addEventListener('mouseenter',function(){
   
	arrowr.style.display = 'block';
	arrowl.style.display = 'block';

});
// 3. 绑定鼠标离开事件
focus.addEventListener('mouseleave',function(){
   
    arrowr.style.display = 'none';
    arrowl.style.display = 'none';
    
    });

关于mouseover和mouseenter、mouseout和mouseleave

二、鼠标不经过轮播图，轮播图会自动播放，经过时播放暂停

animate.js的封装

切换功能===>动画

var focuswidth = focus.offsetWidth;
var num = 0;

function leftmove(){
   

    if(num