切换式轮播方式

Posted 2020-12-02 ace-suiyuan008

整体思路

通过也变量来获取到对应的元素并对其进行赋予class属性，从而使轮播标识与轮播动画相匹配

一、css中创建一个class：

/*等待切换的class属性*/
.blue{background: #00f!important;}

二、源代码创建：

<div class="lunbo">
　　<img class="qiehuan" src="img/1.png" alt="">
　　<div class="lunbo_div">
<!--   初始添加class方便切换-->
　　　　<div class="lunbo_xiabiao blue" id="lunbo_xiabiao1"></div>
　　　　<div class="lunbo_xiabiao" id="lunbo_xiabiao2"></div>
　　</div>
</div>

三、创建定时器和轮播路径

var imgPath = [‘img/1.png‘,‘img/2.png‘];//轮播图片
var IntervalObj1 = null;//定义定时器1
var IntervalObj2 = null;//定义定时器1
var n = 1;//定义下标

四、开始轮播事件

//轮播事件开始
function addEvent_4(){
    IntervalObj1=setInterval(function(){
        $(".qiehuan").attr(‘src‘,imgPath[n]);//追加第二章图片路径
        n++;
        $(".lunbo_xiabiao").toggleClass(‘blue‘);//切换class位置
        if(n>=(imgPath.length)){
            n = 0;//循环
        }
    },3000);
}

五、完善效果

//移上停止移走开始
function stop_start(){
    $(".lunbo").mouseover(function(){
        clearInterval(IntervalObj1);
        clearInterval(IntervalObj2);//将两个定时器都清除
    }).mouseout(function(){
        clearInterval(IntervalObj1);
        clearInterval(IntervalObj2);//再次清除两个定时器，防止冲突
        IntervalObj2=setInterval(function(){
        $(".qiehuan").attr(‘src‘,imgPath[n]);//追加第二章图片路径
        n++;
        $(".lunbo_xiabiao").toggleClass(‘blue‘);//切换class位置
        if(n>=(imgPath.length)){
            n = 0;//循环
        }
    },3000);
    })
}

要点：

1、toggleClass()方法：

对设置或移除被选元素的一个或多个类进行切换，检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

2、注意及时清除所有定时器，避免产生冲突。

效果：