banner.css
.indexCon{width:782px;overflow:hidden;}
.indexCon .flashBanner{width:782px;height:326px;overflow:hidden;margin-bottom:12px;}
.flashBanner{position:relative;}
.flashBanner .mask{height:32px;line-height:32px;background-color:#000;width:100%;text-align:right;
position:absolute;left:0;bottom:-32px;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;overflow:hidden;}
.flashBanner .mask img{vertical-align:middle;margin-right:10px;cursor:pointer;}
.flashBanner .mask img.show{margin-bottom:3px;}
img{border:0 none;}
banner.js
$(function(){
$(".flashBanner").each(function(){
var timer;
$(".flashBanner .mask img").click(function(){
var index = $(".flashBanner .mask img").index($(this));
changeImg(index);
}).eq(0).click();
$(this).find(".mask").animate({
"bottom":"0"
},700);
$(".flashBanner").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
var show = $(".flashBanner .mask img.show").index();
if (show >= $(".flashBanner .mask img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
function changeImg (index)
{
$(".flashBanner .mask img").removeClass("show").eq(index).addClass("show");
$(".flashBanner .bigImg").parents("a").attr("href",$(".flashBanner .mask img").eq(index).attr("link"));
$(".flashBanner .bigImg").hide().attr("src",$(".flashBanner .mask img").eq(index).attr("uri")).fadeIn("slow");
}
timer = setInterval(function(){
var show = $(".flashBanner .mask img.show").index();
if (show >= $(".flashBanner .mask img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
});
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/banner.css" /> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/banner.js"></script> </head> <body> <div class="indexCon fl"> <div class="flashBanner"> <a href="###"><img class="bigImg" width="782" height="326" /></a> <div class="mask"> <img src="images/201207261743282.jpg" uri="images/201207261743282.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201109291718573.jpg" uri="images/201109291718573.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201109291719040.jpg" uri="images/201109291719040.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201207311057406.jpg" uri="images/201207311057406.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201109291718425.jpg" uri="images/201109291718425.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201207261743282.jpg" uri="images/201207261743282.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201109291718573.jpg" uri="images/201109291718573.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201109291719040.jpg" uri="images/201109291719040.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201207311057406.jpg" uri="images/201207311057406.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201109291718425.jpg" uri="images/201109291718425.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201207261743282.jpg" uri="images/201207261743282.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201109291718573.jpg" uri="images/201109291718573.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201109291719040.jpg" uri="images/201109291719040.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> <img src="images/201207311057406.jpg" uri="images/201207311057406.jpg" link="http://www.onestopweb.cn/" width="60" height="22" /> </div> </div> </div> </body> </html>
效果图：
相关推荐
在"jq带左右按钮带缩略图的图片切换"中，jQuery库扮演着核心角色，帮助我们实现图片的动态切换和缩略图的联动。 1. **图片切换**：此功能通常基于CSS和JavaScript实现，通过改变图片的显示或隐藏状态来实现图片的...
《使用jQuery实现带缩略图选项卡焦点图的前端技术详解》 在现代网页设计中，动态、交互式的用户体验已经成为不可或缺的一部分。其中，焦点图组件是提升网站视觉吸引力的重要手段，它能展示多张图片并以轮播的形式...
"带缩略图轮播效果（全屏切换）"是一种常见的网页组件，它允许用户通过点击缩略图或者使用导航箭头来浏览一系列全屏展示的图片或内容。这种功能常用于产品展示、图片画廊、幻灯片等场景，给用户带来更直观、更丰富的...
【jQuery 实现带缩略图焦点图片切换】是一种常见的网页交互设计，用于展示多张图片并以焦点图的形式进行切换，通常还包含自动播放和响应鼠标动作的功能。在这个实例中，用户通过鼠标悬停和离开来控制图片的自动播放...
在这个“jquery四屏带缩略图带箭头滚动对应banner大图切换的焦点图代码”中，我们将深入探讨如何使用jQuery实现一个功能丰富的焦点图组件。 首先，我们来看`index.html`文件，这是网页的主体部分。在这个页面中，...
【垂直滚动jQuery焦点图】是一种常见的网页动态效果，它能够以滚动的方式展示一系列图片或内容，为用户带来更丰富的视觉体验。在这个特定的案例中，焦点图是沿着垂直方向进行滚动，与传统的水平滚动有所不同，增加了...
在这个案例中，“右侧缩略图切换jQuery焦点图”是一个特别设计的jQuery插件，它提供了用户友好的交互体验，特别是在网站上展示产品图片或项目介绍时非常实用。 这个插件的特点在于它具有右侧的缩略图导航，用户可以...
今天我们继续为大家分享一款小巧而实用的jQuery焦点图，它的切换效果比较简单，仅仅是作图片的上下切换，但是效果还是...这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮缩略图，点击缩略图也可以播放图片。
分享一款右侧显示缩略图的jQuery图片轮播特效，左边显示大图片，右侧显示 缩略小图，并且每张图片对应都有描述，当前显示的图片，在缩略图上显示红色的标记。图片在变换的时候，采取上下滚动的方式轮播，十分的简洁...
本资源"jQuery带缩略图图片左右滑动切换.zip"提供了一个实现图片轮播功能的解决方案，特别适用于网站中的焦点图或幻灯片展示。 这个代码实现的核心在于通过jQuery来控制图片的左右滑动切换，并且结合了缩略图作为...
jq右侧小图焦点轮播是一款基于jquery实现的漂亮大气首页焦点轮播Banner特效代码，支持缩略小图预览，带幻灯小图标题，大图950x450像素，代码可自定义多张图。 jq右侧小图焦点轮播特效图：
本项目“jQ索引按钮 缩略图双重切换”是基于jQuery实现的一种焦点图代码，常见于网站的首页或产品展示区域，以吸引用户的注意力并提供互动体验。 首先，我们要理解焦点图的概念。焦点图，也称为幻灯片或轮播图，是...
标题 "jquery带缩略图弹性循环切换焦点图" 指的是一种网页设计技术，用于创建具有视觉吸引力的交互式图像展示。这种焦点图通常包括一个主展示区和一组缩略图，用户可以通过点击缩略图来切换主展示区中的图片，实现...
标题中的“纯色调支持缩略图和描述的焦点图代码”指的是一个JavaScript插件，它用于创建具有纯色背景、缩略图展示以及图片描述功能的焦点图效果。这种插件通常在网页设计中用于展示产品、照片集或任何需要突出显示的...
在描述中提到的垂直缩略图，指的是在主幻灯片下方或侧边显示一列缩略图，用户可以通过点击这些缩略图快速跳转到相应的主幻灯片内容。 4. **水平缩略图片**：与垂直缩略图相反，水平缩略图片通常会显示在主幻灯片的...
本资源"jquery带预览缩略图左右切换全屏效果"是一个基于jQuery实现的交互式图像展示解决方案，适用于创建高质量的图片浏览体验，尤其适合摄影网站或产品展示平台。 首先，这个功能的核心是利用jQuery来实现图片的...
有缩略图的 Carsousel 效果，其实这些特首都是一个标准的相册都应该有的。这个效果的难点主要是图片的过渡loading需要使用图片的load事件。而用来加载新图片的图片是一个Image对象。 相关说明： 必须使用 ...
9. **jquery-cool-image-slider-thumb**：这个插件很可能包含了缩略图导航的图像滑动功能，用户可以通过点击缩略图来切换主视图中的图片。 10. **jquery-hdhdp340520160105**：可能是“High Definition Display ...