js简单图片轮播切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js简单图片轮播切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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=utf-8" />
<title>js简单图片轮播切换</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/js.js" type=text/javascript></script>
</head>
<body>
<center>
<div id="ifocus">
 <div id="ifocus_pic">
  <div id="ifocus_piclist" style="left:0; top:0;">
   <ul>
    <li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
    <li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
    <li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
    <li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
   </ul>
  </div>
  <div id="ifocus_opdiv"></div>
  <div id="ifocus_tx">
   <ul>
    <li class="current">忧伤在我心中沉静下来，宛如降临在寂静山林中的夜色</li>
    <li class="normal">我就像一只停泊在海滩上的小船，聆听着晚潮奏</li>
    <li class="normal">生命是上天赋予的，我们惟有献出生命，才能真正得到它</li>
    <li class="normal">今天大地在阳光下向我细语，用一种已被遗忘的语言</li>
   </ul>
  </div>
 </div>
 <div id="ifocus_btn">
  <ul>
   <li class="current"><img src="img/btn_01.jpg" alt="" /></li>
   <li class="normal"><img src="img/btn_02.jpg" alt="" /></li>
   <li class="normal"><img src="img/btn_03.jpg" alt="" /></li>
   <li class="normal"><img src="img/btn_04.jpg" alt="" /></li>
  </ul>
 </div>
</div>
</center>
</body>
</html>

JS代码(js.js):

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;
	i<iFocusBtns.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()',5000);
	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;
	i<listLength;
	i++){
	if (focusBtnList[i].className == 'current') var currentNum = i;
}
if (currentNum==0&&listLength!=1 ){
	moveElement('ifocus_piclist',0,-225,5);
	classNormal('ifocus_btn','ifocus_tx');
	classCurrent('ifocus_btn','ifocus_tx',1);
}
if (currentNum==1&&listLength!=2 ){
	moveElement('ifocus_piclist',0,-450,5);
	classNormal('ifocus_btn','ifocus_tx');
	classCurrent('ifocus_btn','ifocus_tx',2);
}
if (currentNum==2&&listLength!=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==1&&listLength==2 ){
	moveElement('ifocus_piclist',0,0,5);
	classNormal('ifocus_btn','ifocus_tx');
	classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==2&&listLength==3 ){
	moveElement('ifocus_piclist',0,0,5);
	classNormal('ifocus_btn','ifocus_tx');
	classCurrent('ifocus_btn','ifocus_tx',0);
}
}
addLoadEvent(iFocusChange);

CSS代码(css.css):

@charset "gb2312";/* CSS Document */
*{margin:0;padding:0;word-break:break-all;}
body{background:#FFF;color:#333;font:12px/1.6em Helvetica,Arial,sans-serif;}
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;}
#ifocus{width:525px;height:245px;margin:20px;border:1px solid #DEDEDE;background:#F8F8F8;}
#ifocus_pic{display:inline;position:relative;float:left;width:410px;height:225px;overflow:hidden;margin:10px 0 0 10px;}
#ifocus_piclist{position:absolute;}
#ifocus_piclist li{width:410px;height:225px;overflow:hidden;}
#ifocus_piclist img{width:410px;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(i/ifocus_btn_bg.gif) no-repeat;opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
#ifocus_opdiv{position:absolute;left:0;bottom:0;width:410px;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;}

附件:下载该文件资源,减少时间成本(增值服务)