<!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" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style>
.banner {
width: 980px;
margin: 0 auto;
position: relative;
}
.banner,.banner .bn_box li {
height: 310px;
}
.bn_box {
position: relative;
}
.bn_box li {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.banner .b1 {
background: url(img/banner1.jpg) 0 -45px no-repeat;
}
.banner .b2 {
background: url(img/banner2.jpg) 0 -45px no-repeat;
}
.banner .b3 {
background: url(img/banner3.jpg) 0 -45px no-repeat;
}
.banner .bn_box a {
display: block;
height: 45px;
margin: 205px 0 0 30px;
width: 235px;
}
.banner ul.bn_tab {
height: 25px;
position: absolute;
bottom: 10px;
z-index: 100;
left: 0;
width: 960px;
text-align: center;
}
.banner .bn_tab li {
margin: 0 5px;
display: inline-block;
*display: inline;
}
.banner .bn_tab li a {
width: 10px;
height: 0;
padding-top: 10px;
overflow: hidden;
display: block;
border: 1px solid #a9a9ab;
color: #e0e1e3;
background: #e0e1e3;
border-radius: 15px;
}
.banner .bn_tab li a:hover {
border: 1px solid #979797;
background: #c7c7c7;
}
.banner .bn_tab li.current a {
border: 1px solid #4794ba;
background: #3eaee6
}
.banner .prev_next {
font-size: 20px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -10px;
color: #fff;
cursor: pointer;
}
.banner .prev {
margin-left: -480px;
}
.banner .next {
margin-left: 450px;
}
</style>
</head>
<body>
<div class="banner" id="banner">
<ul class="bn_box">
<li class="b1">
<a href="###"></a>
</li>
<li class="b2" style="display:none;">
<a href="###"></a>
</li>
<li class="b3" style="display:none;">
<a href="###" target="_blank"></a>
</li>
</ul>
<ul class="bn_tab">
<li class="current">
<a></a>
</li>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
</ul>
<div class="prev_next prev"><</div>
<div class="prev_next next">></div>
</div>
<script>
var bn = $("#banner");
var bn_pic = $(".bn_box li", bn);
var len = bn_pic.length;
var bn_tab = $(".bn_tab li", bn);
var prev = $(".prev", bn);
var next = $(".next", bn);
function tab(i, j) {
bn_pic.eq(j).fadeOut(1000);
bn_tab.eq(j).attr("class", "");
bn_pic.eq(i).fadeIn(1000);
bn_tab.eq(i).attr("class", "current");
}
bn_tab.click(function() {
var i = bn_tab.index(this);
var j = bn_tab.index($('#banner .current:eq(0)'));
if(i != j) {
tab(i, j);
}
});
function auto() {
var j = bn_tab.index($('#banner .current:eq(0)'));
var i = (j + 1) % len;
tab(i, j);
}
prev.click(function() {
var j = bn_tab.index($('#banner .current:eq(0)'));
var i = (j - 1) % len;
tab(i, j);
//alert("dd");
});
next.click(function() {
var j = bn_tab.index($('#banner .current:eq(0)'));
var i = (j + 1) % len;
tab(i, j);
});
//定时切换
var settime = window.setInterval(auto, 5000);
bn_pic.mouseover(function() {
window.clearInterval(settime);
});
bn_pic.mouseout(function() {
settime = window.setInterval(auto, 5000);
});
</script>
</body>
</html>
效果图：
相关推荐
【标题】"JQ轮播图代码，考呗可用"所指的知识点是关于使用jQuery库实现轮播图效果的编程技巧。jQuery是一款轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在网页设计中，轮播图是一种...
无缝轮播图是指在切换图片时没有明显的停顿或跳跃感，给人一种连续滚动的视觉效果，增加了用户体验的流畅性。 【知识点详解】 1. jQuery基础知识：首先，需要了解jQuery的基本语法，如选择器（用于选取HTML元素）...
在这个项目中，jq（jQuery）与swiper结合使用，实现了轮播图的功能。jQuery用于处理用户交互，如点击左右箭头或小图，而Swiper则负责实际的滑动动画和布局管理。通过调用Swiper的API，我们可以控制轮播图的起始位置...
【JQ H5轮播图】是一种常见的网页交互设计元素，用于展示多张图片或内容，通过自动切换或用户手动操作实现动态展示效果。在网页设计中，轮播图能够高效利用有限的空间，向访问者展示更多的信息。本文将深入探讨如何...
在移动设备上，轮播图（Carousel）是一种常见的网页元素，用于展示多张图片或内容，用户可以通过滑动或点击导航点来切换不同的项。在本主题中，我们将重点讨论如何使用jQuery（简称jq）库在移动端实现一个功能完善的...
在IT行业中，jq轮播图是一种常见的网页交互元素，它用于展示多张图片或内容，通过滑动或触摸效果实现自动或手动切换。这个压缩包包含多个基于jQuery库的轮播图插件，这些插件提供了不同的设计和功能，使得网页的动态...
JQ轮播图精简版可能并不包括所有这些功能，但它会提供核心的轮播效果，即图片或内容的自动切换。 在实现上，jQuery库提供了丰富的DOM操作和事件处理功能，使得轮播图的编程变得相对简单。主要的步骤如下： 1. 初始...
jQuery轮播图、图片切换、图片轮播 代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行...
【标题】: "JQ旋转木马JQ轮播图插件" 是一款基于JavaScript库jQuery的图片展示工具，主要用于创建动态、交互式的轮播效果。这种插件在网页设计中广泛使用，能够吸引用户的注意力并优雅地展示一系列图片或内容。 ...
"jq渐变轮播图.zip" 提供了一个使用jQuery实现的渐变效果轮播图示例，下面将详细介绍其关键知识点。 1. **jQuery库**：jQuery 是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。它提供...
在网页设计中，轮播图是一种常见的展示方式，用于在有限的空间里展示多张图片或内容。JQuery（简称为JQ）是一款广泛使用的JavaScript库，它提供了丰富的功能来简化DOM操作，使得实现轮播效果变得更加容易。本篇文章...
在这个"jq代码图片切换"的主题中，我们将深入探讨如何利用jQuery实现动态的图片切换效果，这是一种常见的增强用户体验的交互功能。 首先，我们需要理解jQuery的基本用法。jQuery的核心思想是"Write Less, Do More...
轮播图是网页设计中常见的一种动态展示多张图片或内容的组件，通过自动切换和用户交互，可以提供良好的用户体验。 首先，我们需要理解“类的封装”这一概念。在面向对象编程中，封装是将数据和操作这些数据的方法...
在环状轮播图中，通过定义特定的clip-path，可以实现图片在圆形轨道上的显示和隐藏，创造出独特的环状视觉效果。 **4. 兼容性问题** 虽然CSS3的transform和clip-path属性提供了丰富的动画效果，但它们在较老的...
**标题解析：** "JQ 自适应轮播图的Swiper插件" 指的是一种基于jQuery（简称JQ）的轮播图解决方案，它使用了名为Swiper的插件。Swiper是一款功能强大的触摸滑动插件，特别适合用于创建自适应布局的轮播图，能够自动...
【JQ 优美的轮播图】是一种使用 jQuery（简称 JQ）库实现的动态展示图片或内容的交互效果。jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计和 AJAX 交互。在网页设计中，轮播图...
"jq图片自动轮播（封装）"是一个基于jQuery库开发的插件，旨在实现图片无缝衔接的自动轮播功能，并提供手动控制选项，如通过点击左右箭头或下标来切换图片。接下来，我们将深入探讨该插件的关键知识点。 1. **...
轮播图是一种常见的网页元素，用于展示多张图片或内容，通过自动切换或者用户手动操作来浏览。在这个项目中，开发者使用了HTML、CSS和jQuery（jq）来构建这个功能。以下是对这个项目中涉及的知识点的详细解释： 1. ...
**JQ 徘徊轮播LI**是一种基于jQuery（JQ）实现的用户界面（UI）组件，主要用于创建一种特殊的轮播效果。这种轮播方式被称为“徘徊轮播”，其特点是能够动态追加新的LI（列表项）数据，使得轮播内容在前端持续更新，...