2019獨角獸企業重金招聘Python工程師標準>>>

本例演示地址：http://www.beijibear.com/myplugins/圖片切換/topi.html

源碼如下：
<style type="text/css">
body {font-size: 12px;margin: 0px;padding: 0px;}
#ifocus {width:690px;height:180px;background:#F8F8F8;}
#ifocus_pic { display:inline; position:relative; float:left; width:690px; height:180px; overflow:hidden; margin:0; }
#ifocus_piclist { position:absolute;text-align:left; }
#ifocus_piclist ul{margin:0;padding:0px;list-style:none;width:690px;}
#ifocus_piclist li { width:690px; height:180px; overflow:hidden; }
#ifocus_piclist img {width:690px;height:180px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;}
#ifocus_btn { position:absolute;left:0px; top:145px; text-align:right; width:100%; float:right; margin:9px 9px 1px 0; color:#000000;}
#ifocus_btn ul{margin:0;list-style:none;float:right;}
#ifocus_btn li{float:left; text-align:center; width:20px; background: #FFFFCC; font-weight:bold; margin:0px 2px 0px 2px; line-height:20px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_btn .current { background: #FFFFFF; font-weight:bold; color:#275604; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
#ifocus_opdiv {
??? position:absolute;
??? left:0;
??? bottom:0;
??? width:690px;
??? height:35px;
??? background:#38A22D;
??? opacity:0.5;
??? -moz-opacity:0.5;
??? filter:alpha(opacity=50);
??? background-color: #38A22D;
}
#ifocus_tx { position:absolute; float:right;left:20px; bottom:10px; color:#FFFFFF; font-weight:bold;}
#ifocus_tx ul{margin:0;list-style:none;width:100%;}
#ifocus_tx .current{}
#ifocus_tx .normal {display:none; }
</style>
<SCRIPT language="javascript">
var Image_Height = 185;
var Image_Num = 10;
var Image_Pos,Image_Posauto;

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() {
??? ??? ??? Image_Pos = (1-2)*Image_Height;
??? ??? ??? moveElement('ifocus_piclist',0,Image_Pos,5);
??? ??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? ??? classCurrent('ifocus_btn','ifocus_tx',1);
??? ??? }
??? }
??? if (listLength>=3) {
??? ??? iFocusBtns[2].onmouseover = function() {
??? ??? ??? Image_Pos = (1-3)*Image_Height;
??? ??? ??? moveElement('ifocus_piclist',0,Image_Pos,5);
??? ??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? ??? classCurrent('ifocus_btn','ifocus_tx',2);
??? ??? }
??? }
??? if (listLength>=4) {
??? ??? iFocusBtns[3].onmouseover = function() {
??? ??? ??? Image_Pos = (1-4)*Image_Height;
??? ??? ??? moveElement('ifocus_piclist',0,Image_Pos,5);
??? ??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? ??? classCurrent('ifocus_btn','ifocus_tx',3);
??? ??? }
??? }
??? if (listLength>=5) {
??? ??? iFocusBtns[4].onmouseover = function() {
??? ??? ??? Image_Pos = (1-5)*Image_Height;
??? ??? ??? moveElement('ifocus_piclist',0,Image_Pos,5);
??? ??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? ??? classCurrent('ifocus_btn','ifocus_tx',4);
??? ??? }
??? }
??? if (listLength>=6) {
??? ??? iFocusBtns[5].onmouseover = function() {
??? ??? ??? Image_Pos = (1-6)*Image_Height;
??? ??? ??? moveElement('ifocus_piclist',0,Image_Pos,5);
??? ??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? ??? classCurrent('ifocus_btn','ifocus_tx',5);
??? ??? }
??? }
??? if (listLength>=7) {
??? ??? iFocusBtns[6].onmouseover = function() {
??? ??? ??? Image_Pos = (1-7)*Image_Height;
??? ??? ??? moveElement('ifocus_piclist',0,Image_Pos,5);
??? ??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? ??? classCurrent('ifocus_btn','ifocus_tx',6);
??? ??? }
??? }
??? if (listLength>=8) {
??? ??? iFocusBtns[7].onmouseover = function() {
??? ??? ??? Image_Pos = (1-8)*Image_Height;
??? ??? ??? moveElement('ifocus_piclist',0,Image_Pos,5);
??? ??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? ??? classCurrent('ifocus_btn','ifocus_tx',7);
??? ??? }
??? }
??? if (listLength>=9) {
??? ??? iFocusBtns[8].onmouseover = function() {
??? ??? ??? Image_Pos = (1-9)*Image_Height;
??? ??? ??? moveElement('ifocus_piclist',0,Image_Pos,5);
??? ??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? ??? classCurrent('ifocus_btn','ifocus_tx',8);
??? ??? }
??? }
}

