詳細内容請點選
這個是我初畢業剛進公司那會幫同僚（同時也是同學）寫的一個PC端的全屏圖檔切換效果，對于剛畢業的我來說寫出來那會的喜悅之情是無法言表的，那時的我還是什麼不懂的小白白，俗稱菜鳥。個人網站上線不久，最近整理整理從前的一些小逼格的事
大背景全屏切換效果圖：
大背景全屏切換效果html内容：
<!--banner圖檔切換開始-->
<div class="banner">
<div class="block none"><img src="images/banner1.png"/></div>
<div class=" none"><img src="images/圖檔切換.png" /></div>
<div class=" none"><img src="images/banner3.png" /></div>
<div class=" none"><img src="images/banner4.png" /></div>
<div class=" none"><img src="images/banner2.png" /></div>
<div class="banner_1">
<ul class="banner_2">
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall1.jpg" width="90%" class="img_1"/>
<p>豐富強大的功能</p>
</li>
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall2.jpg" width="90%" />
<p>雲端資料處理能力</p>
</li>
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall3.jpg" width="90%" />
<p>雲端超強制作引擎</p>
</li>
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall4.jpg" width="90%" />
<p>高品質的使用者體驗</p>
</li>
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall5.jpg" width="90%" />
<p>使用者行為統計分析</p>
</li>
</ul>
</div>
</div>
<!--banner圖檔切換結束-->
大背景全屏切換效果css内容：
@charset "utf-8";*{margin:0;padding:0}
body,div,dt,p,dl,dd,ul,li,ol,a,input,figure,figcaption,img{list-style:none;margin:0 auto;padding:0;text-decoration:none}
.banner{width:100%;height:450px;position:relative;background:url("../images/banner_beijing1.jpg") no-repeat;background-size:100% 100%}
.banner_1{width:100%;height:125px;position:absolute;bottom:0;left:0;border-top:1px solid #fff}
.banner_2{width:1000px;height:125px}
.banner_2 .img_1{width:80%;border:4px #f7941d solid}
.banner_2 li{width:150px;height:125px;float:left;padding:15px 25px 15px 25px;color:#fff;position:relative}
.banner_2 li .banner_3{width:29px;height:18px;position:absolute;top:0;left:85px}
.sanjiao{background:url("../images/index_sj.png") no-repeat}
.banner_2 li p{margin-top:10px}
.banner .none{display:none;text-align:center}
.banner .block{display:block;text-align:center}
大背景全屏切換效果js内容：
var color;
$(document).ready(function() {
$(".banner_2 li").bind("mousemove", changebg);
test(0);
});
function changebg() {
var index = $(".banner_2 li").index($(this));
test(index);
};
function test(index) {
var li_length = $(".banner_2 li").length;
if (index > li_length) {
index = 0;
}
$(".banner_2 li").eq(index).css("color", "#f7941d").siblings().css("color", "#ffffff");
$(".none").eq(index).show().siblings(".none").hide();
$(".banner_3").eq(index).addClass("sanjiao").parents().siblings().children("span").removeClass("sanjiao");
$(".banner_2 img").eq(index).addClass("img_1").parents().siblings().children("img").removeClass("img_1");
clearTimeout(color);//清除定時器
color = setTimeout("test(" + (index + 1) + ")", 3000);//添加定時器
}
學習來源：http://www.j--d.com/jquery/443.html
更多jquery内容請點選
轉載于:https://www.cnblogs.com/j--d/p/jquery-j--d.html