这个是我初毕业刚进公司那会帮同事（同时也是同学）写的一个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);//添加定时器

}

学习来源：