/*

思路總結：

1.實現圖片滾動的function、鼠標經時候獲取當前li的index、設置ndex自己主動遞增的函數、實現淡入淡出效果的函數

2.整個實現效果一傳遞index為主線

3.我的編寫代碼過程

---->a.先編寫好實現圖片切換的函數，這里主要是包括for歷遍所以圖片并設置display為none和傳遞index(這里把index賦值給inew)；

---->b.編寫鼠標經過時候獲取index，這里必須通過歷遍和賦值把鼠標經過的index賦值個inew，并傳遞給能夠實現圖片切換的函數move()；

---->c. 編寫實現圖片淡入淡出的效果函數

---->d.move()函數的功能實現能夠在編寫鼠標經過li的事件和編寫淡入淡出函數的時候飛開編寫進去 ，這樣思路就會順暢一點

*/

/p>

"http://www.w3.org/TR/html4/loose.dtd">

*{margin:0;padding:0;}

#wrap{

width:500px;height:375px;overflow:hidden;margin:0 auto;

position:relative;;

}

#list{

position:absolute;

bottom:10px;

right:10px;

}

ul{

list-style: none;

}

li{float:left;width:20px;height:20px;margin:1px 1px;

border:1px #333333 dashed;text-align: center;line-height:

20px;background-color:aquamarine;}

.active{background-color:royalblue;}//鼠標經過li的時候，調用的樣式

window.οnlοad= function ds() {

var im = document.getElementById("box").getElementsByTagName("img");

var list= document.getElementById("list").getElementsByTagName("li");

var timer;

var timers;//這里一共須要兩個定時器，一個是針對自己主動切換圖片的，一個是針對實現淡入淡出效果的

var inew=0;

var al=1;

function cgs(){

im[inew].style.filter="alpha(opacity="+al+')';

im[inew].style.opacity=al/100;

if(al<100){

al+=2;

}

}

function move() {

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

list[i].className="";//這里必須是數組

im[i].style.display = "none";

al=0;

clearInterval(timers);

}

im[inew].style.display = "block";

list[inew].className="active"

timers=setInterval(cgs,10);

}

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

list[i].index = i;//這里必須把i賦值給list【i】，以此來獲得index；(感覺這樣解釋不太對，還望給意見)

list[i].onmouseover = function () {

inew = this.index; //獲取鼠標經過時候的index

move();

// this.className = "active";//也能夠在這里調用樣式

}

}

timer=setInterval(function(){

inew++;

if(inew>=list.length){

inew=0;

}

move();

}

,2000);

}

? ? ? ?

? ? ? ?

? ? ? ?

? ? ? ?

• 1
• 2
• 3
• 4

總結

以上是生活随笔為你收集整理的java焦点图_javascript焦点图（能够自己主动切换 ）的全部內容，希望文章能夠幫你解決所遇到的問題。

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