完成一个个人博客，博客头像可上传本地图片；部分图片实现点击看大图功能

完成一个个人博客，博客头像可上传本地图片；部分图片实现点击看大图功能
alt="用户头像" width="160" height="160"> <span>点击更换头像span> div> div> <div id="cover"> <div class="bg">div> <div class="bp"> <div id="preview"> <span class="close-cover">×span> <img id="imghead" src="images/s8.jpg" alt="用户头像" width="200" height="200"> <p> <span>更换头像：span> <input type="file" onchange="previewImage(this)"> p> div> div> div> <div id="Main"> <ul> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s1.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big1.jpg" alt="">li> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s2.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big2.jpg"alt="">li> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s3.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big3.jpg"alt="">li> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s4.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big4.jpg"alt="">li> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s5.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big5.jpg"alt="">li> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s6.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big6.jpg"alt="">li> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s7.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big7.jpg"alt="">li> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s8.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big8.jpg"alt="">li> <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s9.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big9.jpg"alt="">li> ul> div> <div class="gray">div> <div class="showImg"> <img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/big1.jpg" class="show_img"> <img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/dirl.png" class="but_l"> <img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/dirr.png" class="but_r"> div> body> <script type="text/Javascript" src="js/jquery.js">script> <script type="text/Javascript"> var bImg = ""; var index = 0;//初始化下标 $("#Main ul li").click(function(){ index = $(this).index(); //alert(); $(".gray").show(); $(".showImg").show(); bImg = $(this).find("img").attr("bigSrc"); $(".showImg img.show_img").attr("src",bImg); }); $(".gray").click(function(){ $(".gray").hide();/*隐藏元素*/ $(".showImg").hide(); }) $(".but_l").click(function(){ index --;//下标逐渐减小 if (index<0) { alert("这是第一张图片"); index = 0; } bImg = $("#Main ul li").eq(index).find("img").attr("bigSrc"); $(".showImg img.show_img").attr("src",bImg); }) $(".but_r").click(function(){ index ++; if (index>8) { alert("这是最后一张图片"); index = 8; } bImg = $("#Main ul li").eq(index).find("img").attr("bigSrc"); $(".showImg img.show_img").attr("src",bImg); }) script> html>