(2) HTML官⽹代码块

2. CSS代码块h1{ border-top:120px; text-align:center; color:#7F462C; text-shadow:0 0 5px #ccc; font-family:fantasy; }.background{ background-color:#C19A6B; background: rgba(0, 0, 0, 0.2); border:2px dashed #493D26; border-radius:10px; margin: 200px auto 0; width:370px; height:240px; }.form{ text-align:center; color:#6F4E37; }.form input{ background:#f2f2f2;

height:25px; }.form button{ background:#6F4E37; width:50px; height:25px; }*{ margin:0; padding:0;}.header_con{ width:1280px; height:29px; background-color: #FFF0F5; opacity: 0.8; border-bottom: 1px solid #E6E6FA; margin:0 auto;}.welcome{ font-size: 12px; line-height: 29px; color:#F08080; margin-left: 10px;}.user{ font-size:12px; line-height: 29px; color:#F08080; float:right; margin-top:-29px; margin-right: 10px;}.baner{ width: 900px; height:50px; /*float:right;*/ margin: 20px 0 0 100px;}.navmenu a{ text-decoration: none; display:inline-block; text-align: center; width:105px; height: 50px; }.navmenu a:hover{ background-color: #FAEBD7;}ul{ list-style: none;}span{ color:#ADDFFF; margin-right:15px;}#line{ display: inline-block;

}.navmenu{ float: left; padding-right: 20px;}.search{ width:250px; height: 30px; border: 1px solid #ADDFFF; border-radius: 6px; outline: none; margin-top: 10px; margin-left:25px; padding-left: 5px;}.shopping_con{ width:130px; height:30px; display: inline-block; float:right; margin-right:-160px; margin-top:-30px;}.shopping{ display: inline-block; width:100px; height: 28px; border:1px solid #8FBC8F; text-decoration: none; color: #6495ED; text-align: center; line-height: 28px; background-color: #FFF5EE;}.shopping_num{ width: 28px; height:30px; background-color: #FF4500; text-align: center; color:#fff; line-height: 30px; float:right;}.slide{ position: relative; width:996px; height: 450px; margin:30px auto 0; overflow: hidden;}.slide_list{ position: absolute; width: 996px; height:450px; top: 0; left:0;}.slide_list li{ width: 996px; height: 450px; position: absolute; top:0; left:0;}.prev{ position: absolute; width:15px; height: 23px; left:11px; top:210px; background:url(../imgs/) -1px -450px no-repeat; cursor:pointer;}.next{ position:absolute; width:15px; height: 23px; right:11px; top:210px; background:url(../imgs/) -1px -500px no-repeat; cursor:pointer;}.points{ position: absolute; width: 100%; height:11px; text-align: center; bottom: 9px; font-size: 0;}.points li{ display: inline-block; width: 11px; height: 11px; background-color: #9f9f9f; margin:0 5px; cursor: pointer; border-radius:50%;}.points .active{ background-color: #cecece;}.peisong_con{ width:996px; margin:15px auto;}.peisong{ width:240px; height: 420px; margin:0 0 0 10px; float:right;}.video_con{ width:745px; height: 420px; margin-left: 0; cursor:pointer;}#video{ outline: none;}}.tuijian_con{ width:996px; margin:30px auto 0;}.dangao_con{ width:996px; height:320px; margin:15px auto 0;}.dangao li{ float:left;}.dangao li div{ text-align: center;

}#dangao1{ margin:0 10px 0 0; border: 1px solid #FFC0CB;}#dangao2{ margin:0 10px 0 0; border: 1px solid #FFC0CB;}#dangao3{ margin:0; border: 1px solid #FFC0CB;}.footer{ width:996px; margin:80px auto 50px; text-align:center;}.footer_link a{ display:inline-block; text-decoration:none; color:#778899; margin-right:16px;}.copyright{ color:#778899;}body{ background-image: url("../imgs/"); background-repeat:no-repeat; background-size:cover; }3. JS代码块$(function(){ var $slide = $('.slide'); //获取所以的幻灯⽚ var $li = $('.slide_list li'); //获取幻灯⽚的个数 var $len = $; var $len = $; var $prev = $('.prev'); var $next = $('.next'); //获取⼩圆点的容器 var $points_con = $('.points'); //获取⼩圆点 var $points = $('.points li'); //要运动过来的幻灯⽚索引值 var nowli = 0; //要离开的幻灯⽚索引值 var prevli = 0; var timer = null; var ismove = false; //第⼀个幻灯⽚不动，将其它的幻灯⽚放到右边去 //排除第⼀个幻灯⽚，给其余幻灯⽚设置样式 $(':first').css({'left':996}); //点击⼩圆点切换幻灯⽚,绑定click事件 $(function(){ nowli = $(this).index(); //修复重复点击⼩圆点的bug //注意是== if(nowli == prevli) { return; } $(this).addClass('active').siblings().removeClass('active'); //底下有专门定义的move()函数 move(); }) //点击向前的按钮切换幻灯⽚ $(function(){ //防⽌暴⼒操作 if(ismove) { return; } ismove = true; nowli--; move(); $(nowli).addClass('active').siblings().removeClass('active'); }) //点击向后的按钮切换幻灯⽚ $(function(){ if(ismove) { return; } ismove = true; nowli++; nowli++; move(); $(nowli).addClass('active').siblings().removeClass('active'); }) //设置定时器，2000ms⾃动播放 timer = setInterval(autoplay,3000); $nter(function(){ clearInterval(timer); }) $eave(function(){ timer = setInterval(autoplay,3000); }) function autoplay(){ nowli++; move(); $(nowli).addClass('active').siblings().removeClass('active'); } //幻灯⽚运动函数，通过判断nowli和prevli的值来移动对应的幻灯⽚ function move(){ //第⼀张幻灯⽚再往前的时候，也就是最后⼀张幻灯⽚要过来 if(nowli<0) { //最后⼀张幻灯⽚的索引值等于$len-1 nowli = $len-1; prevli = 0; //从左边过来 $(nowli).css({'left':-996}); $(nowli).animate({'left':0}); $(prevli).animate({'left':996},function(){ ismove = false; }); prevli = nowli; return; }

//最后⼀张幻灯⽚再往后的时候 if(nowli>$len-1) { nowli = 0; prevli = $len-1; //从右边过来 $(nowli).css({'left':996}); $(nowli).animate({'left':0}); $(prevli).animate({'left':-996},function(){ ismove = false; }); prevli = nowli; return; } //幻灯⽚从右边过来,从⼩到⼤ if(nowli > prevli) { //⾸先把要过来的幻灯⽚放到右边去 $(nowli).css({'left':996});

//要离开的幻灯⽚移到左边去 $(prevli).animate({'left':-996});

}

//幻灯⽚从左边过来

！！ //幻灯⽚从左边过来

！！

else{ //把要过来的幻灯⽚先放在左边去 $(nowli).css({'left' :-996});

$(prevli).animate({'left':996});

} //默认显⽰的幻灯⽚是0 $(nowli).animate({'left':0},function(){ ismove = false; }); prevli = nowli; }

})以上就是我做的⼩项⽬，欢迎⼤家来交流！