java焦点图_javascript焦点图(能够自己主动切换 )
/*
思路總結(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 怎么判断干电池没电 如何判断干电池电量?
- 下一篇: java yml 转 map_如何在Ja