• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

用jquery实现轮播图效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了用jquery实现轮播图的具体代码,供大家参考,具体内容如下

(带小圆点和左右箭头切换效果的)

原理:定义索引,定时任务实现轮播切换,切换时同样需要切换小圆点的样式

 var j = 0;//定义索引,图片和小圆点共用
        var cusTimer;//定义定时函数
        $('.cons-middle .cons-mid').eq(0).show().siblings().hide();//定义默认的显示图片,也就是索引为0的那张图片
        cusStart();//开始实现图片轮播,用到了定时器
        $('.luobo-circle li').hover(function(){//当鼠标运动到某个小圆点是,切换图片
            clearInterval(cusTimer);//并且清除定时
            j=$(this).index();//获取当前鼠标运动到的小圆点的索引
            cusChange();//执行切换图片的函数
        });
        $('.luobo-circle li').mouseleave(function(){
            cusStart();//定义当鼠标离开小圆点时继续执行定时函数,轮播开始
        });
        
        $('.cons-left img').click(() => {
            j--;
            if (j < 0) {
                j = 3;
            };
            cusChange();
            $('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        });
        
        $('.cons-right img').click(() => {
            j++;
            if (j > 3) {
                j = 0;
            }
            cusChange();
            $('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        })
        function cusStart(){//轮播开始函数
            cusTimer = setInterval(function(){//自动轮播定时函数
                j++;//索引进行累加,防止图片只显示一张
                if(j==4){
                    j=0;//我这里是用的8张图片,当索引为8时,图片没有了,将索引清零
                }
                cusChange();//继续执行图片轮播
            },5000)//2000是多久切换一次图片,表示两秒
        };
        function cusChange(){//图片显示函数,这里的fadeOut和fadeIn是图片显示方式是淡入淡出
            $('.cons-middle .cons-mid').eq(j).fadeIn(300).siblings().stop().fadeOut(300);
            //eq选择当前图片,siblings表示排除其他图片,stop表示其他图片停止切换,只切换当前图片
            $('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        }

(无小圆点,仅自动轮播及左右切换)

//首页banner轮播
    var i = 0;
    var bannerTimer;
    function bannerChange(){//图片显示函数,这里的fadeOut和fadeIn是图片显示方式是淡入淡出
        $('.banner ul li').eq(i).fadeIn(300).siblings().stop().fadeOut(300);
    }
    function bannerStart(){//轮播开始函数
        bannerTimer = setInterval(function(){//自动轮播定时函数
            i++;
            if(i==2){
                i=0;
            }
            bannerChange();
        },3000)
    };
    $('.banner ul li').eq(0).show().siblings().hide();
    bannerStart();
    $('.pagination .prev').click(() => {
        i--;
        if (i < 0) {
            i = 2;
        };
        bannerChange();
    });
    $('.pagination .next').click(() => {
       i++;
        if (i > 2) {
            i = 0;
        }
        bannerChange();
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery实现文章收起与展开功能发布时间:2022-02-05
下一篇:
VUE引入使用G2图表的实现发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap