一款基于jQuery轮播切换焦点图,可播放多张图片
jQuery 基于 图片 切换 一款 轮播 焦点
2023-09-27 14:28:19 时间
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片。当然,你也可以手动切换图片,只要点击缩略图即可,这款jQuery轮播切换组件配置比较方便,唯一的不足就是只能指定8张图片,灵活性不强。效果图如下:
实现的代码。
html代码:
<div class="foucebox"> <div class="bd"> <div class="showDiv"> <a href="#"> <img src="images/1.jpg"></a> <div class="foucebox_bg"> </div> <div> <h2 style="bottom: 60px;"> <a href="#">标题</a></h2> <p style="bottom: 10px;"> 简介</p> </div> </div> <div class="showDiv"> <a href="#"> <img src="images/2.jpg"></a> <div class="foucebox_bg"> </div> <div> <h2 style="bottom: 60px;"> <a href="#">标题</a></h2> <p style="bottom: 10px;"> 简介</p> </div> </div> <div class="showDiv"> <a href="#"> <img src="images/3.jpg"></a> <div class="foucebox_bg"> </div> <div> <h2 style="bottom: 60px;"> <a href="#">标题</a></h2> <p style="bottom: 10px;"> 简介</p> </div> </div> <div class="showDiv"> <a href="#"> <img src="images/4.jpg"></a> <div class="foucebox_bg"> </div> <div> <h2> <a href="#">标题</a></h2> <p style="bottom: 10px;"> 简介</p> </div> </div> <div class="showDiv"> <a href="#"> <img src="images/5.jpg"></a> <div class="foucebox_bg"> </div> <div> <h2> <a href="#">标题</a></h2> <p style="bottom: 10px;"> 简介</p> </div> </div> <div class="showDiv"> <a href="#"> <img src="images/6.jpg"></a> <div class="foucebox_bg"> </div> <div> <h2> <a href="#">标题</a></h2> <p style="bottom: 10px;"> 简介</p> </div> </div> <div class="showDiv"> <a href="#"> <img src="images/7.jpg"></a> <div class="foucebox_bg"> </div> <div> <h2> <a href="#">标题</a></h2> <p style="bottom: 10px;"> 简介</p> </div> </div> <div class="showDiv"> <a href="#"> <img src="images/8.jpg"></a> <div class="foucebox_bg"> </div> <div> <h2> <a href="#">标题</a></h2> <p style="bottom: 10px;"> 简介</p> </div> </div> </div> <div class="hd"> <ul> <li class="on"><a href="#"> <img src="images/1.1.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li> <li><a href="#"> <img src="images/1.2.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li> <li><a href="#"> <img src="images/1.3.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li> <li><a href="#"> <img src="images/1.4.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li> <li><a href="#"> <img src="images/1.5.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li> <li><a href="#"> <img src="images/1.6.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li> <li><a href="#"> <img src="images/1.7.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li> <li><a href="#"> <img src="images/1.8.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li> </ul> </div> </div>
相关文章
- jquery cookie 用法
- Jquery控件jrumble
- 基于 jQuery Jcrop 插件的功能模块:头像剪裁
- 《WEB安全渗透测试》(24)jQuery中的XSS漏洞
- Jquery Cookie操作
- 《jQuery Cookbook中文版》——1.4 在指定上下文中选择DOM元素
- 基于HTML + jQuery + Bootstrap 4实现(Web)地铁票价信息生成系统【100010141】
- jquery json ajax三级联动
- jQuery中的closest()和parents()的差别
- 20 Best Drag and Drop jQuery Plugins--reference
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件