效果圖請訪問：http://220.178.0.62:8092/xuexi/demo3.html
第一步：下載 http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js
圖片下載方法：打開谷歌調試工具，F12。找到圖片右鍵 看到 open in new tab 點擊打開另存爲即可。
輪播圖源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
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:730px;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: 730px;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:90%;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%;}
</style>
</head>
<body>
<div class="banner-box">
<div class="bannerbox">
<div class="banner">
<a class="a-img-ban"> <img class="img-ban" src="images/7.jpg" alt="終於等到你還好我沒放棄" title="終於等到你還好我沒放棄"> </a>
<a class="a-img-ban"> <img class="img-ban" src="images/8.jpg" alt="關注我們"> </a>
<a class="a-img-ban"> <img class="img-ban" src="images/9.jpg" alt="在最好的年紀遇到你,纔算沒有辜負自己"> </a>
<a class="a-img-ban"> <img class="img-ban" src="images/10.jpg" alt="終於等到你吧"> </a>
<ul>
<li class="li-img"><img src="images/7.jpg" alt="終於等到你還好我沒放棄"></li>
<li class="li-img"><img src="images/8.jpg" alt="關注我們"></li>
<li class="li-img"><img src="images/9.jpg" alt="在最好的年紀遇到你,纔算沒有辜負自己"></li>
<li class="li-img"><img src="images/10.jpg" alt="終於等到你吧"></li>
</ul>
</div>
</div>
</div>
<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++;
},4000)
$('.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>
</body>
</html>