一个关于焦点图(轮播图)的插件——myfoucs

简单3步,你即可以用上myFocus。

Step 1. 在html的标签内引入相关文件

提示:符合条件的情况下,引入风格文件(js/css)可省,引入myFocus库即可。 每一种风格都有一个js文件和css文件。必须都引入,且是同一类型 Step 2. 创建myFocus标准的html结构,并填充你的内容 注: 焦点图盒子里面必须包含一个class为pic的div,然后再包裹内容列表
图片加载中...
**
**
**
**
IMG标签的属性说明: src : 图片地址; *thumb* : 图片的略缩图地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址); *alt* : 图片的描述文字; *text* : 图片更详细的描述文字(需要风格支持,可以省略) Step 3. 在step1代码之后的任意一个位置调用(建议在head标签结束前调用) 注:你可以简单的调用—只设置它的盒子id,其它参数全部默认设置: myFocus.set({ id:"picBox"} ); //或详细一点的参数调用: myFocus.set({ id:'boxID',//焦点图盒子ID pattern:'mF_fancy',//风格应用的名称 time:3,//切换时间间隔(秒) trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停) width:450,//设置图片区域宽度(像素) height:296,//设置图片区域高度(像素) txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏 });

通过这3步,你应该可以在浏览器欣赏到你的杰作了。enjoy it~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于jQuery实现的HTML焦点轮播代码,支持自动轮播与手动点击: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>焦点轮播</title> <style type="text/css"> #slider { width: 600px; height: 300px; margin: 0 auto; position: relative; overflow: hidden; } #slider img { width: 600px; height: 300px; position: absolute; top: 0; left: 0; display: none; } #slider img.active { display: block; } #slider .btn { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 40px; font-size: 20px; cursor: pointer; opacity: 0.5; transition: opacity 0.3s; } #slider .btn:hover { opacity: 1; } #slider .prev { left: 0; } #slider .next { right: 0; } #slider .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1; } #slider .dots span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; margin: 0 5px; cursor: pointer; opacity: 0.5; transition: opacity 0.3s; } #slider .dots span.active { opacity: 1; } </style> </head> <body> <div id="slider"> <img src="img/1.jpg" alt="1" class="active"> <img src="img/2.jpg" alt="2"> <img src="img/3.jpg" alt="3"> <img src="img/4.jpg" alt="4"> <img src="img/5.jpg" alt="5"> <div class="btn prev"><</div> <div class="btn next">></div> <div class="dots"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { var $slider = $('#slider'); var $imgs = $slider.find('img'); var $btnPrev = $slider.find('.prev'); var $btnNext = $slider.find('.next'); var $dots = $slider.find('.dots span'); var len = $imgs.length; var index = 0; var timer; // 显示当前片和小圆点 function show() { $imgs.filter('.active').fadeOut().removeClass('active'); $imgs.eq(index).fadeIn().addClass('active'); $dots.eq(index).addClass('active').siblings().removeClass('active'); } // 自动轮播 function autoPlay() { timer = setInterval(function() { index++; if (index === len) { index = 0; } show(); }, 2000); } autoPlay(); // 鼠标悬停停止轮播,离开继续轮播 $slider.hover(function() { clearInterval(timer); }, function() { autoPlay(); }); // 点击小圆点切换片 $dots.click(function() { index = $(this).index(); show(); }); // 点击左右箭头切换片 $btnPrev.click(function() { index--; if (index === -1) { index = len - 1; } show(); }); $btnNext.click(function() { index++; if (index === len) { index = 0; } show(); }); }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值