秋痕语录

jQuery版简单轮播图


????
????????
????????
????????
????????
????????????section{
????????????margin:?101px?auto;
????????????border:?1px?solid?red;
????????????font-size:?0;
????????????text-align:?center;
????????}
????????.lunbo{
????????????margin:?0?auto;
????????????width:?500px;
????????????height:?300px;
????????????border:?1px?solid?beige;
????????????/*overflow:?hidden;*/
????????}
????????.lunbo?img{
????????????width:?500px;
????????????height:?300px;
????????????display:?none;
????????????opacity:?0;
????????}
????????button{
????????????border:?none;
????????????width:?100px;
????????????height:?50px;
????????????border-radius:10px;
????????????margin:?5px;
????????}
????????button:hover{
????????????border:?1px?solid?orangered;
????????????color:?orangered;
????????????cursor:?pointer;
????????}
????????
????
????
????????
???????????? ???????????????? ???????????????? ???????????????? ???????????????? ???????????????? ???????????????? ???????????????? ????????????
????????????上一张 ????????????下一张 ???????? ????
????var?index?=?0 ????$(".prev").click(function(){ ????????index?=?shang(); ????????show() ????}) ????$(".next").click(function(){ ????????index?=?xia(); ????????show() ????}) ????function?xia(){ ????????return?index?>=?$(".lunbo?img").length?-?1???0?:?index?+?1; ????} ????function?shang(){ ????????return?index?<=?0???$(".lunbo?img").length?-1?:?index?-1; ????} ????function?show(){ ????????$(".lunbo?img").eq(index).show() ????????$(".lunbo?img").eq(index).animate({ ????????????opacity:1 ????????},500) ????????$(".lunbo?img").eq(index).siblings(".lunbo?img").hide() ????????$(".lunbo?img").eq(index).siblings(".lunbo?img").css('opacity','0') ????} ????var?lb?=?setInterval(function(){ ????????index?=?xia(); ????????show() ????},1500) ????$(".star").mouseover(function(){ ????????clearInterval(lb) ????}) ????$(".star").mouseleave(function(){ ????????lb?=?setInterval(function(){ ????????????index?=?xia(); ????????????show() ????????},1500) ????})


打赏
0
相关文章
H5页面 浏览器唤醒/打开微信2018年11月28日
Vue封装公用方法,多页面复用2018年11月07日
Vue来回切换页面不重新加载 --keep-alive2018年11月01日
js判断是否从qq\微信浏览器打开网页2018年09月30日
js对比日期大小2018年08月20日
MUI/H5+ 仿微信扫描二维码功能2018年08月17日
pdf文件转换2018年08月15日
关于客户端解决ajax跨域及jsonp格式问题2018年08月11日
CSS3修改input输入框placeholder颜色样式2018年06月22日
css clip-path裁剪之多边形裁剪polygon2018年05月30日

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

控制面板
您好,欢迎到访网站!
??查看权限
网站分类
最新留言
文章归档
网站收藏
  • 订阅本站的 RSS 2.0 新闻聚合
友情链接

?2017 Lxy 豫ICP备17013024号
Copyright2017 lixueyang All Rights Reserved

公告

Welcome to my blog, where you will experience the thrill of not exceeding