jQuery实现焦点图播放效果

最新推荐文章于 2022-02-25 11:00:48 发布

Ceria1995

最新推荐文章于 2022-02-25 11:00:48 发布

阅读量420

点赞数

分类专栏： jQuery 文章标签： web前端 jQuery

本文链接：https://blog.csdn.net/Ceria1995/article/details/51968462

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

` Title .div1{ width: 470px; height: 150px; position: relative; margin: 0 auto; overflow: hidden;} .div{ width: 470px; height: 150px; position: absolute; left: 0; top: 0;} ol{ position: relative; top: 100px; left: 30%; list-style: none;} ol li{ float: left; cursor: pointer; width: 20px; height: 20px; margin-right: 5px; border-radius: 10px; color: #fff; background: #6a6a6a; line-height: 20px; text-align: center;}

(function(){
            //定义一个索引
            var index  = 0;
            //设置第一个li按钮的颜色 $(function(){ //定义一个索引 var index = 0; //设置第一个li按钮的颜色$ ("li").eq(0).css("background","orange"); //设置所有的div图片隐藏，第0个显示

(".div").hide().eq(0).show();
            //封装一个图片播放动画
            function toFun(){
                index = (index == $(".div").length - 1)? 0 : index + 1;
                $(".div").fadeOut().eq(index).fadeIn();
                $("li").css("background","#6a6a6a").eq(index).css("background","orange")
            }
            //鼠标移入li按钮，图片切换 $(".div").hide().eq(0).show(); //封装一个图片播放动画 function toFun(){ index = (index == $(".div").length - 1)? 0 : index + 1; $(".div").fadeOut().eq(index).fadeIn(); $("li").css("background","#6a6a6a").eq(index).css("background","orange") } //鼠标移入li按钮，图片切换$ ("li").mouseover(function(){ index =

("li").index(this); $("li").index(this);$ (".div").fadeOut().eq(index).fadeIn();

("li").css("background","#6a6a6a").eq(index).css("background","orange")
})
//鼠标移入div自动播放暂停，鼠标移出开始播放 $("li").css("background","#6a6a6a").eq(index).css("background","orange") }) //鼠标移入div自动播放暂停，鼠标移出开始播放$ (".div1").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(toFun,2000); } ); var timer = setInterval(toFun,2000); })