setInterval('autoiFocus()',2000);
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==(listLength-1) ){
??? ??? moveElement('ifocus_piclist',0,0,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',0);
??? }
??? Image_Posauto = (currentNum+1)*(-1)*Image_Height;
??? if (currentNum==0&&listLength!=1 ){
??? ??? moveElement('ifocus_piclist',0,Image_Posauto,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',1);
??? }
??? if (currentNum==1&&listLength!=2 ){
??? ??? moveElement('ifocus_piclist',0,Image_Posauto,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',2);
??? }
??? if (currentNum==2&&listLength!=3 ){
??? ??? moveElement('ifocus_piclist',0,Image_Posauto,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',3);
??? }
??? if (currentNum==3&&listLength!=4 ){
??? ??? moveElement('ifocus_piclist',0,Image_Posauto,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',4);
??? }
??? if (currentNum==4&&listLength!=5 ){
??? ??? moveElement('ifocus_piclist',0,Image_Posauto,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',5);
??? }
??? if (currentNum==5&&listLength!=6 ){
??? ??? moveElement('ifocus_piclist',0,Image_Posauto,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',6);
??? }
??? if (currentNum==6&&listLength!=7 ){
??? ??? moveElement('ifocus_piclist',0,Image_Posauto,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',7);
??? }
??? if (currentNum==7&&listLength!=8 ){
??? ??? moveElement('ifocus_piclist',0,Image_Posauto,5);
??? ??? classNormal('ifocus_btn','ifocus_tx');
??? ??? classCurrent('ifocus_btn','ifocus_tx',8);
??? }

}
addLoadEvent(iFocusChange);


function setfuc(id)
{
??? my_getbyid("tour_sbtn").className = 'index_select_out'
??? my_getbyid("hotel_sbtn").className = 'index_select_out'
??? my_getbyid("ship_sbtn").className = 'index_select_out'
??? my_getbyid(id+"_sbtn").className = 'index_select_on';
??? my_getbyid("tour").style.display = "none"
??? my_getbyid("hotel").style.display = "none"
??? my_getbyid("ship").style.display = "none"
??? my_getbyid(id).style.display = "block";
???
}
</SCRIPT>

<DIV id=ifocus>
<DIV id=ifocus_pic>
<DIV style="TOP: 0px; LEFT: 0px" id=ifocus_piclist>
<UL>
<LI><A href="#" target="_blank"><IMG alt="aa" src="img/news-1.jpg" width="500"></A></LI><LI><A href="#" target="_blank"><IMG alt="bb" src="img/news-2.jpg" width="500"></A></LI><LI><A href="#" target="_blank"><IMG alt="cc" src="img/news-3.jpg" width="500"></A></LI>
</UL></DIV>
<DIV id=ifocus_opdiv></DIV>
<DIV id=ifocus_tx>
<UL>
<LI class="current">aa</LI><LI class="normal">bb</LI><LI class="normal">cc</LI>
</UL></DIV>
<DIV id=ifocus_btn>
<UL>
<LI class=current>1 </LI><LI class=normal>2 </LI><LI class=normal>3 </LI>
</UL></DIV></DIV></DIV>

轉載于:https://my.oschina.net/u/861770/blog/91980

總結

以上是生活随笔為你收集整理的JS实现图片轮换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。