2022.6.23日志

一.jQuery使用技巧

1.jQuery操作CSS:根据jQuery API可以进行查询

2.jQuery hover：当鼠标指针悬停在被选元素上时要运行的两个函数方法触发mouseenter事件和mouseleave事件。

3.jQuery视频轮播插件 unslider网址

https://www.jq22.com/jquery-info1940

4.jquery click()方法（案例）

5.addClass()方法:向被选元素添加一个或多个类。

removeClass()方法:从被选元素移除一个或多个类。

toggleClass()方法:对添加和移除被选元素的一个或多个类进行切换。

css()方法：设置或返回样式属性

二.作业任务(鼠标悬停效果及视频轮播图)

鼠标悬停效果：鼠标划上变模糊，划过恢复正常 

 <script>
     //鼠标划过显示的状态
    $(function(){
    $(".tupian>div").hover(function(){
     //opacity:调整透明度
     $(this).css("opacity","0.3");
     },function(){
     $(this).css("opacity","1");
});
    });
</script>

视频轮播图效果：1.引用视频轮播js

<script src="js/unslider.min.js"></script>

2.添加图片

3.设置CSS样式

.banner{
    position: relative;
    overflow: auto;
    text-align: center;
}
.banner li{
    list-style: none;
}
.banner ul li{
    float: left;
}
#lunbo{
    width: 100%;    
}
/* .dots指的是轮播图中间的圆点 */
/* 设置圆点的位置 */
#lunbo .dots{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}
#lunbo .dots li{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    text-indent: -999em;
    border:2px solid #fff;
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.4;
}
#lunbo .dots li.active{
    background: #fff;
    opacity: 1;
}
#lunbo .arrow{
    position:absolute;
    top: 200px;
}
#lunbo #left{
    left: 15px;
}
#lunbo #right{
    right: 15px;
}

4.点击事件

<script>
            $(function(){
                //初始化轮播图对象
                var unslider04=$('#lunbo').unslider({
                    //显示中间的圆点效果图
                    dots:true
                });
                //获取轮播图里面的对象数据（集合）
                data04=unslider04.data('unslider');
                //左右箭头的点击事件，实现图片切换
                $('.unslider-arrow04').click(function(){
                    //unslider-arrow04 prev取出箭头的类名的后面的一个类的名字prev或者next
                    var fn=this.className.split(' ')[1];
                    //根据取出来的类名（prev或next），来分别判断该左滚动还是右滚动
                    data04[fn]();
                });
            });
        </script>

效果

 

三.问题

CSS样式的意思

1.position: relative： 相对定位 

2. .dots：指的是轮播图中间的圆点 /* 设置圆点的位置 */

3.text-indent ：属性规定文本块中首行文本的缩进。

4.border-radius： 圆角设置

5.cursor: pointer： cursor 属性规定要显示的光标的类型（形状）
   pointer ：光标呈现为指示链接的指针（一只手）

6.opacity:调整透明度

7.//初始化轮播图对象
              

  var unslider04=$('#lunbo').unslider({
                    //显示中间的圆点效果图
                    dots:true
                });