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

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

  • 1055
  • 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
相关素材
旋转木马两种样式焦点图滚动特效代码
  • QABILTechnology 刚刚下载了一个素材
  • 劉8373 刚刚下载了一个素材
  • 紫槿 刚刚下载了一个素材
  • 萤火之光 刚刚下载了一个素材
  • 爱上吃香菜的女 刚刚下载了一个素材
  • 老Van佟丶 刚刚下载了一个素材
  • LAND 刚刚下载了一个素材
  • qqxJ5 刚刚下载了一个素材
  • Teamspirit 刚刚下载了一个素材
  • HungNguyen 刚刚下载了一个素材
  • 叶9873 刚刚下载了一个素材
  • batfIaps 刚刚下载了一个素材
  • FFei 刚刚下载了一个素材
  • 往来之间 刚刚下载了一个素材
  • A恒太前台 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题