jquary简单横向轮播

最新推荐文章于 2024-02-23 11:32:18 发布

不归少年

最新推荐文章于 2024-02-23 11:32:18 发布

阅读量349

点赞数 1

分类专栏： jquary

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/102499365

版权

jquary 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquary简单横向轮播</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul li{
            list-style: none;
        }
        .block {
            width: 857px;
            height: 441px;
            border: solid 1px silver;
            position: relative;
            margin: auto;
            overflow: hidden;
        }
        span {
            position: absolute;
            top: 200px;
            display: block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: silver;
            color: aliceblue;
            cursor: pointer;
        }
        span:nth-child(1) {
            left: 0;
        }

        span:nth-child(2) {
            right: 0;
        }
        .banner {
            width: 5142px;
            height: 441px;
        }
        .banner>li {
            float: left;
            width: 857px;
            height: 441px;
        }
        img {
            width: 857px;
            height: 441px;
        }
        .quan {
            height: auto;
            width: auto;
            position: absolute;
            bottom: 30px;
            left: 380px;
        }

        .quan>div {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: solid 4px rgba(172, 167, 167, 0.349);
            margin: 8px;
            float: left;
        }

        .bgcolor {
            background-color: rgba(255, 255, 255, 0.658);
        }
    </style>
</head>

<body>
    <div class="block">
        <span>《</span>
        <span>》</span>
        <ul class="banner">
            <li><img src="img/t1.png" alt=""></li>
            <li><img src="img/t2.png" alt=""></li>
            <li><img src="img/t3.png" alt=""></li>
            <li><img src="img/t4.png" alt=""></li>
        </ul>
        <div class="quan">
            <div class="bgcolor"></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <script src="./js/jquery-1.9.1.js"></script>
    <script>
    $(function(){
        var num=0;//图片索引
        var timer=null;//计时器
        var timeend=0;//记录上一次的时间

        // 将第一张图片加到banner盒子的最后
        $(".banner").children().eq(0).clone().appendTo(".banner");
          console.log($(".banner").children().length);//5
        // 鼠标进入离开图片内容时，图片停止动画
        $(".block").mouseenter(function (){
            clearInterval(timer);
        }).mouseleave(function (){
            timer=setInterval(function (){
                an();
            },1000)
        }).trigger("mouseleave");


        //左侧滑动动画
        function an (){
            num++;
            $(".banner").animate({
                marginLeft:-857*num  //以逗号分隔
            },600,"linear",function (){
                // 是否跳到最后一张
                if(num==$(this).children().length-1){
                    $(this).css({
                        marginLeft:0
                    });
                    num=0;
                }
            })
        }


        // 鼠标点击事件
        $(".block>span").each(function (index){
            $(this).click(function (e){
                if(e.timeStamp-timeend>=600){
                    timeend=e.timeStamp;
                    if($(this).html()=="《"){
                        an();
                    }
                    else {
                        num--;
                        if(num<0){
                            num=$(".banner").children().length-2;
                            $(this).css({
                                marginLeft:-5142
                            });
                        }
            $(".banner").animate({
                marginLeft:-857*num  //以逗号分隔
            },600);
                    }
                }
            });
        });

        // 圈事件
        $(".quan>div").each(function(index){
            $(this).mouseenter(function(){
                $(".banner").stop().animate({
                    marginLeft:-857*index
                },600);
                $(this).addClass("bgcolor").siblings().removeClass("bgcolor");
                num=index;
            });
        });
    })
    </script>
</body>
</html>

二、效果展示
在这里插入图片描述
三、总结
1、css样式顺序以及样式设计影响最后的表达效果
2、mouseover与mouseenter的区别

mouseover(鼠标覆盖)
mouseenter(鼠标进入)
二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)
共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

<div class="div3">
                    <p id="p1"> div3有子元素p(mouseenter)</p>
                </div>
            <span id="s3"></span>
            <div class="div4">
                    <p id="p2">div4有子元素p(mouseover)</p>
                </div>
            <span id="s4"></span>

 $(".div3").on("mouseenter", function () {
                $("#s3").text(z += 1)
            })
            $(".div4").on("mouseover", function () {

                $("#s4").text(w += 1)
            })

在这里插入图片描述
当有子元素时，mouseover鼠标进入div4的p时，数值增加，即触发了父元素的函数，产生了冒泡

3、animate()方法以及参数的意思

4、 e.timeStamp

5、if($(this).html()=="《") html()方法

html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数，则返回被选元素的当前内容。

不归少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquary简单横向轮播

一、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫

专栏目录