<!DOCTYPE html>
<html lang="en">
<head>
<title>Elastic Image Slideshow with Thumbnail Preview</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Elastic Image Slideshow with Thumbnail Preview" />
<meta name="keywords" content="jquery, css3, responsive, image, slider, slideshow, thumbnails, preview, elastic" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
<noscript>
<link rel="stylesheet" type="text/css" href="css/noscript.css" />
</noscript>
</head>
<body>
<div class="container">
<h1>Elastic Image Slideshow with Thumbnail Preview</h1>
<div class="wrapper">
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="images/large/6.jpg" alt="image06"/>
<div class="ei-title">
<h2>Passionate</h2>
<h3>Seeker</h3>
</div>
</li>
<li>
<img src="images/large/1.jpg" alt="image01" />
<div class="ei-title">
<h2>Creative</h2>
<h3>Duet</h3>
</div>
</li>
<li>
<img src="images/large/2.jpg" alt="image02" />
<div class="ei-title">
<h2>Friendly</h2>
<h3>Devil</h3>
</div>
</li>
<li>
<img src="images/large/3.jpg" alt="image03"/>
<div class="ei-title">
<h2>Tranquilent</h2>
<h3>Compatriot</h3>
</div>
</li>
<li>
<img src="images/large/4.jpg" alt="image04"/>
<div class="ei-title">
<h2>Insecure</h2>
<h3>Hussler</h3>
</div>
</li>
<li>
<img src="images/large/5.jpg" alt="image05"/>
<div class="ei-title">
<h2>Loving</h2>
<h3>Rebel</h3>
</div>
</li>
<li>
<img src="images/large/7.jpg" alt="image07"/>
<div class="ei-title">
<h2>Crazy</h2>
<h3>Friend</h3>
</div>
</li>
</ul><!-- ei-slider-large -->
<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current</li>
<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
<li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
<li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
<li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
<li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
<li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
<li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
</ul><!-- ei-slider-thumbs -->
</div><!-- ei-slider -->
<div class="reference">
<p class="demos"><a href="index.html">Demo 1</a> | <span>Demo 2 (with autoplay)<span></p>
<p>Resize the window to see the slider adjusting</p>
</div>
</div><!-- wrapper -->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
});
</script>
</body>
</html>
- 大小: 53.2 KB
分享到：
相关推荐
本示例中的"jQuery背景和banner图片一起切换全屏焦点图切换代码"是利用jQuery实现的一种交互式用户体验，它允许网页的背景图片与banner（横幅）图片同步切换，从而创造出更具吸引力的视觉效果。 首先，我们需要理解...
本资源"支持拖动条的左右切换焦点图特效代码.rar"提供了一种特别的实现方式，允许用户通过拖动滚动条来控制焦点图的切换，这不仅增强了交互性，也使得页面更加动态和有趣。 首先，我们来理解一下焦点图的基本结构。...
在本案例中，"jQuery左右滚动焦点图"是一个实用的jQuery插件，它允许用户通过点击或滑动来浏览一组图片或内容，同时具备缩略图跟随滚动的功能。这样的设计使得用户可以方便地预览和导航到他们感兴趣的特定内容。 ...
在IT行业中，图片轮播、scroll定位、蒙层跟随以及图片切换是网页设计与前端开发中的常见元素。这些功能能够提升用户体验，使网站更具吸引力。接下来，我们将详细探讨这些技术及其实现方法。 **图片轮播** 图片轮播...
这款焦点图播放器的设计目的是为网页添加一种炫彩的图片切换效果，以吸引用户的注意力并提高网页的交互性。在网页设计中，焦点图通常用于展示一系列重要或引人入胜的图片，用户可以通过点击或自动播放来浏览这些图片...
这一设计适用于全屏焦点图，左侧展示文字，右侧展示图片，从而形成一种独特的信息呈现方式。 ### 一、HTML结构基础 首先，我们需要构建基本的HTML结构，包括左右两部分——文字区域和图片滑块： ```html <!--...
本资源"jQuery实现横向手风琴图片轮播焦点图特效源码.zip"提供了使用jQuery创建一种特殊效果的代码示例，这种效果结合了横向滑动与手风琴式展开，常用于网站的图像展示或产品宣传，能够吸引用户的注意力并提升用户...
【标题】"显示标题简介的淡入淡出flash焦点图"是一种常见的网页设计技术，用于在网站上展示一组图片，并通过动态效果如淡入淡出来吸引用户注意力，提升用户体验。这种焦点图通常包含一个主图片区域，以及与图片相关...
焦点图是指在有限的空间内展示多张图片，并通过自动切换或用户交互来突出显示某一时刻的重点图片。幻灯片则是一种常见的动态展示方式，自动循环播放一组图片，常用于新闻网站、产品展示或首页装饰。 在压缩包内的...
图片轮播可能涉及定时器（`setInterval`）来切换图片，同时提供箭头或点状导航来控制播放。 四、文字特效 文字特效可以为网页增添趣味性和信息传递的多样性。比如文字滚动、闪烁、淡入淡出、随机排列等。这些效果...
2.jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效...
2. **图片转轮**：图片轮播是一种展示多张图片的高效方式，常用于首页焦点图或产品展示。HTML定义轮播容器，CSS处理样式，JS负责图片切换逻辑，如自动播放、导航点切换等。 3. **时间控件**：时间控件通常用于表单...
6. **动画与过渡效果**：iOS风格的PPT往往注重流畅的动画和过渡效果，这些元素应简洁而不突兀，帮助观众更好地跟随演讲节奏，如淡入淡出、滑动切换等。 7. **内容呈现**：在使用PPT进行演示时，内容应简洁明了，...
焦点广告的js代码实现涉及到图片切换、动画效果和交互设计。焦点广告js的实现原理包括定时器控制轮播、触发动画效果和响应式设计，确保在不同设备上都能良好显示。 二、Flash广告 Flash广告在早期网络中非常流行，...
5. **图片背景跟随鼠标移动**：一种创新的视觉效果，图片背景随着鼠标的移动而移动，创造出动态的视觉焦点。ASP可以结合JavaScript或jQuery来实现这种交互。 6. **图片拉伸效果**：这种效果可以使图片根据浏览器...
8. **滑动焦点图** (FLASH版)：焦点图是一种轮播图效果，常用于首页展示重要信息或吸引眼球的图片。FLASH版虽然在现代网页设计中已较少使用，但曾是实现动态图片切换的主流技术。 9. **不错的FAQ效果**：FAQ（常见...
`站酷（ZCOOL）首页焦点大图代码下载（flash+js）.rar`可能是一个类似于站酷首页的焦点图组件，用于展示全屏大图轮播，并可能包含过渡动画和导航控制。 `基于jQuery带排序功能的表格（JS+CSS）.rar`可能提供了一种...
3. 滑块与轮播图：滑块和轮播图常用于展示多张图片或信息，通过动态效果展示，节省空间的同时增强视觉效果。学习这些例子，可以掌握如何实现自动切换、手动滑动、过渡动画等技巧。 4. 图像处理：网页中的图像处理...
3. 自动轮换幻灯片图片：这种广告设计常用于首页焦点图，通过自动播放多张图片，展示不同的产品或服务。幻灯片功能通常包含平滑过渡效果，如淡入淡出，增加视觉吸引力。可以结合CSS3和JavaScript进行实现。 4. ...