js实现图片自动轮播
未知
2020-12-08 09:57:30
0
问题描述:
     轮播


解决办法:

<div class="zhongjian_con">
        
               <div class="datu">
                  
                   
                        <img  src="images/pic.jpg"/>
                      <img  src="images/pic.jpg"/>
                      <img  src="images/pic.jpg"/>
               </div>
                    
            <div class="poster-box">
                <ul class="videolists" id="yuandian">
                 
                    <li >
                        <a href="#">
                            <img src="images/pic.jpg"/>
                        </a>
                    </li>
                    <li >
                        <a href="#">
                            <img src="images/pic.jpg"/>
                        </a>
                    </li>
                      <li >
                        <a href="#">
                            <img src="images/pic.jpg"/>
                        </a>
                    </li>
                     <li >
                        <a href="#">
                            <img src="images/pic.jpg"/>
                        </a>
                    </li>
                </ul>
                <div class="poster-page">
                    <a class="a-page a-prev"><img src="/template/pc/skin/img/prev.png"></a>
                    <a class="a-page a-next"><img src="/template/pc/skin/img/next.png"></a>
                </div>
            </div>
        </div>

<script>
    /*i表示当前图片的下标和当前小图的下标(图片和小图是对应关系)*/
    var i = 0;
    var timer;
    $(function(){
        /*Step 1: 设置页面刚加载出来显示的是第一张图片*/
        $(".datu img").eq(0).show().siblings().hide();
        /*开始做图片轮播,使用定时器*/
        start();
        /*Step 2: 鼠标移入小小图的时候,首先清除定时器,找到当前小图的索引,改变当前显示的图片,使其变换成小图对应的图片,当前小图变换样式*/
        $("#yuandian li").hover(function(){
            clearInterval(timer);
            i = $(this).index();
            change();
        }, function(){
            /*鼠标移出的时候,重新启动定时器*/
            start();
        });
       
    });
    /*开始轮播函数*/
    function start(){
        /*定时器,每个图片在页面上停留的时间是3s*/
        timer = setInterval(function(){
            i++;

            if(i == 7){
                i = 0;
            }
            change();
        }, 2000);
    }
    /*当前图片及对应小图变换函数*/
    function change(){
        /*当前图片淡入,其他图片淡出*/
        $(".datu img").eq(i).show().siblings().hide();
        /*当前小图添加类current,其他小图删除其类current*/
        $("#yuandian li").eq(i).addClass("current").siblings().removeClass("current");
    }
    
    // 图片列表左右箭头点击事件
    var j=0;//点击次数
    var domnum=$(".videolists li").length;
    $(".a-next").click(function(){
        $(".videolists").each(function(num,val){
                 $(this).children().eq(j).hide();
        })
        x=domnum-6;
        j++;

        if(j>x){
            j=0;
        }

    })

    var dianjipre=0;//点击次数
    var lidomnum=$(".videolists li").length;
    $(".a-prev").click(function(){
        $(".videolists").each(function(num,val){
                 $(this).children().eq(dianjipre).show();
        })
        x=lidomnum-6;
        dianjipre++;

        if(dianjipre>x){
            dianjipre=0;
        }

    })
</script>

相关内容

XXX技术解析
本文详细解析了XXX技术的定义、特点、应用及发展趋势。该技术具有高...
2025-02-13 01:23:39
XXX文化现象
本文深入解析了XXX文化现象的内涵、特点、发展历程及当代影响。XX...
2025-02-10 08:23:36
小米汽车:经查完全不存在网...
小米汽车回应SU7“断轴”传闻,经查完全不存在。官方迅速澄清,强调...
2025-02-10 06:23:39
四川宜宾山体滑坡30余人失...
四川宜宾山体滑坡致30余人失联,救援行动紧急展开。事件引发关注,需...
2025-02-10 01:00:43
网络攻击中WAF技术的最新...
摘要: 本文探讨了WAF技术的最新发展和应用趋势,包括深度学习、...
2025-02-09 18:46:39
如何配置 PHP 以实现上...
通过编辑php.ini文件或使用PHP配置函数,可设置上传文件大小...
2025-02-09 15:00:48

热门资讯

layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
JavaScript获取当前协... JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
如何在html中禁止复制文字 问题描述: 如何禁止别人复制自己的文章? 解决办法: 在body标签中添加以下代码: onconte...
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...
手机端底部定位 问题描述: 需要实现的效果 解决办法: !-- 底部 -- div class=layui-row ...