实现京东轮播图_ssm中如何实现轮播-CSDN博客

本文链接：https://blog.csdn.net/yel125270/article/details/95525194

<style>
        *{padding: 0px; margin: 0px;}
        .box{width: 590px; height: 470px; margin: 50px auto; position: relative;}
        .box1{list-style: none;}
        .box1 li{display: none; position: absolute;}
        .box1 li.show{display: block;}
        a.arrow{text-decoration: none; display: inline-block;
        width: 25px; height: 40px; background-color: rgba(0, 0, 0, 0.2);
        color:#fff; font-size: 20px; text-align: center; line-height: 40px;
        position: absolute; top: 50%; margin-top: -20px;}
        a.arrow:hover{background-color: rgba(0, 0, 0, 0.5);}
        .ar{right:0px;}
        ol{list-style: none; position: absolute; left: 50%; margin-left: -35px; bottom: 30px;}
        ol li{width: 10px; height: 10px; border-radius: 50%; border: 1px solid #222;
        float: left; margin-right: 10px; cursor: pointer;}
        ol li.active{background: #fff;}
    </style>

上面为css样式设置以下为body内容和 js代码：

<body>
    <div class="box">
        <ul class="box1">
            <li class="show"><img src="../重要/img/1.jpg" alt=""></li>
            <li><img src="../重要/img/2.jpg" alt=""></li>
            <li><img src="../重要/img/3.jpg" alt=""></li>
            <li><img src="../重要/img/4.jpg" alt=""></li>
        </ul>
        <a href="javascript:void(0);" class="arrow al"><span>&lt;</span></a>
        <a href="javascript:void(0);" class="arrow ar"><span>&gt;</span></a>
        
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>

js实现代码：

<script>
        $(function(){
            
            var $size=$('.box1 li').size();  //获取图片个数      
            var count = 0;  //定义当前显示的轮播的索引
             console.log(count);
             //自动轮播
            var $t=setInterval(counts,2000);

            $('.box').hover(function(){ //当鼠标经过界面 停止定时器
                clearInterval($t);
                //清除定时器
            },function(){  //当鼠标离开 启动定时器
                $t=setInterval(counts,2000);
            });

             //添加左箭头点击事件
            $('.al').click(function(){
                // alert('ggggggggg');
                counts();
            });
            //添加右箭头点击事件
            $('.ar').click(function(){
                // alert('jjjjjjj');
                up();
            });

            //指示器轮播
            $('ol li').click(function(){
                //指示器改变
                $(this).addClass('active').siblings().removeClass('active');
                count=$(this).index();
                //轮播图改变
                $('.box1 li').eq(count).fadeIn().siblings().fadeOut(); 
            })
            //下一张
            function counts(){
                count++;
                if(count==$size){
                    count=0;
                }                            
                //根据图片的改变显示的位置变化
                $('.box1 li').eq(count).fadeIn().siblings().fadeOut();  
                //指示器改变
                $('ol li').eq(count).addClass('active').siblings().removeClass('active');                  
            }   
            //上一张
            function up(){
                count--;
                if(count==-1){
                    count=$size-1;
                }                            
                //根据图片的改变显示的位置变化
                $('.box1 li').eq(count).fadeIn().siblings().fadeOut();    
                 //指示器改变
                $('ol li').eq(count).addClass('active').siblings().removeClass('active');                                  
            }    
        });



    </script>