JQ实现轮播图

小鱼儿 2021-09-19 01:18 444阅读 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 条评论，444人围观）

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

相关阅读

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

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

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

相关 jq实现简单的swiper轮播预览原图

最近项目中用到的一个效果，简单记录一下效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

ゝ一世哀愁。/ 2022年12月28日 07:40/ 0 赞/ 174 阅读

相关 jq实现滑动轮播效果

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

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

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 322 阅读

相关 jq轮播原理及实现

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

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

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

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

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

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

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

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

相关 JQ实现轮播图

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

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

相关 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 赞/ 666 阅读