利用jQuery实现轮播图效果
今天给大家带来的就是使用jQuery实现一个简单的轮播图,实现的原理就是:
1、在一个区域内,设置宽高,超出这部分区域就要实现一个隐藏
2、获取图片的大小 为300,索引从0开始
3、当你点击右边的按钮时候,就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px
4、当他实现滑动的时候,加一个animate动画的效果,就欧了
5、右边的效果和左边的一样,都是同理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; } .uli{ width: 300px; height: 300px; display: flex; overflow: hidden; } .uli li>img{ position: relative; left: 0px; top: 0px; height: 300px; } .uli li{ width: 300px; height: 300px; list-style:none; } .a1{ position: absolute; top: 100px; left: 0; cursor: pointer; font-size: 50px } .a2{ position: absolute; top: 100px; left: 260px; cursor: pointer; font-size: 50px } </style> </head> <body> <!-- 设置ul li 中 图片的数量 饮料的数量--> <ul class="uli"> <li><img src="./img/大冰红茶.png" alt=""></li> <li><img src="./img/大蜂蜜绿茶.png" alt=""></li> <li><img src="./img/大龙井绿茶.png" alt=""></li> </ul> <!-- 两个 div 中的 span 控制右边的便签和左边的标签为点击事件 --> <div class="pa1"> <span class="a1"><</span> <span class="a2">></span> </div> <script type="text/javascript"> // 写一个入口函数 $(function(){ // 设置图片的大小 var img = 300; // 设置索引为 0 var index = 0; // 设置图片的数量的长度 var option = $('.uli>li img').length; // 左边部分开始 $('.a2').click(function(){ // 再点击事件里面执行回调函数 left() }) // 函数名称 lest function left(){ // index的索引值为 0 当他小于图片的长度的时候 就让他执行 ++ option要执行减 1 否则会有一张空白的页面 if (index < option-1) { index++ }else { index = 0 } move() } // 左边部分结束 // 右边部分开始 $('.a1').click(function(){ // 再点击事件里面执行回调函数 right() }) function right(){ // index的索引值为 0 当他大于图片的长度的时候 就让他执行 -- if (index > 0) { index-- }else { index = option-1 } move() } // right left函数里面都有 move 就等于你点击你的 index 索引的时候为多少数值就会有几个图片滑过 500 为时间 function move(){ var a = -index * img + 'px' $('.uli li>img').animate({'left':a},500) } }) </script> </body> </html>
这是以上的代码,大家可以动手试试小案例。
效果图让大家一睹为快。
视频放不出来只能看图片了。
目前的状况就是这样哈
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
jQuery动画效果淡入浅出想必大家都有见到过吧,其实很很简单,通过fadeIn fadeOut方法便可轻松实现,具体如下,喜欢的朋友可以参考下,希望对大家有所帮助2013-08-08jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
这篇文章主要介绍了jQuery实现点击后高亮背景固定显示的菜单效果,可实现鼠标点击菜单项后呈现出鼠标滑过一样的背景高亮显示效果,同时该显示效果固定不变,需要的朋友可以参考下2016-09-09jQuery实现获取form表单内容及绑定数据到form表单操作分析
这篇文章主要介绍了jQuery实现获取form表单内容及绑定数据到form表单操作,结合jQuery封装插件操作分析了jQuery针对form表单的serializeJson数据获取及setForm数据绑定相关操作技巧,需要的朋友可以参考下2018-07-07在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
这篇文章主要介绍了在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南,需要的朋友可以参考下2014-12-12jquery load事件(callback/data)使用方法及注意事项
jquery load 事件使用方法,在网上有很多的相关介绍文章,不过大同小异,本文老生长谈,也介绍一下load事件使用方法,感兴趣的朋友可以了解下,或许对你学习jquery有所帮助2013-02-02
最新评论