用jq实现轮播图片的效果
使用jq实现简单的图片轮播效果，图片自动轮播功能，左右点击滑动功能，鼠标进入数字列表时实现图片滑动功能；主要是通过操作图片数组删除和添加的元素，然后重新渲染页面的方式来实现轮播。
1.效果图
2.html代码
<h2 class="sub-header">例子：轮播</h2><div id="out_view"><ul class="img_list"></ul><!------------------------------------><ul class="number_list"></ul><span class="prev">< </span><span class="next">></span></div>
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') //图片列表ulvar number_ul = $('#out_view .number_list') //数字列表ulvar 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 //当前显示的页码默认为1var imgs_list = imgs_listvar 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 //设置点击锁为falsevar move_number = move_number?move_number:1 //用来确定图片和数字移动的个数默认为1current += 1 //当前显示图片和数字+1current = current>(imgs_list.length)?1:current //如果当前显示图片和数字大于最大值//1.把图片列表向左移动(图片个数*宽度)px,img_ul.animate({"left":`-${out_width*move_number}px`},"slow",function () {//2.然后将向左移动出去的图片剪切到图片列表的结尾,把left 改为0pxvar 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 //设置点击锁为falsevar move_number = move_number?move_number:1 //用来确定图片和数字移动的个数默认为1current -= 1 //当前显示图片和数字+1current = 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 = trueimg_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) + 1move_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
