<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<!--[if lt IE 9]>
<script src="js/libs/html5shiv.min.js"></script>
<script src="js/libs/respond.min.js"></script>
<![endif]-->
<style type="text/css">
html,
body {
padding: 0px;
margin: 0px;
}
.container {
position: relative;
width: 1125px;
height: 352px;
margin: 0 auto;
}
.swiper-inner {
position: relative;
width: 100%;
height: 352px;
line-height: 352px;
text-align: center;
overflow: hidden;
}
.swiper-inner img {
display: none;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.dots {
position: absolute;
width: 100%;
left: 0;
margin-top: -40px;
text-align: center;
list-style: none;
}
.dots span {
display: inline-block;
width: 40px;
height: 6px;
background: #006fc7;
margin-left: 5px;
opacity: 0.4;
filter: alpha(opacity=40);
cursor: pointer;
}
.dots .active {
opacity: 1;
filter: alpha(opacity=100);
}
.pre,
.next {
position: absolute;
top: 50%;
width: 28px;
height: 48px;
margin-top: -24px;
text-align: center;
cursor: pointer;
}
.pre:hover,
.next:hover {
opacity: 0.75;
filter: alpha(opacity=75);
}
.pre {
left: 30px;
background: url(img/pic_prev.cur);
}
.next {
right: 30px;
background: url(img/pic_next.cur);
}
</style>
</head>
<body>
<div class="container">
<div class="swiper-inner" id="swiper-inner">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>
<div class="dots" id="dots">
<span class="active dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="pre" id="pre"></div>
<div class="next" id="next"></div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
var $swiperInner = $('#swiper-inner'),
$img = $swiperInner.find('img'),
$dotSpans = $('#dots span'),
len = $img.length,
c = 0, //当前显示的图片位置
timmer;
function domInit(c) {
$img.eq(c).fadeIn(300).siblings().fadeOut(300);
$dotSpans.eq(c).addClass('active').siblings().removeClass('active');
}
function autoRun() {
timmer = setInterval(function() {
c++;
c = c >= len ? 0 : c;
domInit(c);
}, 3000);
}
//显示第一张图片
$img.eq(0).fadeIn(300);
//自动播放
autoRun();
//鼠标移入到$swiperInner时取消自动播放，离开时继续自动播放
$swiperInner.mouseenter(function() {
clearInterval(timmer);
});
$swiperInner.mouseleave(function() {
autoRun();
});
//鼠标移入到$dotSpans上，取消自动播放，显示对应的图片
$dotSpans.mouseenter(function() {
clearInterval(timmer);
c = $(this).index();
domInit(c);
});
//上一张
$('#pre').click(function() {
clearInterval(timmer);
c--;
c = c < 0 ? len - 1 : c;
domInit(c);
});
//下一张
$('#next').click(function() {
clearInterval(timmer);
c++;
c = c >= len ? 0 : c;
domInit(c);
});
</script>
</body>
</html>
相关推荐
`jquery-1.9.1.js`是未压缩的源代码版本，便于开发者阅读、调试和学习，而`jquery-1.9.1.min.js`是经过压缩和优化后的版本，体积更小，适用于生产环境，以提高页面加载速度。 jQuery 1.9.1版本是一个重要的里程碑，...
jquery-1.9.1.min.js
jquery-1.9.1版本
《jQuery 1.9.1.min.js：JavaScript库的核心精简版》 jQuery，作为一款广泛使用的JavaScript库，极大地简化了网页的DOM操作、事件处理、动画制作以及Ajax交互。在给定的文件"jquery-1.9.1.min.js"中，我们看到的是...
jQuery 1.9.1.min.js 是这个库的一个特定版本，经过压缩优化，用于在实际网站上提高性能和减少页面加载时间。 **jQuery 的主要特性** 1. **DOM 操作**：jQuery 提供了一套方便的函数来选择、遍历和操作HTML元素。...
"jquery-1.9.1.min.rar"是一个压缩包，包含了jQuery 1.9.1的最小化版本，即"jquery-1.9.1.min.js"，它是专门为优化网页性能而设计的。这个压缩包不仅提供了一个关键的JavaScript工具包，还附带了一些辅助文件，帮助...
aspectj-1.9.1.jar和aspectj-1.9.1.src.jar包。用于切面编程。 aspectj-1.9.1.jar和aspectj-1.9.1.src.jar包。用于切面编程。 aspectj-1.9.1.jar和aspectj-1.9.1.src.jar包。用于切面编程。 原来积分太高，我现在...
本资源提供的是jQuery的1.9.1版本，包含了标准的js文件和经过压缩优化的min.js文件，以满足不同场景下的需求。 一、jQuery基础 jQuery是由John Resig在2006年创建的一个开源项目，它的目标是简化JavaScript的DOM...
这个项目使用了著名的JavaScript库jQuery，版本为1.9.1，来实现这种功能，确保了良好的浏览器兼容性和执行效率。 jQuery是一个轻量级、高性能的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax...
在实际应用中，开发者应该根据项目需求和兼容性选择合适的版本。 对于跨域设置，开发者还需要了解以下关键概念： 1. **Access-Control-Allow-Origin**: 这是CORS响应头的主要字段，用于指定允许访问资源的源。 2. *...
例如，`java-property-utils-1.9.1.jar`包含了版本1.9.1的这个库，可以方便地读取和操作配置文件，使得CORS Filter的配置更加灵活。 在实际应用中，为了使用这个CORS Filter，你需要将其部署到Tomcat服务器。首先，...
jQuery UI 是基于 jQuery JavaScript 库的用户界面插件集合，它提供了一系列丰富的交互效果、可自定义的主题以及各种实用的组件。在给定的压缩包文件 "jquery-ui-1.9.1.custom" 中，我们可以看到一个针对jQuery UI ...
在本篇文章中，我们将深入探讨jQuery 1.9.1这个兼容版本，以及它包含的两个主要文件：`jquery-1.9.1.js`和`jquery-1.9.1.min.js`。 首先，jQuery 1.9.1是一个重要的里程碑，它在保持与早期版本兼容性的同时，对内部...