首先是HTML搭建结构
<div class="banner-box"><div class="bannerbox"><div class="banner"><a class="a-img-ban"> <img class="img-ban" src="./img/640 (4).jpg" alt="终于等到你还好我没放弃"title="终于等到你还好我没放弃"></a><a class="a-img-ban"> <img class="img-ban" src="./img/640 (18).jpg" alt="关注我们"> </a><a class="a-img-ban"> <img class="img-ban" src="./img/640 (19).jpg" alt="在最好的年纪遇到你,才算没有辜负自己"> </a><a class="a-img-ban"> <img class="img-ban" src="./img/640 (5).jpg" alt="终于等到你吧"> </a><a class="a-img-ban"> <img class="img-ban" src="./img/640 (14).jpg" alt="终于等到你吧"> </a><a class="a-img-ban"> <img class="img-ban" src="./img/640 (15).jpg" alt="终于等到你吧"> </a><a class="a-img-ban"> <img class="img-ban" src="./img/640 (16).jpg" alt="终于等到你吧"> </a><a class="a-img-ban"> <img class="img-ban" src="./img/640 (17).jpg" alt="终于等到你吧"> </a><ul><li class="li-img"><img src="./img/640 (4).jpg" alt="终于等到你还好我没放弃"></li><li class="li-img"><img src="./img/640 (18).jpg" alt="关注我们"></li><li class="li-img"><img src="./img/640 (19).jpg" alt="在最好的年纪遇到你,才算没有辜负自己"></li><li class="li-img"><img src="./img/640 (5).jpg" alt="终于等到你吧"></li><li class="li-img"><img src="./img/640 (14).jpg" alt="终于等到你吧"></li><li class="li-img"><img src="./img/640 (15).jpg" alt="终于等到你吧"></li><li class="li-img"><img src="./img/640 (16).jpg" alt="终于等到你吧"></li><li class="li-img"><img src="./img/640 (17).jpg" alt="终于等到你吧"></li></ul></div></div></div>其次是css页面，给结构添加样式
* {margin: 0;padding: 0;}ul,li {list-style: none;}/* 首页轮播图 banner-box*/.banner-box {width: 100%;display: inline-block;padding: 10px;}.bannerbox {width: 600px;height: 500px;margin: 0 auto;}.banner {width: 600px;height: 500px;float: left;position: relative;}.banner .a-img-ban {position: absolute;top: 0;left: 0;display: block;z-index: 9;width: 555px;height: 500px;opacity: 0;-webkit-transition: opacity .5s linear 0s;-moz-transition: opacity .5s linear 0s;-ms-transition: opacity .5s linear 0s;-o-transition: opacity .5s linear 0s;transition: opacity .5s linear 0s}.banner .a-img-ban .img-ban {width: 555px;height: 500px;position: absolute;z-index: 9;}.banner .img-ban-curr {opacity: 1;z-index: 10}.banner ul {width: 300px;float: right;}.banner ul li {width: 54%;padding: 8px;background: #eee;margin-bottom: 5px;height: 90px;cursor: pointer;-webkit-transition: background-color .3s linear 0s;-moz-transition: background-color .3s linear 0s;-ms-transition: background-color .3s linear 0s;-o-transition: background-color .3s linear 0s;transition: background-color .3s linear 0s;}.banner ul li.curr {background: #f0d0a9;}.banner ul li img {width: 80%;display: block;height: 100%;}
ul,li {list-style: none;}/* 首页轮播图 banner-box*/.banner-box {width: 100%;display: inline-block;padding: 10px;}.bannerbox {width: 1050px;height: 440px;margin: 0 auto;}.banner {width: 1050px;height: 440px;float: left;position: relative;}.banner .a-img-ban {position: absolute;top: 0;left: 0;display: block;z-index: 9;width: 555px;height: 440px;opacity: 0;-webkit-transition: opacity .5s linear 0s;-moz-transition: opacity .5s linear 0s;-ms-transition: opacity .5s linear 0s;-o-transition: opacity .5s linear 0s;transition: opacity .5s linear 0s}.banner .a-img-ban .img-ban {width: 555px;height: 440px;position: absolute;z-index: 9;}.banner .img-ban-curr {opacity: 1;z-index: 10}.banner ul {width: 300px;float: right;}.banner ul li {width: 54%;padding: 8px;background: #eee;margin-bottom: 5px;height: 90px;cursor: pointer;-webkit-transition: background-color .3s linear 0s;-moz-transition: background-color .3s linear 0s;-ms-transition: background-color .3s linear 0s;-o-transition: background-color .3s linear 0s;transition: background-color .3s linear 0s;}.banner ul li.curr {background: #f0d0a9;}.banner ul li img {width: 100%;display: block;height: 100%;}再者就是js页面，实现结构的动态行为
<script>$(function() {$(".a-img-ban").eq(0).addClass('img-ban-curr');$(".li-img").eq(0).addClass('curr');var n = 0;setInterval(function() {if (n >= $('.li-img').length) {n = 0;}$(".a-img-ban").eq(n).addClass('img-ban-curr').siblings('.a-img-ban').removeClass('img-ban-curr');$(".li-img").eq(n).addClass('curr').siblings('.li-img').removeClass('curr');n++;}, 2000)$('.li-img').click(function() {var num = $(".li-img").index(this);$(".a-img-ban").eq(num).addClass('img-ban-curr').siblings('.a-img-ban').removeClass('img-ban-curr');$(this).addClass('curr').siblings(".li-img").removeClass('curr');n = num;});});</script>给大家看一眼效果图吧
效果图
