动态实现首页轮播图和鼠标停留图片变模糊

（1）主题（目标）：完成项目内容
完成悦轩饼家首页动态效果

（2）完成页面所需要的知识点（重难点）
1、jquery操作css

addClass()-向被选元素添加一个或多个类

removeClass-从被选元素删除一个或多个类

toggleClass-对被选元素进行添加/删除类的切换操作

2、jquery hover()方法 

hover()方法规定当鼠标指针悬停在被选元素上市验孕性的两个函数方法出发mouseenter和mouseleave2022年6月23日16:02:05

3、轮播图插件unslider

（3）完成页面的步骤
鼠标滑过图片效果：

        首先给要实现效果的图片起相同的class名字，然后在css样式中写一个鼠标滑过时要实现的效果样式，在script标签中写入function函数，就能实现效果，如下：

$(function(){
            $(".img1").hover(function(){
                $(this).addClass("hg");
            },function(){
                $(this).removeClass("hg");
            })
        })
图片轮播效果：

        首先在网上找图片轮播效果框架代码，并下载要引用的jQuery插件，放到js文件夹中

复制并粘贴要用的代码，根据自己实现好的页面将复制的代码内容：图片地址、宽度等修改一下就可以完成。

地址：jquery轮播图插件unslider

（4）写页面的过程中碰到的问题，怎么解决的？
问题：图片宽度和页面宽度不适应

解决：将图片的宽度以及包括图片的div的宽度调整为100%

问题：实现好的轮播图片和下面的图片有间隔

解决：将图片img浮动
————————————————
版权声明：本文为CSDN博主「m0_71810729」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_71810729/article/details/125428191