用jq实现轮播图片的效果

矫情吗；* 2022-01-30 09:09 291阅读 0赞

## 用jq实现轮播图片的效果 ##

**使用jq实现简单的图片轮播效果，图片自动轮播功能，左右点击滑动功能，鼠标进入数字列表时实现图片滑动功能；主要是通过操作图片数组删除和添加的元素，然后重新渲染页面的方式来实现轮播。**

## 1.效果图 ##

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

## 2.html代码 ##

## 2.css代码 ##

#out_view *{ 
                margin: 0;
                padding: 0;
            }
            ul,li{ 
                list-style: none;
            }
            #out_view{ 
                position: relative;
            }
            #out_view ul>li{ 
                float: left;
            }
            #out_view{ 
                width: 400px;
                height: 200px;
                margin: 0 auto;
                overflow: hidden;
             }
            #my_views{ 
                position: absolute;
                width: 400px;
                border: 1px solid #f70505;
            }
            #out_view ul:after{ 
                content: '';
                display: block;
                clear: both;
            }
            #out_view ul.img_list{ 
                width: 2000px;
                position: absolute;
            }
    
            #out_view ul.img_list>li{ 
                width: 400px;
                height: 200px;
            }
            #out_view ul.img_list>li img{ 
                width: 100%;
                height: 100%;
            }
            #out_view ul.number_list{ 
                position: absolute;
                bottom: 20px;
                right: 20px;
            }
            #out_view ul.number_list>li{ 
                width: 20px;
                height: 20px;
                background-color: #fff;
                font-weight: bold;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
                margin: 0 2px;
            }
            #out_view ul.number_list>li.active{ 
                background-color: #985f0d;
            }
            #out_view .prev,#out_view .next{ 
                position: absolute;
                width: 30px;
                height: 40px;
                font-weight: bold;
                font-size: 18px;
                background-color: #c4e3f3;
                text-align: center;
                line-height: 40px;
                opacity: 0.6;
                cursor: pointer;
                border-radius: 8px;
            }
            #out_view .prev{ 
                left: 10px;
                top:80px;
            }
            #out_view .next{ 
                right: 10px;
                top:80px;
            }
            #out_view>span:hover{ 
                opacity: 0.9;
                background-color: #2aabd2;
            }

## 3.js代码 ##

