实用资源电脑和手机通用的简约图片轮播实现方法

电脑和手机通用的简约图片轮播实现方法

这是一款简约风格的幻灯片图片轮播效果,可以自动循环播放,顶部标题栏动态显示播放的进度条。

幻灯1.png

head部分代码:

<link href="3slide_files/lrtk.css" rel="stylesheet" type="text/css" />
<script src="3slide_files/jquery-2.1.1.min.js" type="text/javascript"></script>

body部分代码:

<div class="flex">
 <ul class="slides">
  <li data-title="标题文字1">
   <img alt="" src="3slide_files/1.jpg">
  </li>
  <li data-title="标题文字2">
   <img alt="" src="3slide_files/2.jpg">
  </li>
  <li data-title="标题文字3">
   <img alt="" src="3slide_files/3.jpg">
  </li>
 </ul>
</div>
<script type="text/javascript" src="3slide_files/jflex.min.js"></script>
<script type="text/javascript">
$('.flex').jFlex({
 autoplay: true
});
</script>

本demo中的图片没有添加链接,可以自己给图片加上链接。

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/51.html