素材8网-专注前端素材！
来源：https://www.htmlsucai.com/29765.html

旋转木马两种样式焦点图滚动特效代码

  • 2721
  • 0
  • 1

旋转木马，照片，滚动，焦点图，为到焦点图片，模糊效果

首先引入css文件和html结构html结构<div class='poster-main carousel' data-setting='{}'>
  1. <div class='poster-btn poster-prev-btn'></div>
  2. <ul class='poster-list'>
  3.   <li class="list-item"> <a href="#"><img src="./image/01.jpg" alt=""></a> </li>
  4.   <li class="list-item"> <a href="#"><img src="./image/02.jpg" alt=""></a> </li>
  5.   <li class="list-item"> <a href="#"><img src="./image/03.jpg" alt=""></a> </li>
  6.   <li class="list-item"> <a href="#"><img src="./image/04.jpg" alt=""></a> </li>
  7.   <li class="list-item"> <a href="#"><img src="./image/05.jpg" alt=""></a> </li>
  8.   <li class="list-item"> <a href="#"><img src="./image/06.jpg" alt=""></a> </li>
  9.   <li class="list-item"> <a href="#"><img src="./image/07.jpg" alt=""></a> </li>
  10.   <li class="list-item"> <a href="#"><img src="./image/08.jpg" alt=""></a> </li>
  11.   <li class="list-item"> <a href="#"><img src="./image/09.jpg" alt=""></a> </li>
  12. </ul>
  13. <div class='poster-btn poster-next-btn'></div>
  14. </div>
复制代码

配置参数是通过属性值读取的，在data-setting={}配置相关参数
  1. {
  2.     "width": 1000, //幻灯片的宽度
  3.     "height": 270, //幻灯片的高度
  4.     "posterWidth": 640, //第一帧的高度
  5.     "posterHeight": 270, //第一帧的宽度
  6.     "verticalAlign": 'middle',
  7.     "autoPlay": true,
  8.     "speed": 500,
  9.     "delay": 500,
  10.     "scale": 0.9 //记录显示比例
  11. },
复制代码

须严格按照json格式配置。在文件中引入jquery插件和carouse.js
相关素材
旋转木马两种样式焦点图滚动特效代码
  • dy_瓜瓜_e3k 刚刚下载了一个素材
  • wendyren 刚刚下载了一个素材
  • gt_大卫_j7i0 刚刚下载了一个素材
  • gouyixia 刚刚下载了一个素材
  • sinming 刚刚下载了一个素材
  • 忧郁农村入 刚刚下载了一个素材
  • 星轨 刚刚下载了一个素材
  • 泽阳 刚刚下载了一个素材
  • 松林过雨步徐徐 刚刚下载了一个素材
  • 言渡 刚刚下载了一个素材
  • dy_随遇而安_rya 刚刚下载了一个素材
  • 潮州市易帆科技 刚刚下载了一个素材
  • welegent 刚刚下载了一个素材
  • 草原酸小妞 刚刚下载了一个素材
  • dy_CC_b8q 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2026  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题