jquery简单的大背景banner图片全屏切换

详细内容请点击

这个是我初毕业刚进公司那会帮同事（同时也是同学）写的一个PC端的全屏图片切换效果，对于刚毕业的我来说写出来那会的喜悦之情是无法言表的，那时的我还是什么不懂的小白白，俗称菜鸟。个人网站上线不久，最近整理整理从前的一些小逼格的事

大背景全屏切换效果图：

  

大背景全屏切换效果html内容：

<!--banner图片切换开始-->
<div class="banner">

<div class="block none"><img src="data:images/banner1.png"/></div>
<div class=" none"><img src="data:images/图片切换.png" /></div>
<div class=" none"><img src="data:images/banner3.png" /></div>
<div class=" none"><img src="data:images/banner4.png" /></div>
<div class=" none"><img src="data:images/banner2.png" /></div>

<div class="banner_1">
<ul class="banner_2">
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall1.jpg" width="90%" class="img_1"/>
<p>丰富强大的功能</p>
</li>
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall2.jpg" width="90%" />
<p>云端数据处理能力</p>
</li>
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall3.jpg" width="90%" />
<p>云端超强制作引擎</p>
</li>
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall4.jpg" width="90%" />
<p>高质量的用户体验</p>
</li>
<li>
<span class="banner_3"></span>
<img src="data: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内容请点击