<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>图片轮换</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document.body).ready(function() {
InitSwitchObj();
});
function InitSwitchObj() {
IMGLIST = $("#IMG_UL_LIST_1");
IMGINDEX = $("#IMG_INDEX_UL_LIST_1");
MAXINDEX = IMGLIST.find("li").length;
currIndex = 0;
currImgIndex = IMGINDEX.find("li:eq(" + currIndex + ")");
currImgLi = IMGLIST.find("li:eq(" + currIndex + ")");
currImgLi.show();
interValTime = 3000;
fadeInTime = 800
fadeOutTime = 1000;
ImageAutoSwitch();
ImageManualSwitch();
ImageStopSwitch();
}
//執行時間
var interValTime = 0;
//下一張圖片顯示時間
var fadeInTime = 0;
//上一張圖片的消失時間
var fadeOutTime = 0;
//保存當前圖片定時的對象
var imageTimer = null;
//當前的索引
var currIndex = null;
//當前圖片的所以
var currImgIndex = null;
//當前圖片
var currImgLi = null;
//記錄需要切換的圖片集合
var IMGLIST = null;
//記錄需要切換的圖片集合的索引。
var IMGINDEX = null;
//最大圖片個數
var MAXINDEX = null;
//自動定時切換。
function ImageAutoSwitch() {
if (imageTimer != null) {
clearInterval(imageTimer);
}
imageTimer = setInterval("IntervalImage()", interValTime);
}
//手動切換圖片
function ImageManualSwitch() {
IMGINDEX.find("li").each(function(i) {
$(this).hover(function() {
if (imageTimer != null) {
clearInterval(imageTimer);
}
currIndex = i;
ImageSwitchChange();
}, function() {
ImageAutoSwitch();
});
});
}
//鼠標放到圖片上的換，停止切換
function ImageStopSwitch() {
IMGLIST.find("li").each(function() {
$(this).hover(function() {
if (imageTimer != null) {
clearInterval(imageTimer);
}
}, function() {
ImageAutoSwitch();
});
});
}
//自动切换图片
function IntervalImage() {
currIndex = parseFloat(currIndex);
currIndex = currIndex + 1;
//如果切換到最大數量的時候則從頭開始
if (currIndex >= MAXINDEX) {
currIndex = 0;
}
//將原來的現實圖片索引的背景透明
ImageSwitchChange();
}
//切換圖片的時候，響應的圖片要實現漸變效果
function ImageSwitchChange() {
if (currImgIndex != null) {
currImgIndex.css({ "background-color": "transparent" });
}
currImgIndex = IMGINDEX.find("li:eq(" + currIndex + ")");
imgLi = IMGLIST.find("li:eq(" + currIndex + ")");
currImgIndex.css({ "background-color": "#999999" });
if (currImgLi != null) {
currImgLi.fadeOut(fadeOutTime, function() {
imgLi.fadeIn(fadeInTime);
});
}
currImgLi = imgLi;
}
</script>
<style type="text/css">
.img-swith-main
{
position: relative;
font-family: Arial, Verdana;
font-size: 12px;
width: 400px;
height: 300px;
background-color: #f3f3f3;
}
.img-switch
{
width: 100%;
height: 100%;
overflow: hidden;
}
.img-switch ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
width: 100%;
height: 100%;
}
.img-switch ul li
{
float: left;
width: 100%;
height: 100%;
display: none;
}
.img-switch ul li img
{
width: 100%;
height: 100%;
border: 0px;
}
.img-switch-clear
{
clear: both;
}
.img-switch-index
{
position: absolute;
bottom: 20px;
right: 20px;
overflow: hidden;
}
.img-switch-index ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.img-switch-index ul li
{
padding: 2px;
border: 1px solid #c0c0c0;
margin-right: 5px;
float: left;
font-weight: bold;
cursor: pointer;
color: Black;
padding-left: 6px;
padding-right: 6px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class='img-swith-main'>
<div class="img-switch">
<ul id="IMG_UL_LIST_1">
<li>
<img src="js/111.jpg" /></li>
<li>
<img src="js/222.jpg" /></li>
<li>
<img src="js/111.jpg" /></li>
<li>
<img src="js/222.jpg" /></li>
<li>
<img src="js/111.jpg" /></li>
</ul>
</div>
<div class='img-switch-index'>
<ul id="IMG_INDEX_UL_LIST_1">
<li id="li_index_default" style="background-color: #aaa;">01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
<div class='img-switch-clear'>
</div>
</div>
</div>
</form>
</body>
</html>
分享到：
相关推荐
"jQuery图片轮换插件"是实现这一功能的有效工具，它允许网页上的图片每隔几秒钟自动切换，使得内容展示更加动态且引人入胜。这种插件简单易用，适用于创建新闻图片展示、产品滑块等多种场景。 jQuery是一个广泛使用...
在本文中，我们将深入探讨jQuery图片切换效果的实现方法，基于提供的"jquery图片切换案例"。这九种不同的案例展示了如何使用jQuery库轻松地创建动态、吸引人的图片展示，为网页设计增添更多互动性。 首先，jQuery是...
在提供的文件名"soChange"中，我们可以推断这可能是一个具体的jQuery图片切换插件。这个插件可能包含了上述提到的所有功能，并且进行了封装，方便开发者在项目中快速集成和自定义。 ### 使用与自定义 在实际应用中...
jquery图片切换带缩略图片滚动切换
"Jquery图片切换代码"是一个基于jQuery实现的图片轮播或切换效果的解决方案，尤其考虑到它能兼容IE和火狐浏览器，这意味着它在处理不同浏览器之间的差异性上做了优化。 首先，jQuery图片切换功能的核心在于通过事件...
【jQuery图片轮换效果详解】 在网页设计中，图片轮换是一种常见的动态效果，用于吸引用户的注意力，常用于首页广告展示。"原创 jQuery 图片轮换效果"是利用JavaScript库jQuery实现的一种高效、灵活的图片切换功能。...
在这个“jQuery图片切换效果代码”中，我们可以深入探讨如何利用jQuery实现动态且吸引人的图片轮播效果。 首先，`index.html`是项目的主网页文件，它包含了HTML结构，用于展示图片切换效果。在HTML中，通常会有一个...
标题 "JQUERY图片轮换效果" 指的是使用JavaScript库jQuery实现的一种常见的网页动态效果，即图片轮播。在网页设计中，图片轮换能够吸引用户注意力，展示多张图片而无需用户手动切换，常见于网站的首页 banner 或产品...
本项目"jquery图片切换带数字js"是利用jQuery实现的一个功能，它创建了一个具备数字显示的图片播放器，能够自动进行图片切换，为用户提供更加直观的浏览体验。 首先，我们需要理解jQuery的基本概念。jQuery是由John...
jQuery图片轮换插件是一种基于jQuery库的动态效果组件，它能够自动切换图片，实现图片的无缝滚动或淡入淡出等动画效果，提升用户体验。在网页设计中，图片轮换通常用于吸引用户的注意力，展示多种信息而无需用户手动...
jQuery图片切换插件是网页开发中常用的一种组件，它基于JavaScript库jQuery，用于实现动态、交互式的图片展示效果。在网页设计中，图片切换插件能够提升用户体验，使得图片展示更加生动有趣。这类插件通常包含多种...
在"jQuery图片轮换效果"中，我们将重点关注如何使用jQuery来实现在网页上自动或手动切换多张图片。 首先，我们需要在HTML文件（如index.html）中设置基本结构。一个简单的幻灯片轮换通常包括一个容器元素来存放所有...
"jQuery 图片 切换 满屏"是一个专注于实现全屏图片轮播效果的技术主题，主要涉及到jQuery库的使用以及跨浏览器兼容性处理，特别是针对老旧的IE6、IE7和IE8版本。以下将详细讲解这个知识点。 **jQuery库的使用** ...
《jQuery图片切换插件2深度解析》 在Web开发领域，jQuery库以其简洁的API和强大的功能深受开发者喜爱。在创建动态、交互丰富的网页时，图片切换效果是必不可少的元素，能够提升用户体验，吸引用户注意力。本文将...
**jQuery图片轮换效果详解** 在网页设计中，图片轮换是一种常见的动态展示方式，能够吸引用户注意力，增强用户体验。jQuery作为一个轻量级、高性能的JavaScript库，为实现这一功能提供了丰富的工具和方法。本篇文章...
**jQuery图片轮换插件详解** 在Web开发中，图片轮换是一种常见的视觉效果，用于展示多张图片或内容，给用户带来动态的浏览体验。本文将深入探讨一个基于jQuery的图片轮换插件，该插件具有使用简单、效果优良的特点...
"JS / jQuery 图片切换焦点图"就是这样的一个功能，它利用JavaScript和jQuery库来实现动态的图片轮播效果。下面我们将深入探讨这个话题，了解如何使用jQuery创建一个高效的图片切换焦点图。 首先，jQuery是一个广泛...
**jQuery图片切换特效详解** 在Web开发中，动态图片展示是一种常见的需求，它可以吸引用户的注意力，提升用户体验。jQuery作为一个轻量级的JavaScript库，提供了丰富的API来实现各种复杂的交互效果，其中包括图片...
用jquery制作图片切换效果，图片淡隐淡现带左右按钮和分页索引图片控制，鼠标点击按钮或图片显示大图，大图淡隐淡现切换播放，提高用户体验设计是jquery 图片切换中非常常用的jquery 特效。