首页图片切换代码（首页图片切换代码怎么设置）

本篇文章给大家谈谈首页图片切换代码，以及首页图片切换代码怎么设置对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、HTML图片自动切换的代码
• 2、JavaScript 的网页图片切换代码
• 3、图片铺满首页并切换的js css html代码

HTML图片自动切换的代码

script language =javascript var curIndex=0; //时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。 var timeInterval=1000; var arr=new Array(); arr[0]="photos/1.jpg"; arr[1]="photos/2.jpg"; arr[2]="photos/3.jpg"; arr[3]="photos/4.jpg"; arr[4]="photos/5.jpg"; setInterval(changeImg,timeInterval); function changeImg() { var obj=document.getElementById("obj"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } obj.src=arr[curIndex]; } /script img id=obj src ="photos/1.jpg" width=200 height=150 border =0 可以自己配置，自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用。 ------------------------------------------------------------- 第二种方法: //修改图片的宽度、高度，注意要和下面的一样，修改显示位置 style type="text/css" #img1 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:1; visibility:hidden;} #img2 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:2} /style SCRIPT LANGUAGE="JavaScript" !-- Begin var ie5=(document.getElementById document.all); var ns6=(document.getElementById !document.all);

JavaScript 的网页图片切换代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title网页特效 首页图片切换/title

style type="text/css"

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body {

background:#fff;

color:#000000;

font:12px/1.6em Helvetica, Arial, sans-serif;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#0287CA; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

legend { display:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }

table { border-collapse:collapse; }

html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iFocus style */

#ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }

#ifocus_pic { display:inline; position:relative; float:left; width:540px; height:225px; overflow:hidden; margin:10px 0 0 10px; }

#ifocus_piclist { position:absolute; }

#ifocus_piclist li { width:550px; height:225px; overflow:hidden; }

#ifocus_piclist img { width:550px; height:225px; }

#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }

#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }

#ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }

#ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }

#ifocus_tx .normal { display:none; }

/style

script type="text/javascript"

function $(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

}

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x ypos == final_y) {

return true;

}

if (xpos final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

for(var i=0; iiFocusBtns.length; i++) {

iFocusBtns[i].className='normal';

iFocusTxs[i].className='normal';

}

}

function classCurrent(iFocusBtnID,iFocusTxID,n){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

iFocusBtns[n].className='current';

iFocusTxs[n].className='current';

}

function iFocusChange() {

if(!$('ifocus')) return false;

$('ifocus').onmouseover = function(){atuokey = true};

$('ifocus').onmouseout = function(){atuokey = false};

var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');

var listLength = iFocusBtns.length;

iFocusBtns[0].onmouseover = function() {

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (listLength=2) {

iFocusBtns[1].onmouseover = function() {

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

}

if (listLength=3) {

iFocusBtns[2].onmouseover = function() {

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

}

if (listLength=4) {

iFocusBtns[3].onmouseover = function() {

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

}

}

setInterval('autoiFocus()',3500);

var atuokey = false;

function autoiFocus() {

if(!$('ifocus')) return false;

if(atuokey) return false;

var focusBtnList = $('ifocus_btn').getElementsByTagName('li');

var listLength = focusBtnList.length;

for(var i=0; ilistLength; i++) {

if (focusBtnList[i].className == 'current') var currentNum = i;

}

if (currentNum==0listLength!=1 ){

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (currentNum==1listLength!=2 ){

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (currentNum==2listLength!=3 ){

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

if (currentNum==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==1listLength==2 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==2listLength==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

}

addLoadEvent(iFocusChange);

/script

/head

body

br /

div align="center"

div id="ifocus"

div id="ifocus_pic"

div id="ifocus_piclist" style="left:0; top:0;"

ul

lia href="#" target="_blank"img src="/edu/img/js/200909/1.jpg" alt="武林三国" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/2.jpg" alt="武林英雄" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/3.jpg" alt="商业大亨" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/4.jpg" alt="帝国远征" border="0" //a/li

/ul

/div

div id="ifocus_opdiv"/div

div id="ifocus_tx"

ul

li class="current"2008年度排名第一的网页游戏/li

li class="normal"2009年最新的网页游戏 /li

li class="normal"商业大亨，挑战亿万富翁/li

li class="normal"一款2009年不得不玩的帝国远征/li

/ul

/div

/div

div id="ifocus_btn"

ul

li class="current"img src="/edu/img/js/200909/s1.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s2.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s3.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s4.jpg" alt="" //li

/ul

/div

/div

/div

/body

/html

自己改图片链接和大小~~

图片铺满首页并切换的js css html代码

需要js+css配合，我给您找段代码吧。

$(function () {

$(".dummy").click(function () { return false; });

var flipDelay = 5500;

var flipCount = $("div.banner_footer a").size(); // 图片总数

var flipId = 1;

var flipId1 = 0;

var flipTimer = null;

var flipTimer1 = null;

var i = 0;

var flip = function () {

if (flipCount 2) return;

$("div.banner_footer a").removeClass("current");

$($("div.banner_footer a").get(flipId)).addClass("current");

$($("div.banner_footer a").get(flipId)).css("current");

$("div.banner a:visible").fadeOut();

$($("div.banner a").get(flipId)).fadeIn("slow");

flipId = (flipId + 1) % flipCount;

flipTimer = window.setTimeout(flip, flipDelay);

}

flipTimer = window.setTimeout(flip, flipDelay);

$("div.banner_footer a").click(function () {

clearTimeout(flipTimer);

flipId = $("div.banner_footer a").index(this);

flip();

return false;

});

var flipserver = function () {

$("div.index_server_box a:visible").fadeOut();

$($("div.index_server_box a").get(flipId1)).fadeIn("slow");

}

$("a.index_server_left").click(function () {

flipId1 = (flipId1 - 1) % 3;

flipserver();

return false;

});

$("a.index_server_right").click(function () {

flipId1 = (flipId1 + 1) % 3;

flipserver();

return false;

});

var documentWidth = $(window).width();

var left = (documentWidth - 310) / 2;

var right = left + 306;

$("div.services_box div.left").css("width", left + "px");

$("div.services_box div.right").css("width", right + "px");

$(window).resize(function () {

var documentWidth = $(window).width();

var left = (documentWidth - 310) / 2;

var right = left + 306;

$("div.services_box div.left").css("width", left + "px");

$("div.services_box div.right").css("width", right + "px");

});

});

关于首页图片切换代码和首页图片切换代码怎么设置的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。