文章目錄
一、效果說明
如圖所示，我們一般看到的輪播效果有兩種
1.左邊這種圖片自動切換也可手動切換的形式
①當我們鼠標不動時，圖片沒擱幾秒自動切換至下一張
②當我們鼠標覆蓋圖片下面的文字時，覆蓋圖片幾就顯示圖片幾
2.右公告欄的形式，鼠標處於不同的標題就顯示不同的內容
此處做的效果只提供手動切換，若需要自動切換可根據左邊這種修改即可
二、實現思路
1、圖片輪播的實現思路
①先寫一個div
②將所有圖片放入div，寬高設置和div一樣
③設置這個div的overflow：hidden；這時只能看到第一張圖片，其他圖片因爲在div的外面看不見，同時div下面有個看不見的滑塊
④在js文件中設置每擱三秒圖片向左移動一個圖片的寬度，就能實現圖片自動切換了。
⑤將圖片下面的圖片幾用幾個標籤放好
⑥在js中寫好鼠標放在第幾個標籤就使圖片向左移相應的距離，就能使圖片手動切換了
2、公告欄形式輪播思路
①寫兩個div，上面那個矮一點用來寫上面的公告標題，下面這個高一點用來寫公告的內容
②在上面這個標籤內寫幾個標籤分別寫公告的標題
③在下面這個div裏面寫幾個塊級標籤，並吧每個公告的內容寫入不同的標籤，再用絕對定位使這些寫了內容的標籤重疊放在下面這個標籤上
④在js文件中寫好鼠標覆蓋上面那個公告標題的標籤就顯示相應的內容標籤，其他內容標籤不顯示
二、HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>輪播事例</title>
<link rel="stylesheet" href="css/new_file.css"/>
</head>
<body>
<div id="all">
/*第一種圖片的輪播*/
<div id="carousel1">
/*將所有圖片顯示*/
<ul id="loop">
<li><a href=""><img src="img/1.jpg" width="480px" height="270px"></a></li>
<li><a href=""><img src="img/2.jpg" width="480px" height="270px"></a></li>
<li><a href=""><img src="img/3.jpg" width="480px" height="270px"></a></li>
<li><a href=""><img src="img/4.jpg" width="480px" height="270px"></a></li>
<li><a href=""><img src="img/5.jpg" width="480px" height="270px"></a></li>
</ul>
/*顯示圖片下面的選擇項*/
<ul id="title">
<li class="choose">圖片1</li>
<li class="unchoose">圖片2</li>
<li class="unchoose">圖片3</li>
<li class="unchoose">圖片4</li>
<li class="unchoose">圖片5</li>
</ul>
</div>
/*第二種公告欄的輪播*/
<div id="carousel2">
/*所有公告欄的標題*/
<div id="header">
<a class="ch" href="">綜合<span class="line_bg"></span></a>
<a class="unch" href="">公告<span ></span></a>
<a class="unch" href="">賽事<span ></span></a>
<a class="unch" href="">攻略<span ></span></a>
<a class="unch" href="">社區<span ></span></a>
</div>
/*所有公告的內容*/
<ul id="field">
/*綜合公告的內容*/
<li id="comprehensive">
<div class="first"><a href="">春季賽4月13日首發JackeyLove首發出戰</a></div>
<div class="middle"><a href="">《雲頂之弈》倒數十八週（下）</a><span>04-05</span></div>
<div class="middle"><a href="">星之守護者杯 魔法少女解除快樂封印 引爆克隆之夜</a><span>04-05</span></div>
<div class="middle"><a href="">《雲頂之弈》倒數十八週（上）</a><span>04-05</span></div>
<div class="middle"><a href="">關於英雄聯盟4月5日開服說明</a><span>04-05</span></div>
<div class="last"><a href="">閱讀更多</a></div>
</li>
/*公告公告的內容*/
<li id="notice">
<div class="first"><a href="">4月12日體驗服維護公告</a></div>
<div class="middle"><a href="">4月10日版本內更新</a><span>04-09</span></div>
<div class="middle"><a href="">4月10日免費英雄更新公告</a><span>04-08</span></div>
<div class="middle"><a href="">關於4月5日開服的說明</a><span>04-05</span></div>
<div class="middle"><a href="">英雄時刻功能即將下線公告</a><span>04-03</span></div>
<div class="last"><a href="">閱讀更多</a></div>
</li>
/*賽事公告的內容*/
<li id="match">
<div class="first"><a href="">LPL春季賽4月13日JackeyLove首發出戰</a></div>
<div class="middle"><a href="">EDG完全體再度歸來 BLG能否逆襲IG</a><span>04-12</span></div>
<div class="middle"><a href="">4月11日LPL季後賽形勢全解：爭奪生死戰</a><span>04-12</span></div>
<div class="middle"><a href="">LPL春季賽4月12日首發 Doinb對陣Scout</a><span>04-11</span></div>
<div class="middle"><a href="">英雄麥克瘋：3G盛宴，電競春晚</a><span>04-11</span></div>
<div class="last"><a href="">閱讀更多</a></div>
</li>
/*攻略公告的內容*/
<li id="strategy">
<div class="first"><a href="">雲頂狙神燼掌控全場 三套頂級陣容隨心配</a></div>
<div class="middle"><a href="">10.7國服五大T1射手 薇恩圖奇強勢崛起</a><span>04-12</span></div>
<div class="middle"><a href="">國服高禁用率英雄盤點！卡薩丁持續制霸中路</a><span>04-10</span></div>
<div class="middle"><a href="">雲頂之弈三大S級冷門衝分陣容 奧德賽祕星劍愈戰愈勇</a><span>04-09</span></div>
<div class="middle"><a href="">10.7國服五路勝率榜首！中單黑馬安妮崛起</a><span>04-09</span></div>
<div class="last"><a href="">閱讀更多</a></div>
</li>
/*社區公告的內容*/
<li id="communnity">
<div class="first"><a href="">OMG vs ES：面對強敵 OMG能否贏下關鍵一戰</a></div>
<div class="middle"><a href="">Knight：Jackeylove將於明天的比賽首發上場！</a><span>04-12</span></div>
<div class="middle"><a href="">專訪EDG.Hope：我們打得比之前更果斷了</a><span>04-12</span></div>
<div class="middle"><a href="">RW賽後羣訪 教練：後面比賽繼續努力衝一下吧</a><span>04-12</span></div>
<div class="middle"><a href="">LGD賽後羣訪 Peanut：現在比賽有了訓練賽的效果</a><span>04-11</span></div>
<div class="last"><a href="">閱讀更多</a></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/new_file.js"></script>
</body>
</html>
三、CSS代碼
li,a{
list-style-type: none;
text-decoration: none;
}
#all{
display: flex;
margin: auto;
}
#carousel1{
width: 480px;
height: 300px;
}
#carousel2{
width: 480px;
height: 300px;
padding-left: 30px;
}
#loop{
width: 480px;
height: 270px;
display: flex;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#title{
width: 480px;
height: 30px;
display: flex;
justify-content: space-around;
margin: 0px;
padding: 0px;
}
#title>li{
text-align: center;
width: 96px;
line-height: 30px;
}
.unchoose{
background-color: #E3E2E2;
color:#424242;
}
.choose{
background-color: #F7F6F6;
color: #C59B66;
border-bottom: 2px solid #CEA861;
}
#header{
display: flex;
justify-content: space-between;
border-bottom: 1px solid #E0E2E2;
}
.unch{
font-size: 20px;
color: #676767;
position: relative;
}
.ch{
font-size: 20px;
color: #1DA6BA;
font-weight: bold;
position: relative;
}
.line_bg{
width: 38px;
height: 5px;
position: absolute;
z-index: 2;
left: 0px;
bottom: -2px;
background: url(../img/tab-title-selected.png) no-repeat center;
}
#field{
width: 480px;
height: 257px;
padding: 0px;
position: relative;
}
#field>li{
flex-basis: 480px;
height: 257px;
position: absolute;
left: 0px;
top: 0px;
}
.middle{
width: 480px;
height: 38px;
border-bottom: 1px solid #E3E2E2;
padding-left: 5px;
box-sizing: border-box;
position: relative;
}
.middle>a{
color: black;
line-height: 38px;
text-overflow: ellipsis;
}
.middle>a:hover{
color: #C5AB86;
}
.middle>span{
position: absolute;
right: 0px;
color: #9DA5B5;
text-overflow: ellipsis;
}
.first{
width: 480px;
height: 65px;
border-bottom: 1px solid #E3E2E2;
text-align: center;
color: #0DA0B4;
font-weight: bold;
}
.first>a{
width: 480px;
height: 65px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 21px;
line-height: 65px;
color: #0DA0B4;
}
.first>a:hover{
color: #C5AB86;
}
.last{
height: 35px;
line-height: 35px;
text-align: center;
background-color: #E3E2E2;
}
.last>a{
color: black;
}
.last:hover{
background-color: #DAD8D8;
}
#comprehensive{
display: block;
}
#notice{
display: none;
}
#match{
display: none;
}
#strategy{
display: none;
}
#communnity{
display: none;
}
四、js代碼
/*第一種圖片輪播部分*/
var index=1;
var width=480;
//圖片移動效果
function move(){
$("#title>li").attr("class","unchoose");//把所有的標籤都設爲未選中樣式
$("#title>li").eq(index).attr("class","choose");//把選中的標籤設爲選中樣式
var distence=(index++ * width)+"px";//index自增，實現下次的移動距離更長，就能顯示後面的圖片
$("#loop").animate({"scrollLeft":distence},200);//用200毫秒的時間使圖片移動達到切換的效果
if(index==5)
index=0;//當到第六張的時候應該是重新開始
}
var timer=setInterval(move,3000);//計時器，每隔3000毫秒執行一次move，也就是移動一次
/*當鼠標覆蓋下面的圖片幾的標籤的時候所做的事件*/
$("#title>li").mouseover(function(){
index=$(this).index();//讀取鼠標覆蓋的是第幾個標籤
move();//執行move，就是切換到對應的圖片
clearInterval(timer);//關閉計時器
timer=setInterval(move,3000);//開啓計時器，達到重新開始計時的效果
});
/*第二種公告欄形式部分*/
/*當鼠標覆蓋公告的標題標籤執行的事件*/
$("#header>a").mouseover(function(){
index=$(this).index();//獲取鼠標覆蓋的是第幾個標題標籤
$("#header>a").attr("class","unch");//將所有的標籤設爲未選中的樣式
$("#header>a").eq(index).attr("class","ch");//將鼠標覆蓋了的標籤設爲選中的樣式
$(".unch>span").removeClass("line_bg");//將未選中的標籤裏面的盒子移除
$(".ch>span").addClass("line_bg");//將選中的標籤裏面的盒子加上
/*當鼠標覆蓋第一個標籤的時候設置對應的內容標籤可見，其他設置不可見*/
if(index==0){
$("#field>li").css("display","none");
$("#comprehensive").css("display","block");
}
/*當鼠標覆蓋第二個標籤的時候設置對應的內容標籤可見，其他設置不可見*/
if(index==1){
$("#field>li").css("display","none");
$("#notice").css("display","block");
}
/*當鼠標覆蓋第三個標籤的時候設置對應的內容標籤可見，其他設置不可見*/
if(index==2){
$("#field>li").css("display","none");
$("#match").css("display","block");
}
/*當鼠標覆蓋第四個標籤的時候設置對應的內容標籤可見，其他設置不可見*/
if(index==3){
$("#field>li").css("display","none");
$("#strategy").css("display","block");
}
/*當鼠標覆蓋第五個標籤的時候設置對應的內容標籤可見，其他設置不可見*/
if(index==4){
$("#field>li").css("display","none");
$("#communnity").css("display","block");
}
});
五、感謝閱讀
源代碼文件內的代碼沒寫註釋，因爲寫的時候忘記寫了，後來也懶得加了，需要註釋可對着文章來看，可收藏文章，以防找不到！有疑問可留言一起談論交流！
由於系統會自動加下載資源所需的積分，需要源碼的可以私信我發給你！