/*

思路總結(jié)：

1.實(shí)現(xiàn)圖片滾動的function、鼠標(biāo)經(jīng)時候獲取當(dāng)前l(fā)i的index、設(shè)置ndex自己主動遞增的函數(shù)、實(shí)現(xiàn)淡入淡出效果的函數(shù)

2.整個實(shí)現(xiàn)效果一傳遞index為主線

3.我的編寫代碼過程

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

---->b.編寫鼠標(biāo)經(jīng)過時候獲取index，這里必須通過歷遍和賦值把鼠標(biāo)經(jīng)過的index賦值個inew，并傳遞給能夠?qū)崿F(xiàn)圖片切換的函數(shù)move()；

---->c. 編寫實(shí)現(xiàn)圖片淡入淡出的效果函數(shù)

---->d.move()函數(shù)的功能實(shí)現(xiàn)能夠在編寫鼠標(biāo)經(jīng)過li的事件和編寫淡入淡出函數(shù)的時候飛開編寫進(jìn)去 ，這樣思路就會順暢一點(diǎn)

*/

/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;}//鼠標(biāo)經(jīng)過li的時候，調(diào)用的樣式

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

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

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

var timer;

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

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="";//這里必須是數(shù)組

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; //獲取鼠標(biāo)經(jīng)過時候的index

move();

// this.className = "active";//也能夠在這里調(diào)用樣式

}

}

timer=setInterval(function(){

inew++;

if(inew>=list.length){

inew=0;

}

move();

}

,2000);

}

? ? ? ?

? ? ? ?

? ? ? ?

? ? ? ?

• 1
• 2
• 3
• 4

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。