JQ实现轮播图

小鱼儿 2021-09-19 01:18 450阅读 0赞

<script>
            $(function(){
                var t;
                var index= 0;
                t=setInterval(play,5000);
                //自动轮播
                function play(){
                    
                // setTimeout(function(){
                    //自动运行
                    index++;
                if (index > 3) {
                    index = 0
                }
                $(".left-icon li").eq(index).find("span").addClass("white");
                $(".left-icon li").eq(index).siblings().find("span").removeClass("white");
                $(".left-img li").eq(index).fadeIn().siblings().fadeOut();
                $(".left-tit li").eq(index).fadeIn().siblings().fadeOut();
                //},5000)
                }
                //向左
                $("#toleft").click(function(){
                index--;
                if (index < 0){
                    index=3;
                }
                //判断index<0的情况为：开始点击#toright  index=0时  再点击 #toleft 为负数了 会出错
                $(".left-icon li").eq(index).find("span").addClass("white");
                $(".left-icon li").eq(index).siblings().find("span").removeClass("white");
                $(".left-img li").eq(index).fadeIn().siblings().fadeOut();
                $(".left-tit li").eq(index).fadeIn().siblings().fadeOut();
                })
                //向右
                $("#toright").click(function(){
                index++;
                if (index >= 4){
                    index=0;
                }
                //判断index<0的情况为：开始点击#toright  index=0时  再点击 #toleft 为负数了 会出错
                $(".left-icon li").eq(index).find("span").addClass("white");
                $(".left-icon li").eq(index).siblings().find("span").removeClass("white");
                $(".left-img li").eq(index).fadeIn().siblings().fadeOut();
                $(".left-tit li").eq(index).fadeIn().siblings().fadeOut();
                });
                //鼠标经过停止
                $(".news-l").mouseenter(function() {
                    $(".turn").show();
                    console.log("t");
                    clearInterval(t);
                });
                //鼠标离开继续
                $(".news-l").mouseleave(function() {
                    $(".turn").hide();
                    console.log('aaa');
                    t = setInterval(play, 3000)
                });
            });
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，450人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq轮播图2

天续着上一期的来给大家讲另外一种方法的轮播图这种方法可以实现无缝轮播，原理就是我们在自己预先想要设置轮播的那一组照片后边，用jq语言在另外加上一组相同的照片，相...

柔情只为你懂/ 2024年04月18日 15:05/ 0 赞/ 57 阅读

相关 JQ实现简单的自动轮播图效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

傷城~/ 2023年03月02日 07:38/ 0 赞/ 203 阅读

相关 jq实现轮播图(景深效果)——功能实现

最近工作不是很忙，正好可以多多练习一下`jq`，毕竟这块我实在是基础薄弱，在工作中经常会遇到各种各样的问题，导致效率很低。今天的案例是一个自动轮播图： ![在这里插入图

青旅半醒/ 2023年01月23日 09:52/ 0 赞/ 37 阅读

相关 jq实现滑动轮播效果

1、简单版本（无循环轮播，同时展示多张图片） [https://juejin.im/post/6844903799115497479][https_juejin.im_

桃扇骨/ 2022年12月17日 01:28/ 0 赞/ 237 阅读

相关 jq轮播原理及实现

直接开始，HTML CSS部分没备注，JS有 HTML部分 <div style="overflow: hidden;position: relative;left

深碍√TFBOYSˉ_/ 2022年05月14日 01:09/ 0 赞/ 175 阅读

相关 JQ代码实现轮播图功能

轮播图一般是横向滚动，我自己做了一个竖向滚动的轮播图，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

约定不等于承诺〃/ 2022年03月20日 07:50/ 0 赞/ 201 阅读

相关三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js面向对象实现无缝轮播）

三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js实现无缝轮播） //1、jq实现淡入淡出思路： a、使用JQ库里面的.fadeIn()\

一时失言乱红尘/ 2021年12月21日 15:37/ 0 赞/ 428 阅读

相关 JQ实现轮播图

<script> $(function(){ var t; var index=

小鱼儿/ 2021年09月19日 01:18/ 0 赞/ 451 阅读

相关 jq 呼吸轮播图

问题: 淡入淡出时间清除动画累积代码示例： <html> <head lang="en"> <meta charset="UTF

小灰灰/ 2021年07月25日 02:31/ 0 赞/ 387 阅读

相关 jq swiper(各种轮播图样式)

具体样式教程查看地址[swiper][] 各种样式引用地址[各种样式][Link 1] 引入swiper.min.css文件 swiper.jqu

客官°小女子只卖身不卖艺/ 2021年07月24日 12:32/ 0 赞/ 667 阅读