基于jQuery实现幻灯片切换效果

最新推荐文章于 2021-09-09 20:15:49 发布

苦涩2020

最新推荐文章于 2021-09-09 20:15:49 发布

阅读量716

点赞数

分类专栏：案例练习前端文章标签： jquery

本文链接：https://blog.csdn.net/UserPython/article/details/107080758

版权

该博客展示了如何利用jQuery实现幻灯片自动切换、点击小圆点切换、通过控制按钮切换及鼠标悬停暂停切换的效果。详细介绍了每个功能的实现细节。

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

效果图

在这里插入图片描述

功能：1、幻灯片自动切换；2、点击下方小圆点切换对应幻灯片；3、点击左右两侧耳朵控制幻灯片切换至上一张或下一张；4、鼠标悬停幻灯片上时，幻灯片停止切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="./jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #box{
    
            width: 100%; height: 350px;
            margin-top: 100px;
        }
        .bg0{
    background: #0D2736;}
        .bg1{
    background: #0F0909;}
        .bg2{
    background: #283F75;}
        .bg3{
    background: #405CDA;}
        #slide{
    
            width: 800px; height: 350px; 
            margin: 0 auto;
            position: relative;
            overflow: hidden;
         }
        #zxw{
    
            width: 4000px; height: 35px;
            position: absolute; top: 0; left: 0px;
        }
        #zxw li{
    
            float: left;
        }
        #zxw li a{
    
            display: block; width: 800px; height: 350px;
            position: relative;
        }
        #zxw li a img{
    
            width: 100%; height: 100%;
        }
         /* --------- */
        #zxw li a span{
    
            font-size: 150px; text-align: center;
            position: absolute; color: #fff;top: 100px; left: 350px;
        }
         /* ----------- */
        #nav{
    
            width: 160px; height: 20px;
            position: absolute; bottom: 10px; left: 50%;
            margin-left: -80px;
        }
        #nav li{
    
            width: 20px; height: 20px; 
            border-radius: 50%;
            background: #ccc; 
            float: left;
            margin: 0 10px;
            cursor: pointer;
        }
        #nav .active