<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播图</title>
<style type="text/css">
/*base style*/
html, body, div, ul, li{ margin:0; padding:0;}
body{ font-family:\5FAE\8F6F\96C5\9ED1,'Arial'; color:#333; font-size:12px; background-color:#fff;}
img{ border:none;}
ul li{ list-style-type:none;}
/*lunbo style*/
#scrollPics{
width:560px;
height: 300px;
margin:20px auto 0 auto;
overflow: hidden;
position:relative;
}
.num{
position:absolute;
right:5px;
bottom:5px;
}
#scrollPics .num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
#scrollPics .num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
</head>
<body>
<div id="scrollPics">
<ul class="slider" >
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
<li><img src="4.jpg"/></li>
<li><img src="5.jpg"/></li>
<li><img src="1.jpg"/></li>
</ul>
<ul class="num" >
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var len = $(".num > li").length;
var index = 0; //图片序号
var adTimer;
$(".num li").mouseover(function() {
index = $(".num li").index(this); //获取鼠标悬浮 li 的index
showImg(index);
}).eq(0).mouseover();
//滑入停止动画，滑出开始动画.
$('#scrollPics').hover(function() {
clearInterval(adTimer);
}, function() {
adTimer = setInterval(function() {
showImg(index)
index++;
if (index == len) { //最后一张图片之后，转到第一张
index = 0;
}
}, 3000);
}).trigger("mouseleave");
function showImg(index) {
var adHeight = $("#scrollPics>ul>li:first").height();
$(".slider").stop(true, false).animate({
"marginTop": -adHeight * index + "px" //改变 marginTop 属性的值达到轮播的效果
}, 1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
</script>
</body>
</html>
效果图：
相关推荐
【标题】"JQ轮播图代码，考呗可用"所指的知识点是关于使用jQuery库实现轮播图效果的编程技巧。jQuery是一款轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在网页设计中，轮播图是一种...
在IT行业中，jq轮播图是一种常见的网页交互元素，它用于展示多张图片或内容，通过滑动或触摸效果实现自动或手动切换。这个压缩包包含多个基于jQuery库的轮播图插件，这些插件提供了不同的设计和功能，使得网页的动态...
【JQ H5轮播图】是一种常见的网页交互设计元素，用于展示多张图片或内容，通过自动切换或用户手动操作实现动态展示效果。在网页设计中，轮播图能够高效利用有限的空间，向访问者展示更多的信息。本文将深入探讨如何...
【标题】: "JQ旋转木马JQ轮播图插件" 是一款基于JavaScript库jQuery的图片展示工具，主要用于创建动态、交互式的轮播效果。这种插件在网页设计中广泛使用，能够吸引用户的注意力并优雅地展示一系列图片或内容。 ...
【标题】：“新手JQ学习轮播图，无缝轮播图” 在网页设计中，轮播图是一种常见的展示多张图片或内容的方式，它能够以动态的形式吸引用户的注意力。jQuery（通常简称为JQ）是一个轻量级的JavaScript库，为开发者提供...
在本主题中，我们将重点讨论如何使用jQuery（简称jq）库在移动端实现一个功能完善的轮播图。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理以及动画效果，使得创建交互式网页变得更加容易。 首先...
在这个项目中，jq（jQuery）与swiper结合使用，实现了轮播图的功能。jQuery用于处理用户交互，如点击左右箭头或小图，而Swiper则负责实际的滑动动画和布局管理。通过调用Swiper的API，我们可以控制轮播图的起始位置...
代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行轮播，并且可自定义轮播间隔时间等一...
【JQ 优美的轮播图】是一种使用 jQuery（简称 JQ）库实现的动态展示图片或内容的交互效果。jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计和 AJAX 交互。在网页设计中，轮播图...
"jq轮播结合echarts图表"是一个巧妙地将JavaScript库jQuery（jq）的轮播插件与百度开发的ECharts图表库结合的实践案例。这种结合使得数据以动态、直观的方式展示，用户可以轻松浏览和理解大量信息。 首先，我们来...
**jQuery环状轮播图插件详解** 在Web开发中，动态展示信息是吸引用户注意力的有效方式，而轮播图正是实现这一目标的常用手段。本文将深入探讨一款基于jQuery的环状轮播图插件，它具备响应式设计，能在手机等移动...
Jquery轮播图是网页设计中常用的一种动态效果，它能以吸引人的方式展示多张图片或内容。在本文中，我们将深入探讨如何使用jQuery库来创建一个功能完备的轮播图，包括基本原理、核心代码以及实际应用中的注意事项。 ...
**jQuery 轮播图（初学者）完整版** 在网页设计中，轮播图是一种常见且有效的展示多张图片或内容的方式。本教程适用于初学者，将介绍如何使用 jQuery 创建一个基本的轮播图。jQuery 是一个轻量级、功能强大的 ...
"jq图片自动轮播（封装）"是一个基于jQuery库开发的插件，旨在实现图片无缝衔接的自动轮播功能，并提供手动控制选项，如通过点击左右箭头或下标来切换图片。接下来，我们将深入探讨该插件的关键知识点。 1. **...
jQuery轮播图插件是网页设计中常用的组件，主要用于实现图片、内容的自动循环播放，为用户提供一种动态的视觉体验。在JavaScript开发中，图片展示处理是一个重要领域，而jQuery库由于其简洁的API和丰富的功能，使得...
在网页设计中，轮播图是一种常见的展示方式，用于在有限的空间内展示多张图片或内容。"jquery淡入淡出轮播图"是利用jQuery库实现的一种动态效果，为用户提供了一种优雅的图片切换体验。jQuery是一个轻量级、功能丰富...
本教程将深入讲解如何使用jQuery来封装一个轮播图组件，这对于初学者掌握面向对象编程和jQuery的实用技巧尤其有益。轮播图是网页设计中常见的一种动态展示多张图片或内容的组件，通过自动切换和用户交互，可以提供...
实现自动轮播，点击索引切换图片，点击左右按钮实现切换图片
**jQuery轮播图插件jCarousel详解** 在网页设计中，动态展示图片或内容的轮播图已经成为一种常见的交互方式，有效地吸引用户注意力并优化用户体验。jCarousel是一款基于JavaScript库jQuery的轮播插件，以其易用性和...