知识点:html/css布局思维,浮动/定位详解,大企业标准,代码性能优化,js鼠标事件,DOM操作等。
源码:
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=肮丶省蹦谌?肮丶室?关键词二”在
& lt;元name=懊枋觥蹦谌?巴久枋瞿谌荨北?
& lt; title> Document
& lt;风格类型=" text/css "比;
{保证金:0 px;填充:0 px;}
/css样式表达方式:属性:值;身高:1.7;px像素*/
主要{宽度:1000 px;/宽/高:640 px;/高//背景:# cc99cc;背景颜色/保证金:30 px汽车0 px;}
主要ul李{宽度:288 px;高度:180 px;边界:4 px固体# fff;粗/细风格颜色边框/list-style-type:没有。/去掉前面的圆点/浮动:左;/左浮动/保证金:10 px 17 px;
不必:5 px 5 px 10 px # 000;}
.gray{宽度:100%;高度:100%;背景:rgba (0, 0, 0, 0.6);位置:固定;/固定定位/左:0 px;上图:0 px;显示:没有;/隐藏/}
.showImg{宽度:650 px;身高:406 px;背景:红色;位置:绝对的,/绝对定位/前:100像素;左:400 px;边界:10 px固体# fff;显示:没有;/隐藏/}
.showImg img.but_l{:绝对;前:170像素;左:-70 px;}
.showImg img.but_r{:绝对;前:170像素;右:-70 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=爸饕北?
& lt; ul>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s1.jpg " bigsrc=" https://www.yisu.com/zixun/images/big1.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s2.jpg " bigsrc=" https://www.yisu.com/zixun/images/big2.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s3.jpg " bigsrc=" https://www.yisu.com/zixun/images/big3.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s4.jpg " bigsrc=" https://www.yisu.com/zixun/images/big4.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s5.jpg " bigsrc=" https://www.yisu.com/zixun/images/big5.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s6.jpg " bigsrc=" https://www.yisu.com/zixun/images/big6.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s7.jpg " bigsrc=" https://www.yisu.com/zixun/images/big7.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s8.jpg " bigsrc=" https://www.yisu.com/zixun/images/big8.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/s9.jpg " bigsrc=" https://www.yisu.com/zixun/images/big9.jpg "/祝辞& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类="灰色"祝辞& lt;/div>
& lt; div类=皊howImg”比;
& lt; img src=" https://www.yisu.com/zixun/images/big1.jpg " class=" show_bimg "/比;
& lt; img src=" https://www.yisu.com/zixun/images/dirl.png " class=" but_l "/比;
& lt; img src=" https://www.yisu.com/zixun/images/dirr.png " class=" but_r "/比;
& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
var _index=0;
var bImg=零;
$(" #主要ul李”).click(函数(){
_index=$(这).index();//获取序列号//警报(_index);
$ (" .gray "),告诉();//显示
$ (" .showImg "),告诉();//显示
bImg=$(这);(img) .attr (“bigsrc”);//警报(bImg);
$ ("。showImg img.show_bimg”) .attr (“src”, bImg);
});
$ (" .gray ") .click(函数(){
$ (" .gray ") hide();//隐藏
$ (" .showImg ") hide ();
});//点击右边切换按扭
$ ("。showImg img.but_r”) .click(函数(){
_index + +,//_index + 1;
如果(_index> 8) {_index=8;alert("右边到头了”);}
bImg=$(" #主要ul李”).eq (_index); (img) .attr (“bigsrc”);
$ ("。showImg img.show_bimg”) .attr (“src”, bImg);
});//点击左边切换按扭
$ ("。showImg img.but_l”) .click(函数(){
_index——;//_index-1;
如果(_index<0) {_index=0;警报(“左边到头了”);}
bImg=$(" #主要ul李”).eq (_index); (img) .attr (“bigsrc”);
$ ("。showImg img.show_bimg”) .attr (“src”, bImg);
});
& lt;/script>
& lt;/body>
& lt;/html>
以上所述是小编给大家介绍的javascript实现QQ空间相册展示源码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
