jQuery如何实现简单的图片轮播

逃离我推掉我的手 2022-05-16 01:12 230阅读 0赞

$(function(){ 
        function onImgChange(){ 
            //初始化变量
            var $imgLi=$("#scroll_img").find("li");
            var $imgLi=$("#scroll_img li");//img li
    
            var $pageLi=$("#scroll_number li");//number li
            var index=0;//当前显示图片的索引
            var stop=false;//true:轮播停止，false：轮播正常显示
    
            //1、图片轮播
            //1.1、将第1图片显示并控制样式
            $imgLi.eq(index).show().siblings().hide();
            $pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");
    
            //1.2、开启定时函数：轮播图片
            //1.2.1、图片的切换
            setInterval(function(){ 
                if(stop) return;//判断是否进行图片轮播
                index++;
                if(index>$imgLi.length) index=0;
    
                $imgLi.eq(index).show().siblings().hide();
                $pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");
            },1000);
    
            //2、改变数字：图片切换（鼠标移入和移出事件）
            //2.1、设置数字的样式
            //2.2、切换到数字对应的图片
            $pageLi.mouseover(function(){ 
                //clearInterval()
                stop=true;
                //获得当前数字所在的索引位置
                index=$pageLi.index($(this));//用于获得当前数字在数组中的下标索引
    
                $imgLi.eq(index).show().siblings().hide();
                $pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");
            }).mouseout(function(){ 
                stop=false;
            });
        }
    
        onImgChange();
    });

<div class="scroll_top"></div>
            <div class="scroll_mid">
                
                <ul id="scroll_img">
                    <li><img src="images/dd_scroll_1.jpg"/></li>
                    <li><img src="images/dd_scroll_2.jpg"/></li>
                    <li><img src="images/dd_scroll_3.jpg"/></li>
                    <li><img src="images/dd_scroll_4.jpg"/></li>
                    <li><img src="images/dd_scroll_5.jpg"/></li>
                    <li><img src="images/dd_scroll_6.jpg"/></li>
                </ul>
                
                <ul id="scroll_number">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>

//css样式:设置数字的背景颜色
    .scroll_number_out{
    }
    .scroll_number_over{
        background-color:#F96;
        color:#FFF;
    }