<!doctype html>
<title>javascript</title>
<meta charset="utf-8"/>
<style type="text/css">
<!--
dd a,nohover{
background: url("page_button.gif") ;
background-repeat: no-repeat;
background-attachment:scroll;
background-position: -15px 0;
float:right;
width:15px;
margin-right: 8px;
text-align: center;
text-decoration: none;
cursor: pointer;
line-height: 15px;
}
.hover{
background-position: 0 0;
}
-->
</style>
<h4>javascript图片轮换 </h4>
<dl style="position:relative;width: 460px;height:336px;border:solid 10px #009900;overflow: hidden;">
<dt id="changePic" style="overflow: hidden;margin: 0px;padding: 0px">
<img id="index11" alt="云的浪漫" src="1.jpg" type="changeImg">
<img id="index12" alt="夕阳与你我" src="2.jpg" type="changeImg">
<img id="index13" alt="朝阳" src="3.jpg" type="changeImg">
</dt>
<dd id="tip2" style="margin:0px;position: absolute;left: 18px;top: 753px;width:400px;height:50px; color:#fff;background:blue;size: 30px; padding-left: 20px; line-height: 45px;">
</dd>
<dd id="page" style="position: absolute;left:0px;top:304px; top:304px;right:0px;">
<a id="img3" imgTarget="3">3</a> <a imgTarget="2" id="img2">2</a> <a imgTarget="1" id="img1" class="hover">1</a>
</dd>
</dl>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
// 图片区域只显示一张图片，其余图片都是溢出隐藏来控制的 overflow: hidden;来控制的
var img1 = document.getElementById('index11'); //显示在外面的图片
var outId = document.getElementById("changePic");
var imgs = findChildred(outId);//图片数组
//图片保存的位置
var imgsTemp=[] ;
//图片换个保存的地方
for(var i=0;i<imgs.length;i++ ){
var imgJson = {};
imgJson.src = imgs[i].getAttribute('src');
imgJson.alt = imgs[i].getAttribute('alt');
imgsTemp.push(imgJson )
}
//更改图片
changePicture(img1, imgsTemp);
/**
*作用不断乱换显示图片
* changeImg 图片组总显示的那个图片
* imgs 图片组
*/
document.imgIndex = 0 ;
function changePicture( changeImg , imgs ){
(function(){
setTimeout(function(){
if((document.imgIndex+1) ==imgs.length || (document.imgIndex+1)<0 ){
document.imgIndex= 0 ;
}else{
document.imgIndex++;
}
changeImg.src = imgs[document.imgIndex].src;
var selectImg = document.getElementById( 'img'+(document.imgIndex+1));
changeSelectPage(selectImg);
//每次初始化滚动的 tip
initTip(imgs,document.imgIndex );
setTimeout( arguments.callee ,2200 );//每次重新调用 setTimeout这个函数 更改图片
},2200)
})();
}
//查找孩子节点的方法
function findChildred(domEle){
var children = [] ;
var nodes = domEle.childNodes;
for(var i=0 ;i<nodes.length ;i++ ){
if(nodes[i].nodeType==1){//如果是元素节点
children.push(nodes[i]);
}
}
return children;
}
//查找当前节点的父节点 （文档层次w3c ） 参数为dom对象
function findParentNode(domEle){
if(domEle && domEle.parentNode){
if(domEle.parentNode.nodeType==1){
return domEle.parentNode;
}else{
return findParentNode(domEle.parentNode)
}
}else{
return null;
}
}
//对象的移动
/*
* 注意：移动对象必须是绝对定位 2 移动对象在另一个对象内部，则 对象位置是相对于其外部对象的位置
* id 移动对象的id
* maxTop 对象移动的最大高度
*/
function move(id, maxTop){
var obj = document.getElementById(id);
var speed = 2;
//alert( maxTop+" ============"+obj.style.top );
(function(){
setTimeout(function(){
//speed *= 2;
var top = parseFloat(obj.style.top);
obj.style.top = (top-speed)+'px';
if(top < maxTop+3){
obj.style.top = maxTop+'px';
}else{
setTimeout(arguments.callee,25);
}
},25)
})();
}
//得到某个对象的绝对top
function getAbsoluteTop(ob){
if(!ob){return null;}
var mendingOb = ob;
var mendingTop = mendingOb .offsetTop;
while( mendingOb != null && mendingOb .offsetParent != null
&& mendingOb .offsetParent.tagName != "BODY" ){
mendingTop += mendingOb .offsetParent.offsetTop;
mendingOb = mendingOb .offsetParent;
}
return mendingTop ;
}
//得到某个对象的绝对left
function getAbsoluteLeft(ob){
if(!ob){return null;}
var mendingOb = ob;
var mendingLeft = mendingOb .offsetLeft;
while( mendingOb != null && mendingOb .offsetParent != null
&& mendingOb.offsetParent.tagName != "BODY" ){
mendingLeft += mendingOb .offsetParent.offsetLeft;
mendingOb = mendingOb .offsetParent;
}
return mendingLeft ;
}
//得到对象的宽高 ，以及位置
function getPosition( domEle ){
var position={};
position.x = parseFloat(domEle.offsetLeft);
position.y = parseFloat(domEle.offsetTop);
position.width = domEle.clientWidth;
position.height = domEle.clientHeight;
position.absoluteLeft = getAbsoluteLeft(domEle);
position.absoluteTop = getAbsoluteTop(domEle);
return position;
}
//tip 每次回到初始位置
function initTip(imgs,currentIndex){
var img11 = document.getElementById('index11');
var pos = getPosition( img11 );
var tip2 = document.getElementById('tip2');
tip2.style.left = pos.x+"px";
tip2.style.top = pos.y + pos.height+50+"px" ;
tip2.style.width = pos.width-20+"px";
tip2.innerHTML = imgs[currentIndex].alt;
if(!+"\v1"){//如果是ie
tip2.style.filter = "alpha(opacity=67)"
}else{
tip2.style.cssText += "background: rgba(164, 173, 183, .65);"
}
//alert( pos.y+pos.height-49 );
move('tip2', (pos.y+pos.height-49));
}
//添加事件处理函数
//添加自动执行的函数，文档初始化的时候会自动执行
var addEvent = (function(){
if(document.addEventListener){
return function(el,type,fn){
el.addEventListener(type,fn,false);
}
}else{
return function(el,type,fn){
el.attachEvent('on'+type,function(){
fn.call(el , window.event);
});
}
}
})();
//给分页功能添加 单击事件
var pageObj = document.getElementById('page');
var pageObjs = findChildred( pageObj);
if(pageObjs!=null){
for(var i=0;i<pageObjs.length;i++){
addEvent(pageObjs[i],'click', function(){
var witchImg = this.getAttribute('imgTarget');
//当前图像的数组下标 改为小一个，以便滚动的时候点击的这个图片可以显示出来
document.imgIndex = parseInt(witchImg)-2;
var img1 = document.getElementById('index11');
img1.src = imgsTemp[parseInt(witchImg)-1].src;
});
}
}
//改变 页码的选中
//pageObj 被选中的 超链接
function changeSelectPage( pageObj ){
var pages = findChildred(findParentNode(pageObj));
for(var i=0;i<pages.length ;i++ ){
pages[i].className = "";
pages[i].removeAttribute('class') ;
}
pageObj.className = 'hover';
}
// alert( imgsTemp[0].src +" "+imgsTemp[1].src +" "+imgsTemp[2].src );
</script>
最近正在进行js进阶，写了这个样例程序，请大家给与指点，谢谢 。
相关推荐
8. **图片轮换插件**：除了自定义代码实现，还可以利用现有的JavaScript图片轮换插件，如Slick、FlexSlider、bxSlider等。这些插件提供了丰富的配置选项和预设效果，能快速实现高质量的图片轮换功能。 9. **响应式...
在这个主题中，我们将深入探讨如何利用JS和CSS创建一个带有小缩略图的图片轮换特效。 首先，我们需要理解JS在其中的角色。JavaScript是一种轻量级的解释型编程语言，主要负责处理页面的动态交互。在图片轮换特效中...
在JavaScript（JS）编程中，实现图片轮换是一种常见的需求，尤其在动态展示多张图片或创建滑动广告效果时。这个"JS图片轮换封装中处理时钟"的主题涉及了两个关键概念：图片轮换的实现和JavaScript的计时器机制。下面...
在这个场景中，"好看的JS图片轮换2011"是一个利用JavaScript实现的图片轮播插件或库，旨在为网站添加美观且功能丰富的图片切换效果。 首先，我们来理解一下核心概念： 1. **图片轮换**：这是一种常见的网页设计...
JavaScript图片轮换是一种常见的网页动态效果，用于展示一组图片并自动进行切换，为用户提供更丰富的视觉体验。在网页设计和开发中，JavaScript结合jQuery库可以非常方便地实现这一功能。以下将详细介绍如何利用...
在JavaScript中实现图片轮换是一种常见的网页动态效果，它可以为网站增添活力，吸引用户的注意力。以下将详细介绍如何使用JavaScript来创建一个图片轮换的效果，并提供相关的知识点。 首先，我们需要了解基本的HTML...
JavaScript（JS）是实现图片轮换的核心部分。在这个项目中，`js`文件夹中的脚本文件（如`index.js`）会监听用户的行为或者定时器事件，以控制图片的切换。常见的实现方法包括： 1. **定时器**：可以使用`...
综上所述，JavaScript图片轮换特效的实现涉及到了JavaScript数组操作、DOM操作、CSS样式、定时器以及可能的用户交互等多个方面。通过合理组合这些知识点，我们可以创建出各种风格和功能的图片轮换效果，为网页增添...
实现JavaScript图片轮换显示的基本思路是创建一个图片容器，然后将所有待展示的图片作为子元素添加到这个容器中。通过设置定时器，每隔一段时间就改变图片的可见性或位置，从而达到轮换显示的效果。以下是一个简单的...
在本场景中，"js图片轮换播放"指的是使用JavaScript来实现一组图片在网页上自动或用户触发时进行循环展示的技术。这种功能常见于网站的幻灯片展示、广告轮播等部分，可以提高用户体验，增加视觉吸引力。 "鼠标放在...
JavaScript图片轮换是一种常见的网页动态效果，用于展示一组图片并按照特定顺序自动切换，通常用于广告展示、轮播图或相册等场景。在本文中，我们将深入探讨JavaScript实现图片轮换的技术细节、原理和常见方法。 ...
JavaScript图片轮换效果是一种常见的网页动态展示技术，用于在页面上自动切换一组图片，以吸引用户的注意力或展示多个相关的图像。这种效果可以增加网站的视觉吸引力，并为用户提供更丰富的交互体验。下面我们将深入...
本篇文章将详细讲解如何利用CSS、JavaScript和HTML实现一个实用的图片轮换功能。 首先，我们需要创建HTML结构，它是图片轮换的基础。一个基本的HTML布局可能包括一个容器元素（如`div`）来容纳所有的图片，以及一个...
"附带缩略图的JS图片轮换" 是一种实现方式，它结合了JavaScript和CSS技术，让用户可以预览图片的缩略图，并通过点击缩略图来切换主图。这种功能在产品展示、相册浏览等场景中非常实用。 首先，我们来看`index.html`...
在JavaScript（简称js）...总之，JavaScript图片轮换是一种常用的网页动态效果，通过结合HTML、CSS和JavaScript，我们可以创造出丰富的交互体验。在这个过程中，理解DOM操作、事件监听以及动画效果的实现是至关重要的。
【纯js的图片轮换效果】是一种常见的网页动态展示技术，尤其在制作广告展示、轮播图或产品展示等场景中应用广泛。这种效果通过JavaScript编程实现，无需依赖额外的库如jQuery，使得代码更加轻量级，加载速度更快，...
总结一下，图片轮换js代码焦点图图片切换主要涉及以下几个方面： 1. 创建HTML结构，放置要轮换的图片。 2. 使用CSS定义图片样式和动画效果。 3. 编写JavaScript代码，实现图片的自动轮换，并控制轮换间隔。 通过...