jQuery轮播图

2021-11-15 19:32:42 阅读：164 来源： 互联网

标签：jQuery function 轮播 setInterval list clearInterval next click

一、轮播图

var current=0;
    var conut=$(".pics-list>li").length;
    // 封装成一个move方法
    function move(){
        $(".points-list>li").eq(current).addClass("active").siblings().removeClass("active");
        $(".pics-list").css("left",-1200 * current + "px")
    }
    // 封装成一个next方法
    function next(){
        if (current<conut-1) {
            current++;
        }else{
            current=0;
        }
        move();
    }

var timer=setInterval(()=>{
            next();
        },3000); 
        $(".banner-box").hover(function(){
            clearInterval(timer);
        },function(){
            timer=setInterval(()=>{
                next();
            },3000);
        })

timer 定时器

setInterval调用已命名函数 clearInterval() 定义和用法

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：

myVar = setInterval("javascript 函数", milliseconds);

可以通过 clearInterval() 方法来停止执行。

语法

clearInterval(id_of_setinterval)

加点点

$(".points-list>li").click(function(){
        current=$(this).index();
        move();
    })

向右轮播

$(".buts>.next").click(function(){
        next();
        move();
    })

向左轮播

  $(".buts>.prev").click(function(){
        next();
        move();
    })

jQuery排他思想

使用的方法：click() css() siblings()

$(function() {
           // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "pink");
                 // 3. 其余的兄弟去掉背景颜色 隐式迭代
                 $(this).siblings("button").css("background", "");
            });
         })

$(function(){
    $(".top-list.title").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $("top-list-main ul").eq($(this).index()).show().siblings().hide();
    })
})

二、closest()方法

定义和用法

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

语法

.closest(selector)

(selector)包含字符串值，包含匹配元素的选择器表达式。

.closest()	.parents()
从当前元素开始	从父元素开始
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。	沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的jQuery对象	返回包含零个、一个或多个元素的 jQuery 对象

标签：jQuery,function,轮播,setInterval,list,clearInterval,next,click
来源： https://www.cnblogs.com/Nice0115/p/15557845.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery轮播图

一、轮播图

二、closest()方法

定义和用法

语法