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

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

  • 2603
  • 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_Ray_zue 刚刚下载了一个素材
  • zerooo 刚刚下载了一个素材
  • 上学的苦谁懂 刚刚下载了一个素材
  • 一五一十一五一十一五一十一五一十一五 刚刚下载了一个素材
  • dy_旧戏书_yz8 刚刚下载了一个素材
  • 笑点 刚刚下载了一个素材
  • gt_回首_fkd4 刚刚下载了一个素材
  • 咚咚和盖盖 刚刚下载了一个素材
  • 教育咨询小武老师 刚刚下载了一个素材
  • 冰鼠 刚刚下载了一个素材
  • gt_小王子_zis6 刚刚下载了一个素材
  • 东莞刑事张律师 刚刚下载了一个素材
  • 俊俊baba 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2026  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题