<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
-->
</style>
</head>
<body>
<div id="img_swicth" style="margin:100px 100px;"></div>
</body>
</html>
window.load=img_switch('img_swicth',['3.jpg','2.jpg','5.jpg'],['http://www.baidu.com','http://www.faw','http://www.126.com'],['这里是标题第一个标题','2','3'],250,200,25,true,true,'#9eafc1',0,8,18,18,'#fff','#f00',3000);
//容器DIV的ID,图片地址数组,图片链接地址数组,新闻标题数组,图片宽度,图片高度,标题框高度,是否显示标题,是否显示边框(不显示为false),边框颜色,边框填充,边框宽度,按钮宽度,按钮高度,按钮背景色,焦点按钮背景色,切换速度(毫秒));
var B=document.body;
function isIE(){
return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
function $(id){
return document.getElementById(id);
}
function $N(Names){
return document.getElementsByName(Names);
}
function C$(element){
return document.createElement(element);
}
function img_switch(receptacle,imgSrc,imgUrl,newsTitle,imgWidth,imgHeight,titleHeight,showTitle,showRim,rimColor,rimFill,rimWidth,imgButtonWidth,imgButtonHeight,imgButtonBg,imgButtonOverBg,speed){
var num=0;
var imgPlay;
count=imgSrc.length;
if(!showRim){rimWidth=0;rimFill=0;}//边框是否显示
var rim=C$('div');//外侧边框
$(receptacle).appendChild(rim);
with(rim.style){
border=rimWidth+'px solid '+rimColor;
width=imgWidth+rimFill*2+'px';
height=imgHeight+titleHeight+rimFill*2+'px';
margin='0px';
}
var img_div=C$('div');//装载图片的DIV
rim.appendChild(img_div);
with(img_div.style){
width=imgWidth+'px';
height=imgHeight+titleHeight+'px';
margin=rimFill+'px';
overflow='hidden';
zIndex=900;
}
var img_a=C$('a');//图片链接A标签
img_div.appendChild(img_a);
img_a.target='_blank';
img_a.id='img_a';
with(img_a.style){
display='block';
width=imgWidth+'px';
height=imgHeight+'px';
overflow='hidden';
}
var Img=C$('img');//图片
img_a.appendChild(Img);
Img.border='0';
Img.height=imgHeight;
Img.width=imgWidth;
Img.src=imgSrc[0];
Img.id='img_Id';
var o_img_div=C$('div');//标题框
img_div.appendChild(o_img_div);
o_img_div.id='o_img_div';
with(o_img_div.style){
height=titleHeight+'px';
lineHeight=titleHeight+'px';
width=imgWidth+'px';
background='#9eafc1';
position='relative';
bottom=0+'px';
overflow='hidden';
}
for(i=count;i>0;i--){
var img_button=C$('a');//数字按钮
img_div.appendChild(img_button);
img_button.id='img_button_'+i;
with(img_button.style){
position='relative';
display='block';
height=imgButtonHeight+'px';
lineHeight=imgButtonHeight+'px';
width=imgButtonWidth+'px';
textAlign='center';
background=imgButtonBg;
if (isIE()) {
styleFloat='right';
}else{
cssFloat='right';
}
marginRight='1px';
fontSize='12px';
color='#ffffff';
fontWeight='bold';
cursor='pointer';
zIndex=901;
bottom=titleHeight+imgButtonHeight+5+'px';
}
img_button.innerHTML=i;
}
var title_button=C$('a');//文字标题
o_img_div.appendChild(title_button);
title_button.id='title_button';
title_button.target='_blank';
with(title_button.style){
position='relative';
display='block';
height=imgButtonHeight+'px';
lineHeight=imgButtonHeight+'px';
width=imgWidth-15+'px';
textAlign='left';
textDecoration='none';
if (isIE()) {
styleFloat='right';
}else{
cssFloat='right';
}
marginRight='8px';
marginTop=Math.round((titleHeight-imgButtonHeight)/2)+5+'px';
fontSize='12px';
color='#000';
cursor='pointer';
overflow='hidden';
}
if(!showTitle){title_button.style.display='none'}
for(i=1;i<=count;i++){//按钮点击触发
$('img_button_'+i).onclick=function(){clearTimeout(imgPlay); play(this);}
}
this.play=function(position){//开始播放
if(typeof(position)!='undefined')num=parseInt(position.innerHTML)-1;
if(isIE()){//---IE----
$('img_Id').style.filter='revealTrans(Duration=1,Transition='+Math.round(Math.random()*23)+')';
$('img_Id').filters[0].apply();
$('img_Id').filters[0].play();
$('img_Id').src=imgSrc[num];
$('title_button').innerHTML=newsTitle[num];
$('title_button').href=imgUrl[num];
for(j=1;j<=count;j++){
$('img_button_'+j).style.backgroundColor=imgButtonBg;
$('img_button_'+j).style.color='#666';
}
$('img_button_'+(num+1)).style.backgroundColor=imgButtonOverBg;
$('img_button_'+(num+1)).style.color='#fff';
}
else{//---其他浏览器---
$('img_Id').src=imgSrc[num];
$('title_button').innerHTML=newsTitle[num];
$('title_button').href=imgUrl[num];
for(j=1;j<=count;j++){
$('img_button_'+j).style.backgroundColor=imgButtonBg;
$('img_button_'+j).style.color='#666';
}
$('img_button_'+(num+1)).style.backgroundColor=imgButtonOverBg;
$('img_button_'+(num+1)).style.color='#fff';
}
$('title_button').title=$('title_button').innerHTML;
$('img_a').href=$('title_button').href;
num++;
num=num>=count?0:num;
imgPlay=setTimeout('play()',speed);
}
$('title_button').onfocus=function(){this.blur();}
$('title_button').onmouseover=function(){this.style.color='#f00';}
$('title_button').onmouseout=function(){this.style.color='#000';}
play();
}
分享到：
相关推荐
JavaScript图片轮换是一种常见的网页动态效果，用于展示一组图片并按照特定顺序自动切换，通常用于广告展示、轮播图或相册等场景。在本文中，我们将深入探讨JavaScript实现图片轮换的技术细节、原理和常见方法。 ...
JavaScript图片轮换是一种常见的网页动态效果，用于展示一组图片并自动进行切换，为用户提供更丰富的视觉体验。在网页设计和开发中，JavaScript结合jQuery库可以非常方便地实现这一功能。以下将详细介绍如何利用...
在JavaScript（JS）编程中，实现图片轮换是一种常见的需求，尤其在动态展示多张图片或创建滑动广告效果时。这个"JS图片轮换封装中处理时钟"的主题涉及了两个关键概念：图片轮换的实现和JavaScript的计时器机制。下面...
在这个场景中，"好看的JS图片轮换2011"是一个利用JavaScript实现的图片轮播插件或库，旨在为网站添加美观且功能丰富的图片切换效果。 首先，我们来理解一下核心概念： 1. **图片轮换**：这是一种常见的网页设计...
在这个主题中，我们将深入探讨如何利用JS和CSS创建一个带有小缩略图的图片轮换特效。 首先，我们需要理解JS在其中的角色。JavaScript是一种轻量级的解释型编程语言，主要负责处理页面的动态交互。在图片轮换特效中...
JavaScript（JS）是实现图片轮换的核心部分。在这个项目中，`js`文件夹中的脚本文件（如`index.js`）会监听用户的行为或者定时器事件，以控制图片的切换。常见的实现方法包括： 1. **定时器**：可以使用`...
在本场景中，"js图片轮换播放"指的是使用JavaScript来实现一组图片在网页上自动或用户触发时进行循环展示的技术。这种功能常见于网站的幻灯片展示、广告轮播等部分，可以提高用户体验，增加视觉吸引力。 "鼠标放在...
综上所述，JavaScript图片轮换特效的实现涉及到了JavaScript数组操作、DOM操作、CSS样式、定时器以及可能的用户交互等多个方面。通过合理组合这些知识点，我们可以创建出各种风格和功能的图片轮换效果，为网页增添...
**JavaScript 图片轮换效果...总的来说，JavaScript图片轮换效果是一个涉及前端基础、动画设计和用户体验的综合实践。通过不断学习和实践，我们可以创建出更加丰富、互动性强的图片展示效果，提升网站的整体吸引力。
实现JavaScript图片轮换显示的基本思路是创建一个图片容器，然后将所有待展示的图片作为子元素添加到这个容器中。通过设置定时器，每隔一段时间就改变图片的可见性或位置，从而达到轮换显示的效果。以下是一个简单的...
JavaScript图片轮换效果是一种常见的网页动态展示技术，用于在页面上自动切换一组图片，以吸引用户的注意力或展示多个相关的图像。这种效果可以增加网站的视觉吸引力，并为用户提供更丰富的交互体验。下面我们将深入...
"附带缩略图的JS图片轮换" 是一种实现方式，它结合了JavaScript和CSS技术，让用户可以预览图片的缩略图，并通过点击缩略图来切换主图。这种功能在产品展示、相册浏览等场景中非常实用。 首先，我们来看`index.html`...
"附带缩略图的JS图片轮换"是一个基于JavaScript实现的图片轮换解决方案，它不仅提供了主图片的轮换，还带有缩略图导航，让用户能够直观地看到所有可切换的图片，并手动选择查看。这种功能常用于网站的幻灯片展示、...
【JS图片轮换广告代码】是一种常见的网页动态效果，它通过JavaScript编程语言实现，用于在网页上自动切换显示多张图片，通常用于广告展示或图片画廊。这种技术可以增加用户体验，吸引用户注意力，尤其在有限的空间内...
ASP JS图片轮换是一种常见的网页动态效果，常用于商品展示或项目多图展示，以吸引用户的注意力并提供丰富的视觉体验。这种技术结合了ASP（Active Server Pages）后端编程和JavaScript前端脚本语言，实现图片在网页上...
首先，我们要理解"纯JS图片轮换代码"的含义。纯JavaScript意味着不依赖任何外部库，如jQuery，而是直接使用原生的JavaScript API来编写代码。这种技术对于优化页面加载速度和减少依赖性非常有帮助。五屏切换则是指...
在本场景中，"js图片轮换效果"指的是使用JavaScript技术来实现图片在网页上的自动切换，以达到展示多张图片或增加视觉吸引力的目的。这种效果在网站设计中十分常见，比如广告轮播、幻灯片展示等。 图片轮换效果的...