用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">&lt </span><span class="next">&gt</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

用jq实现轮播图片的效果相关推荐

jq实现轮播图(景深效果)——功能实现
最近工作不是很忙,正好可以多多练习一下jq,毕竟这块我实在是基础薄弱,在工作中经常会遇到各种各样的问题,导致效率很低. 今天的案例是一个自动轮播图: 上面的轮播图跟以往的轮播有点区别,常见的轮播图是只 ...
Html之实例练习（轮播图片、放大镜效果、面板拖动）
文章目录一.轮播图片二.放大镜效果三.面板拖动本篇将简单演示一下HTML里的轮播图片.放大镜效果和面板拖动的实例,代码已经打包在文章开头,需要参考的请自行下载一.轮播图片 1.效果图 2.J ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
【用HTML+CSS实现简单的轮播图片效果】
本文主要从两种方式上实现轮播图片效果方法一 ***================================================================== 本方法为渐变轮 ...
html轮播鼠标悬停效果,jQuery图片轮播加悬停效果
插件描述:jQuery图片轮播加悬停效果 =======以下内容由会员只看不发了提供============ 使用方法 1.将文档内内部样式表保存到目录css下的style.css文件中,并在页面 ...
android 手机左右移动图片轮播,js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: $('.carousel-image'). ...
游戏轮播图片-制作煽动翅膀的效果（含素材视频教程）
教程目录: 1. 小游戏展示 2. 下载游戏引擎 3. 创作一个移动的背景 4. 让阿菌煽动翅膀 5. 让阿菌模拟重力下坠 6. 让阿菌可以摸鱼 7. 编写游戏开始与结束 8. 编写 boss 剧情 ...
jquery版的图片轮播加动画效果
jquery版的图片轮播加动画效果 1.效果图展示: 2.代码呈上: <!DOCTYPE html> <html> <head><meta charset=& ...
会声会影如何制作图片轮播的视频效果
当需要进行图片展示时,常常使用图片轮播的形式进行展示,这种效果很常见并且展示效果好,该怎么制作呢?接下来,小编就教大家用视频编辑软件会声会影2020制作图片轮播的视频效果. 一. 制作单张图片滚动效果 ...
php轮播代码生成器,最简单的Banner轮播左右切换效果代码及实现思路（附带源码）...
Banner轮播左右切换效果代码及实现思路,支持左右切换图片,支持点击选择对应的图片.实现思路通过定时器去自动选图和点击触发事件去选择图片.而图片的选择是通过计算对应图片的宽度和第几张图的距离进行动画 ...

用jq实现轮播图片的效果

用jq实现轮播图片的效果

1.效果图

2.html代码

2.css代码

3.js代码

用jq实现轮播图片的效果相关推荐

最新文章

热门文章