<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- bookstrap導入三個 -->
<link rel="stylesheet" href="bootstrap3.3.7/css/bootstrap.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="bootstrap3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.biankuang{
border: 2px solid red;
}
li{
float: left;
list-style: none;
margin-right: 10px;
}
</style>
<body>
<center>
<div style="color:red;z-index: 5;top: 30%;left: 0px;" id="houtui"><span class="glyphicon glyphicon-backward"></span></div>
<div >
<img src="image/1.jpg" width="50%" class="tu" />
<img src="image/2.jpg" width="50%" class="tu" />
<img src="image/3.jpg" width="50%" class="tu" />
<img src="image/4.jpg" width="50%" class="tu" />
<img src="image/5.jpg" width="50%" class="tu" />
<img src="image/6.jpg" width="50%" class="tu" />
</div>
<div style="color:red;z-index: 5;top: 30%;right: 0px;" id="qianjin"><span class="glyphicon glyphicon-forward"></span></div>
<ul >
<li class="xiatu"><img src="image/1.jpg" width="50px" /></li>
<li class="xiatu"><img src="image/2.jpg" width="50px" /></li>
<li class="xiatu"><img src="image/3.jpg" width="50px" /></li>
<li class="xiatu"><img src="image/4.jpg" width="50px" /></li>
<li class="xiatu"><img src="image/5.jpg" width="50px" /></li>
<li class="xiatu"><img src="image/6.jpg" width="50px" /></li>
</ul>
</center>
<script>
//創建一個索引爲0的指向最前面
var i=0;
//一進來顯示第一個圖，其餘的兄弟隱藏
$('.tu').eq(0).show().siblings('.tu').hide();
//點下面圖事件
$('.xiatu').click(function(){
//獲取當前數字賦值給i
i=$(this).index();
//調用zhanshi()方法
zhanshi();
});
//點下一圖事件
$("#qianjin").click(function(){
//判斷當前索引是最後一個
if(i==5){
//索引變成第一個
i=0;
}else{
//否則索引就加1
i++;
}
//調用zhanshi()方法
zhanshi();
});
//點上一圖事件
$("#houtui").click(function(){
//判斷當前索引是最前一個
if(i==0){
//索引變成第一個
i=5;
}else{
//否則索引就減1
i--;
}
//調用zhanshi()方法
zhanshi();
});
//zhanshi()方法
function zhanshi(){
//顯示出點擊那個數字對應圖片以動畫形式展現，其餘的退出動畫
//可加入其他翻轉動畫，詳情問亮哥
$('.tu').eq(i).show().siblings('.tu').hide();
//給當前點擊的添加邊框樣式.其他兄弟去掉樣式
$('.xiatu').eq(i).addClass("biankuang").siblings('.xiatu').removeClass("biankuang");
}
</script>
</body>
</html>簡單的前端輪播(無自動跳轉)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
layui laydate日期時間範圍，時間默認設定爲23:59:59
在Layui中，如果你想設置日期時間選擇器（datetime）的默認結束時間爲當天的23:59:59，你可以使用如下代碼（紅色部分）： laydate.render({ elem: '#test
Kimi 高效使用技巧，80%的人都不知道
Kimi 高效使用技巧，80%的人都不知道 聚焦於 AI提示詞 + 職場提效。 標題可能誇大或與內容不符 34 人贊同了該文章 關注我, AI 學習之旅上，我與您一同成長！ 一、引言 Kimi 作