数据库网站开发,ui设计师简历,深圳市宝安区松岗邮政编码,百度托管公司1.不同方式的图片切换 功能点: 1.页面默认循环切换,循环切换按钮获得焦点 2.点击顺序切换时,顺序切换按钮获得焦点 点击上一张时,当图片为第一张时,图片不再进行切换,图片张数和描述也不在变动; 点击下一张时,当图片为最后一张时,图片不再进行切换,图片…1.不同方式的图片切换 功能点: 1.页面默认循环切换,循环切换按钮获得焦点 2.点击顺序切换时,顺序切换按钮获得焦点 点击上一张时,当图片为第一张时,图片不再进行切换,图片张数和描述也不在变动; 点击下一张时,当图片为最后一张时,图片不再进行切换,图片张数和描述也不在变动; 2.点击上一张按钮时触发的事件 点击上一张时,当图片为第一张时,图片切换到最后一张,图片张数和描述显示为对应图片的张数和描述; 点击下一张时,当图片为最后一张时,图片切换到第一张,图片张数和描述显示为对应图片的张数和描述; 3.点击左右按钮是图片内容/张数/描述进行相应的变动 开发思路: 1.实现图片循序切换: 声明变量num,使其初始值为0 上一张按钮:每点击一次,使num减1,当num的值小于0时,使其值等于图片数组的长度减1; 下一张按钮:每点击一次,使num加1,当num的值大于等于图片数组的长时,使其值0. 2.实现图片顺序切换: 上一张按钮:每点击一次,使num减1,当num的值小于0时,使其值等于0; 下一张按钮:每点击一次,使num加1,当num的值大于等于图片数组的长时,使其值等于图片数组的长度减1. 3.点击左右按钮触发的事件: 根据num来改变相应的数值和索引值 4.实现切换方式的切换:通过判断状态按钮的className来执行相应的事件函数 div classboxinput typebutton namebtn1 idbtn1 value循环切换 classact/input typebutton namebtn2 idbtn2 value顺序切换 /div classbox1a hrefjavascript:; idlf_btnlt;/aa hrefjavascript:; idrt_btngt;/ap计算中.../pimg src/p计算中.../p/div
/div *{margin: 0;padding: 0;
}
.box{width: 500px;margin: 50px auto 0;text-align: center;
}
input{width: 80px;height: 30px;background: #C0C0C0;border: none;margin: 0 5px;
}
.act{background: palevioletred;
}
.box1{width: 100%;height: 300px;position: relative;margin-top: 20px;background: #ccc;
}
.box1 img{width: 100%;height: 100%;
}
a{position: absolute;top: 50%;width: 50px;height: 50px;text-align: center;color: #fff;font-weight: bold;line-height: 50px;border-radius: 50%;text-decoration: none;background: #C0C0C0;opacity: .6;margin-top: -25px;font-size: 40px;
}
#lf_btn{left: 0;
}
#rt_btn{right: 0;
}
p{width: 100%;background: rgba(0,0,0,.5);height: 30px;color: #fff;position: absolute;left: 0;line-height: 30px;
}
p:nth-of-type(1){top: 0;
}
p:nth-of-type(2){bottom: 0;
}
a:hover{pacity: .8;
} var lf_btndocument.getElementById(lf_btn);
var rt_btndocument.getElementById(rt_btn);
var oImgdocument.getElementsByTagName(img)[0];
var aBtnsdocument.getElementsByTagName(input);
var arr[[../demo/鑫/img/1.jpg,../demo/鑫/img/2.jpg,../demo/鑫/img/3.jpg,../demo/鑫/img/4.jpg,../demo/鑫/img/5.jpg],[图片一,图片二,图片三,图片四,图片五]];
var psdocument.getElementsByTagName(p);
var num0;
var lenarr[0].length;
//页面初始化
fn1();
function fn1(){oImg.srcarr[0][num];ps[0].innerTextnum1/len;ps[1].innerTextarr[1][num];
}
//图片左右切换
//上一张
fn2();
function fn2(){lf_btn.onclickfunction(){num--;if(num0){numlen-1;}fn1();}//下一张rt_btn.οnclickfunction(){num;if(numlen){num0;}fn1();}
}//切换方式转换
//循环切换
var thatnull;
function clear(that){for (var i0;iaBtns.length;i) {aBtns[i].className ;}that.classNameact;
}
aBtns[0].οnclickfunction(){//上一张clear(this);fn2();
}//顺序切换
aBtns[1].οnclickfunction(){clear(this);//上一张lf_btn.οnclickfunction(){num--;if(num0){num0;}fn1();}//下一张rt_btn.οnclickfunction(){num;if(numlen){numlen-1;}fn1();}} 2.自定义属性图片切换 HTML div idboximg src/ul idbtns/ul
/div CSS *{margin: 0;padding: 0;
}
#box{margin: 20px 0 0 30px;position: relative;width: 400px;text-align: center;
}
#box ul{width: 100%;text-align: center;
}
#box li{list-style: none;display: inline-block;width: 40px;height: 10px;background: #C0C0C0;margin:0 2px;
}
#box img{width: 400px;height: 200px;
}
#box .act{background: palevioletred;
} JS部分 var oImgdocument.getElementsByTagName(img)[0];
var oBtndocument.getElementById(btns);
var Btnsdocument.getElementsByTagName(li);
var str;
var imgs[http://tse4.mm.bing.net/th?idOIP.eyrAJHrqfyG4JDdYH2R57gEsDgw214h160c7qlt90o4pid1.7,http://tse2.mm.bing.net/th?idOIP.jYyuulCIIlC-0U8vLeZcPQEsCow300h168c7qlt90o4pid1.7,http://tse3.mm.bing.net/th?idOIP.nxOcHfdj3G4tfdQ1da34ngEXDfw223h174c7qlt90o4pid1.7,http://tse3.mm.bing.net/th?idOIP.yfBtP9Yis8AFz3MIBMiEhgEyDMw300h200c7qlt90o4pid1.7,http://tse1.mm.bing.net/th?idOIP.jAS8cEFr324zQBQjlfg1EAEyDMw297h193c7qlt90o4pid1.7];
//页面初始化
//生成切换按钮
for (var i0;iimgs.length;i) {strli/li;
}
oBtn.innerHTMLstr;
oImg.srcimgs[0];
Btns[0].classNameact;//按钮点击切换图片主要运用自定义属性
for (var i0;iBtns.length;i) {Btns[i].indexi;Btns[i].onclickfunction(){for (var i0;iBtns.length;i) {Btns[i].className ;}this.classNameact;oImg.srcimgs[this.index];}
} 转载于:https://www.cnblogs.com/yangxue72/p/7514766.html