$(function () { 
        //存放图片的数组
        var imgs_list = [
            '/static/images/viewpager/1.jpg',
            '/static/images/viewpager/2.jpg',
            '/static/images/viewpager/3.jpg',
            '/static/images/viewpager/4.jpg',
            '/static/images/viewpager/5.jpg',
        ]
        var out_view =$('#out_view') //外层容器
        var out_width = $('#out_view').width() //外层容器的宽度
        var img_ul = $('#out_view .img_list') //图片列表ul
        var number_ul = $('#out_view .number_list') //数字列表ul
        var prev_btn = $('#out_view .prev') //左边的按钮
        var next_btn = $('#out_view .next') //右边的按钮
        var current = 1 //当前活动的图片/数字
        var click_lock = true //点击锁
        var timd_id //定时器id
        //渲染轮播的页面的函数
        function updateView(imgs_list,img_ul,number_ul,current) { 
            /** * imgs_list:图片路径数组 * img_ul:存放图片的ul * number_ul:存放数字的ul * current: 当前显示的图片 * **/
            var current = current?current:1 //当前显示的页码默认为1
            var imgs_list = imgs_list
            var img_list_html = ''
            var number_list_html = ''
            for (var i=0;i<imgs_list.length;i++){ 
                img_list_html += `<li><img src="${ imgs_list[i]}"></li>`
                number_list_html += `<li data-item=${ i+1} class="${ (current==i+1)? 'active' :''}">${ i+1}</li>`
            }
            img_ul.html(img_list_html) //生成图片列表
            number_ul.html(number_list_html) //生成数字列表
        }
        //右边边按钮事件
        function next_event(move_number){ 
            if (!click_lock ) return  //点击锁为false则不处理
            click_lock = false //设置点击锁为false
            var move_number = move_number?move_number:1  //用来确定图片和数字移动的个数默认为1
            current += 1 //当前显示图片和数字+1
            current = current>(imgs_list.length)?1:current //如果当前显示图片和数字大于最大值
            //1.把图片列表向左移动(图片个数*宽度)px,
            img_ul.animate({ "left":`-${ out_width*move_number}px`},"slow",function () { 
                //2.然后将向左移动出去的图片剪切到图片列表的结尾,把left 改为0px
                var next_del_img= imgs_list.splice(0,1*move_number)
                for (var i=0;i<next_del_img.length;i++){ 
                    imgs_list.push(next_del_img[i])
                }
                img_ul.css({ 'left':'0px'})
                updateView(imgs_list,img_ul,number_ul,current)//3.最后重新生成页面,
                click_lock = true //4.把点击锁设置为true
            })
    
        }
        //左边边按钮事件
        function prev_event(move_number){ 
            if (!click_lock ) return //点击锁为false则不处理
            click_lock = false //设置点击锁为false
            var move_number = move_number?move_number:1 //用来确定图片和数字移动的个数默认为1
            current -= 1 //当前显示图片和数字+1
            current = current<1?imgs_list.length:current //如果当前显示图片和数字小于1就改为最大值
            //1. 将图片列表的后面move_number 个图片删除,拼接到前面
            var prev_del_img= imgs_list.splice(-1*move_number,1*move_number)
            for (var i=prev_del_img.length-1;i>-1;i--){ 
                    imgs_list.unshift(prev_del_img[i])
                }
            //2.设置图片列表的left值
            img_ul.css({ "left":`-${ out_width*move_number}px`})
            //3.根据拼接好的列表重新生成页面
            updateView(imgs_list,img_ul,number_ul,current)
            //4.启动向右滑动的动画,然后设置 click_lock = true
            img_ul.animate({ "left":"0px"},1000,function () { 
                click_lock = true
            })
    
        }
        //数字列表的鼠标进入事件
        number_ul.on("mouseover","li",function () { 
            clearInterval(timd_id)
            if (!click_lock ) return //点击锁为false则不处理
            var current_number = $(this).attr('data-item')//获取当前数字
            var old_number = $(this).parent().children('.active').attr('data-item') //获取旧的数字
            move_number =  parseInt(current_number) - parseInt(old_number) //获取前后的差值
            if(parseInt(current_number) > parseInt(old_number)){  //根据当前和之前的值大小判断向左还是向右滑动
                current = parseInt(current_number) - 1  //因为next_event函数中current有-1,所以这里+1,,不然后面重新生成页面的时候数字不对
                next_event(move_number)
            }else if(parseInt(current_number) < parseInt(old_number)){ //根据当前和之前的值大小判断向左还是向右滑动
                current = parseInt(current_number) + 1
                move_number = Math.abs(move_number)
                console.log(current,move_number)
                prev_event(move_number)
            }else { 
                return
            }
        })
        updateView(imgs_list,img_ul,number_ul) //加载完成生成页面
        prev_btn.on('click',function(){   //左边点击事件
            clearInterval(timd_id)
            prev_event()
        })
        next_btn.on('click', function(){  //右边按钮点击事件
            clearInterval(timd_id)
            next_event()
        })
    
        function auto(){  //自动轮播的函数
            timd_id = setInterval(function(){ 
                next_event()
            },2000)
        }
        auto() //启用自动轮播
        out_view.mouseenter(function(){ 
            clearInterval(timd_id)
        })
         out_view.mouseleave(function(){ 
            auto() //启用自动轮播
        })
    })

仓库链接： [https://gitee.com/htg\_nice/my\_django\_demo19-4-3.git][https_gitee.com_htg_nice_my_django_demo19-4-3.git]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]: /images/20220130/de38b3ae357a4cb68d50d01a0989edcf.png
[https_gitee.com_htg_nice_my_django_demo19-4-3.git]: https://gitee.com/htg_nice/my_django_demo19-4-3.git