jQuery轮播图

 

一、轮播图

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