html
<!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=gb2312" />
<title>New Document</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css" rel="stylesheet">
#img_content{width:347px;height:230px;overflow:hidden;}
#img_inner{width:347px;height:230px;overflow:hidden;position:relative;background:url("http://image.et-china.com/common/bg_loading.gif") no-repeat center center;}
#img_content ul{margin:0;padding:0;list-style-type:none;overflow:hidden;}
#img_content .ul1{margin:0;padding:0;position:absolute;list-style-type:none;}
#img_content .ul1 a{cursor:pointer;}
#img_content .ul1 li{height:230px;}
#img_content .ul1 img{vertical-align:top;}
#img_content .ul2{position:absolute;right:2px;bottom:5px;z-index:2;height:21px;}
#img_content .ul2 li{float:left;width:15px;height:15px;margin:2px 3px;cursor:pointer;color:#f90;border:1px solid #f90;font-size:12px;text-align:center;background:#fff;}
#img_content .ul2 .current{width:19px;height:19px;margin:0 3px;font-size:16px;font-weight:bold;line-height:19px;background:#f90;color:#fff;border:1px solid #fff;}
/*图片轮转css结束*/
</style>
<script type="text/javascript" src="img.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload =function(){
var urlConfig = [["http://image.et-china.com/common/adpicTest1.jpg", "1","http://www.baidu.com"],
["http://image.et-china.com/common/adpicTest2.jpg","2","http://www.google.com"],
["http://image.et-china.com/common/adpicTest1.jpg","3","http://www.xunlei.com"]]
imgScroll.setUrl(urlConfig);
imgScroll.begin();
}
//]]>
</script>
</head>
<body>
<div id="img_content">
<div id="img_inner">
</div>
</div>
</body>
</html>
js
var imgScroll = {
time : null,
currentIndex : 0, //目前的图片索引
imgTotal : 0, //图片的个数
autoMark : true,
imgUrl : null, //图片的url
obj : null, //容器的id或对象
imghgt: 230, //图片的高度，即图片一次滚动的高度
nowImg: 0,
$$ : function(dom){
return typeof dom == 'string' ? document.getElementById(dom) : dom;
},
band : function(obj){
var _this = this;
return function(){
obj.apply(_this, arguments);
}
},
setUrl : function(src){
if(src){
this.imgUrl = src;
this.imgTotal = src.length;
}
},
begin : function(){
if(!this.imgUrl)
return;
var str = '<ul class="ul1" style="display:none;" id="imgKey"></ul><ul style="display:none;" class="ul2" id="imgWrap"></ul>';
var inner = this.$$("img_inner");
inner.innerHTML = str;
for(var i = 0, len = this.imgUrl.length; i < len; i++){
var li1 = document.createElement('li');
var n = this.imgUrl[i];
this.$$("imgKey").appendChild(li1);
li1.innerHTML = '<a href="' + n[2] + '" title=' + n[1] + '><img border="0" id="bigImg' + i + '"/></a>';
var li2 = document.createElement('li');
li2.id = "bigLi" + i;
li2.innerHTML = i + 1;
this.$$("imgWrap").appendChild(li2);
if(i > 0) this.$$("bigImg" + i).src = n[0];
}
this.img0 = new Image();
this.img0.src = this.imgUrl[0][0];
if(this.img0.complete){
this.callback();
return;
}
this.img0.onload = this.band(this.callback);
},
callback : function(){
this.$$("bigImg0").src = this.img0.src;
this.$$("imgKey").style.display = '';
this.$$("bigLi0").className = "current";
this.$$("imgWrap").style.display = '';
this.minhandle();
this.handle();
this.auto();
},
scroll : function(index){
clearInterval(this.time);
clearInterval(this.minTime);
var obj1 = this.$$("bigLi" + this.currentIndex);
var obj2 = this.$$("bigLi" + index);
var $obj = this.$$("imgKey"), x, y, i=0;
var cuI = this.currentIndex, imghgt = this.imghgt;
var _this = this;
this.minTime = window.setInterval(function(){
x = imghgt * ((index - cuI) / 5*(++i) + cuI);
$obj.style.top = -x + 'px';
if(i == 5){
clearInterval(_this.minTime);
obj1.className = "";
obj2.className = "current";
_this.currentIndex = index;
if(imgScroll.autoMark)
_this.auto();
}
} , 15);
},
auto : function(){
clearInterval(this.time);
this.time = setInterval(function(){
imgScroll.scroll((imgScroll.currentIndex + 1) >= imgScroll.imgTotal ? 0 : imgScroll.currentIndex + 1);
}, 3000)
},
handle : function(){
this.$$("img_content").onmouseout = function(){
imgScroll.autoMark = true;
imgScroll.auto();
};
this.$$("img_content").onmouseover = function(){
clearInterval(imgScroll.time);
};
},
minhandle : function(){
for(var j = 0; j < this.imgTotal; j++){
this.$$("bigLi" + j).onclick = function(){
imgScroll.autoMark = false;
imgScroll.scroll(parseFloat(this.innerHTML) - 1);
}
}
}
}
分享到：
相关推荐
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
描述中的“兼容性好支持图片轮播切换”指出该插件对多种浏览器和设备有良好的支持，这包括但不限于Chrome、Firefox、Safari、Edge以及移动设备上的浏览器。对于图片轮播切换功能，这通常涉及到触屏滑动事件的支持，...
本篇文章将深入探讨如何使用jQuery创建一个简单的四张图片轮播滚动切换效果。 首先，我们需要理解轮播的基本原理。图片轮播通常是通过定时改变显示的图片来实现的，同时提供手动切换选项，如左右箭头或导航点。在这...
"最好看的jquery 图片轮播图片切换特效"这个主题聚焦于如何利用jQuery库来创建引人入胜、视觉效果出色的图片轮播效果。 jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务。在创建...
本文将深入探讨“jquery图片轮播图多图切换效果（带小图左右箭头）”这一主题，包括其核心技术和实现方式。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在创建图片...
**jQuery 广告图片轮播**是一种常见的网页交互效果，用于在有限的空间内展示多张图片，提升用户体验，尤其适用于网站的首页或者产品展示区。jQuery 提供的强大选择器和动画功能使得实现这一效果变得相对容易。在这个...
在网页设计中，首页图片轮播切换是一种常见的视觉呈现方式，用于吸引用户的注意力并展示重要信息。这种效果可以使网站看起来更生动、更具交互性。本文将深入探讨如何实现这一功能，涉及JavaScript（js）和CSS（层叠...
在“JQUERY幻灯片图片轮播带进度条幻灯片图片切换”这个主题中，我们将深入探讨如何使用jQuery实现一个具有图片轮播功能的组件，同时带有进度条来展示当前轮播的状态。 首先，我们需要理解jQuery的基本用法。jQuery...
在网页设计和开发中，图片轮播是一种常见的交互元素，用于展示一组图片或内容，而“图片轮播素材 左右按钮切换 图片叠加”这一主题涵盖了几个关键知识点，包括图片轮播的设计、左右按钮的交互功能以及图片叠加效果。...
JavaScript图片轮播是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来实现连续播放。VCD包装盒个性幻灯片实例源码是一个基于JavaScript实现的图片轮播组件，它可能包含自定义样式和交互...
标题提到的"Winform全屏屏保图片轮播"是指使用C# Winform技术实现的一个全屏屏幕保护程序，它能展示一系列图片并自动进行轮播。这个屏保程序在功能上类似于Windows系统自带的屏保，但它没有复杂的过渡效果，如向左...
**标题解析：** "轮播图片切换_JS图片轮播_" 这个标题表明我们要讨论的是一个使用JavaScript（JS）实现的图片轮播效果。在网页设计中，轮播图是一种常见的展示多张图片或内容的方式，它允许用户通过自动或手动切换在...
在JavaScript的世界里，图片轮播和切换效果是网页动态展示中常见的功能，广泛应用于网站的首页、产品展示或画廊等场景。这个“js图片轮播、切换效果3”应该是一个实现图片自动循环播放和手动切换的代码示例。下面...
"点击按钮图片轮播切换"是一个自定义实现的图片轮播示例，旨在提供一种灵活的方式，让用户能够根据实际需求进行修改和定制。 在实现这种功能时，我们通常会涉及以下几个关键知识点： 1. **JavaScript**：作为主要...
一个可以在Unity进行图片轮播的demo，只需要给一个texture 2d的图片数组就可以直接用，有多种切换特效
"jquery幻灯片图片轮播带进度条幻灯片图片切换"是jQuery实现的一种常见功能，通常用于网站的首页或者产品展示区，能够吸引用户的注意力并提供良好的用户体验。下面我们将深入探讨这一主题。 首先，jQuery幻灯片图片...
5. **动画效果**：图片轮播的切换效果可以是淡入淡出、滑动等，这涉及到图形操作和动画的实现。你可以使用Graphics的DrawImage方法配合Alpha通道来实现透明度变化的过渡效果。 6. **事件处理**：控件需要响应用户的...
图片轮播是一种常见的网页元素，用于展示一组图片并自动或手动切换。在Java中，这可以通过创建一个图片数组或者集合来实现，然后利用JavaScript或者JSP内置的脚本语言（如JSTL）来控制图片的切换逻辑。 【压缩包子...
在这个主题中，“jQuery 带标题的焦点图片轮播切换代码”涉及到如何利用 jQuery 实现一个具有标题功能的图片轮播效果。 首先，我们需要理解基本的 HTML 结构，这通常包括一个容器元素来承载轮播，每个图片和对应的...
在网页设计中，图片轮播是一种常见的展示方式，它能够以动态的形式展示多张图片，增强用户体验。jQuery作为一款轻量级的JavaScript库，提供了丰富的API和插件，使得实现自适应图片轮播变得简单易行。本篇将详细介绍...