<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>H5轮播图</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<style type="text/css">
#banner { position: relative; width: 478px; height: 286px; margin: 20px auto; overflow: hidden; }
#bannerList img { border: 0px; }
#bannerTitBg { position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px; }
#bannerTit { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer }
#bannerText { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; }
#banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 5px; }
#banner ul li { width:20px; height: 20px; line-height: 20px; text-align: center; border-radius: 10px; float: left; display: block; color: #FFF; background: #f60; font-size: 12px; margin-left: 2px;}
#banner ul li.banner-on { background-color: #06f; }
#bannerList a { position: absolute; }
</style>
<script type="text/javascript">
var t = n =0, count;
$(function(){
count=$("#bannerList a").length;
$("#bannerList a:not(:first-child)").hide();
$("#bannerTit").html($("#bannerList a:first-child").find("img").attr('alt'));
$("#bannerTit").click(function(){
window.open($("#bannerList a:first-child").attr('href'), "_blank")
});
$("#banner li").click(function() {
var i = $(this).text() -1;
n = i;
if (i >= count) return;
$("#bannerTit").html($("#bannerList a").eq(i).find("img").attr('alt'));
$("#bannerTit").unbind().click(function(){window.open($("#bannerList a").eq(i).attr('href'), "_blank")})
$("#bannerList a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("banner-on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
});
function showAuto(){
n = n >=(count -1) ?0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>
</head>
<body>
<div id="banner">
<div id="bannerTitBg"></div>
<div id="bannerTit"></div>
<ul>
<li class="banner-on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="bannerList">
<a href="#" target="_blank"><img src="img/p1.jpg" title="tit描述1" alt="alt描述1"></a>
<a href="#" target="_blank"><img src="img/p2.jpg" title="tit描述2" alt="alt描述2"></a>
<a href="#" target="_blank"><img src="img/p3.jpg" title="tit描述3" alt="alt描述3"></a>
<a href="#" target="_blank"><img src="img/p1.jpg" title="tit描述4" alt="alt描述4"></a>
</div>
</div>
</body>
</html>
效果图：
相关推荐
【标题】"jq无缝轮播 鼠标移入停止，移出滚动.zip"涉及到的是网页设计中的一个常见功能——使用HTML和jQuery实现的无缝轮播图效果，它具有交互性，即当鼠标移入轮播图时停止自动滚动，鼠标移出时恢复滚动。...
CSS3的过渡(`transition`)和动画(`animation`)属性则可以创建平滑的图片切换效果。 3. **JavaScript**： JavaScript是实现轮播动态交互的关键。它可以处理用户交互，如点击按钮切换图片，以及实现无限循环功能。...
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页和网络应用开发，而“js碎片轮播图”是指使用JavaScript实现的一种动态展示图片的特效，它能够以炫酷的方式展示多张图片，常见于网站的横幅（Banner）部分。...
基于Jquery实现的图片预览插件，支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览，下载后即可快速使用。
焦点图，也称为幻灯图或轮播图，是一种网页设计元素，它允许在一个固定的空间内展示多张图片或内容。用户可以通过手动或自动的方式浏览这些图片。在jQuery中实现焦点图，通常包括以下步骤： 1. **初始化设置**：在...
该压缩包文件“灰色斜纹jq幻灯图片整站企业模板7120_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip”包含了一个完整的网站模板，适合企业使用，尤其注重视觉效果和用户体验。模板的核心特点在于其...
这个功能使得用户在浏览网页时，可以点击小图预览模式，以弹出的方式查看全尺寸的大图，并且支持在多张图片间进行平滑切换。以下是关于这个主题的详细解释： 1. **HTML5新特性**： - `data-*` 属性：HTML5允许...
【精美html+css上下滚动,轮播(兼容ie8)】是一个基于jQuery技术实现的网页动态效果，旨在提供一种在浏览器上实现上下或左右切换的图片或文本轮播功能。这个解决方案特别强调了对IE7及更高版本的兼容性，确保在老旧...
jQuery还提供了一整套丰富的插件系统，可实现诸如轮播图、下拉菜单、表单验证等多种功能。 3. JavaScript (js)： JavaScript是一种脚本语言，主要用于网页的动态交互。它在浏览器端运行，可以改变HTML内容、处理...
这种效果能够给用户带来类似真实书籍的阅读体验，通过手指滑动即可模拟书页翻转，增强网站或应用的用户体验。... ... ...CSS3在原有的基础上增加了许多新特性，如选择器、边框、阴影、动画等。在这个项目中，CSS3的3D变换和...
images目录可能存储了插件所需的图片资源，如图标或者背景图；js目录则包含了JavaScript源代码，包括jQuery、swiper.js以及自定义的日历插件逻辑。 总的来说，这款jQuery手机端HTML5日历插件充分利用了现有的前端...
5. **相册**：HTML5的`<picture>`元素和`<source>`标签可以用来实现响应式图片加载，结合JavaScript可以创建一个交互式的相册，支持图片预览和滑动切换。 6. **表情**：HTML5引入了新的字符集，包含了许多表情符号...
【描述】中提到，这个压缩包是为了在H5环境中和Apicloud的混合式开发中创建一个可视频播放和图片展示的轮播组件。这样的设计允许用户在网页或应用程序中轻松浏览一系列的多媒体内容，提供丰富的用户体验，类似于淘宝...
本文实例为大家分享了vue实现整屏滚动切换的具体代码，供大家参考，具体内容如下 1、下载vue-awesome-swiper npm i vue-awesome-swiper -S 2、在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' ...
CSS精灵将多个小图标合并到一张大图片中，通过调整背景位置显示不同的图标。而字体图标则是将图标转化为字体形式，通过设置`content`属性和`font-family`来显示。在这个项目中，CSS类名可能与国旗关联，通过改变这些...
5. **动画效果**：在图片切换或缩放过程中，平滑的过渡动画是提升用户体验的关键。JavaScript可以结合CSS的`transition`和`animation`属性来创建这些效果。 6. **响应式设计**：为了确保在不同设备和屏幕尺寸上的...
1. **组件增强**：可能添加了新的组件，如轮播图、日期选择器、计数器等，以适应更多的业务需求。 2. **性能优化**：通过对DOM操作的优化，提高页面加载速度和响应速度，提升用户体验。 3. **API拓展**：结合jQuery...
在网页设计中，跑马灯（Carousel）是一种常见的展示手段，它可以循环播放一组内容，如图片、文字或链接，通常用在新闻轮播、产品展示等场景。而jQuery-easyAccordion则是将这种效果横向展开，使得内容以水平滑动的...
该幻灯片具备基本的功能特性，如自动轮播、左右切换箭头以及选项卡缩略图等。此外，还会提供具体的HTML结构、CSS样式以及JavaScript代码实现细节。 #### HTML结构详解 首先，我们来看一下整个幻灯片的基本HTML结构...