輪播圖
/*輪播圖基本功能：
* 1圖片切換
* 1.1圖片在中間顯示
* 1.2圖片淡入淡出
* 2左右各有一個按鈕
* 2.1點擊左按鈕，圖片切換上一張
* 2.2點擊右按鈕，圖片切換下一張
* 2.3鼠標滑過按鈕，按鈕顏色加深
* 3底部的導航點
* 3.1圖片為第幾張時，點在那第幾張
* 3.2鼠標滑到第幾個點，圖片切換到第幾張
* 4圖片自動輪播
* 4.1默認自動下一張
* 4.2鼠標在圖片范圍時，停止切換
* 4.3鼠標離開圖片范圍，恢復自動切換
* 5鼠標放在圖片范圍時，變為小手樣式
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style type="text/css">
/*容器*/
#content{
padding: 0px;
margin: 0px auto;
width: 966px;
height: 644px;
position: relative;
}
/*容器中圖片樣式*/
#content img{
width: 966px;
height: 644px;
position: absolute;
}
/*在光標圖片上時,為小手狀態*/
#content:hover{
cursor: pointer;
}
/*圖片隱藏*/
.imgshow{
display: block;
}
/*圖片顯示*/
.imghide{
display: none;
}
#left,#right{
position: absolute;
width: 25px;
height: 50px;
background-color: gray;
color: white;
line-height: 50px;
text-align: center;
font-size: 22px;
border-radius:5px ;
}
#left{
top: 297px;
left: 0px;
}
#right{
top:297px;
margin-left: 940px;
}
#left:hover,#right:hover{
opacity: 0.5;
}
#nav:hover{
cursor: default;
}
#nav div{
width: 20px;
height: 20px;
border-radius: 10px;
margin-left: 10px;
margin-top: 5px;
float: left;
}
.divshow{
background-color: red;
}
.divhide{
background-color: lawngreen;
}
#nav div:hover{
opacity: 0.5;
}
#nav{
position: absolute;
width: 200px;
height: 30px;
margin-top:590px ;
margin-left: 25px;
}
</style>
</head>
<body>
<!--存放圖片、按鈕、導航點-->
<div id="content"class="conClass">
<!--圖片-->
<img src="image/美女 (1).jpg"class="imgshow"/>
<img src="image/美女 (2).jpg"class="imghide"/>
<img src="image/美女 (3).jpg"class="imghide"/>
<img src="image/美女 (4).jpg"class="imghide"/>
<img src="image/美女 (5).jpg"class="imghide"/>
<img src="image/美女 (6).jpg"class="imghide"/>
<div id="left"><</div>
<div id="right">></div>
<div id="nav">
<div class="divshow"></div>
<div class="divhide"></div>
<div class="divhide"></div>
<div class="divhide"></div>
<div class="divhide"></div>
<div class="divhide"></div>
</div>
</div>
<script type="text/javascript">
/*輪播圖基本功能：
* 1圖片切換
* 1.1圖片在中間顯示
* 1.2圖片淡入淡出
* 2左右各有一個按鈕
* 2.1點擊左按鈕，圖片切換上一張
* 2.2點擊右按鈕，圖片切換下一張
* 2.3鼠標滑過按鈕，按鈕顏色加深
* 3底部的導航點
* 3.1圖片為第幾張時，點在那第幾張
* 3.2鼠標滑到第幾個點，圖片切換到第幾張
* 4圖片自動輪播
* 4.1默認自動下一張
* 4.2鼠標在圖片范圍時，停止切換
* 4.3鼠標離開圖片范圍，恢復自動切換
* 5鼠標放在圖片范圍時，變為小手樣式
*/
/*實現思路
* 所有圖片在同一位置
* 一張圖片展示，其余圖片隱藏
*/
//創建一個變量來存放當前圖片的位置(索引位置)
var showindex=0;
//定時器調用的方法
function timershow(){
/*樣式切換圖片
var index=$("img").index($(".imgshow"));
//隱藏當前圖片
$("img").eq(index).removeClass("imgshow").addClass("imghide");
if(index==5){
index=-1
}
$("img").eq(index+1).removeClass("imghide").addClass("imgshow");
*/
var imageindex=showindex;
//點擊按鈕，下標向后移動
showindex++;
//切換到第一張圖片，showindex改為0
if(showindex==6){
showindex=0
}
//返回當前圖片的位置
//console.log(imageindex);
//上一張圖片淡出
$("img").eq(imageindex).fadeOut(1000);
//當前圖片淡出
$("img").eq((imageindex+1)%6).fadeIn(1000);
//上一個導航點樣式修改為divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//當前導航點樣式修改為divshow
$("#nav div").eq((imageindex+1)%6).removeClass("divhide").addClass("divshow");
}
$(function(){
//自動調用方法
var timer=setInterval(timershow,2000);
//上一張圖片
$("#right").click(function(){
/*樣式切換圖片
var index=$("img").index($(".imgshow"));
//隱藏當前圖片
$("img").eq(index).removeClass("imgshow").addClass("imghide");
if(index==5){
index=-1
}
$("img").eq(index+1).removeClass("imghide").addClass("imgshow");
*/
var imageindex=showindex;
//點擊按鈕，下標向后移動
showindex++;
//切換到第一張圖片，showindex改為0
if(showindex==6){
showindex=0
}
//返回當前圖片的位置
console.log(imageindex);
//上一張圖片淡出
$("img").eq(imageindex).fadeOut(1000);
//當前圖片淡出
$("img").eq((imageindex+1)%6).fadeIn(1000);
//上一個導航點樣式修改為divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//當前導航點樣式修改為divshow
$("#nav div").eq((imageindex+1)%6).removeClass("divhide").addClass("divshow");
});
//下一張圖片
$("#left").click(function(){
console.log("修改前："+showindex)
var imageindex=showindex;
//點擊按鈕，下標向后移動
showindex--;
//切換到最后一張圖片，showindex變為5
if(showindex==-1){
showindex=5;
}
//上一張圖片淡出
$("img").eq(imageindex).fadeOut(1000);
//當前圖片淡出
$("img").eq((imageindex-1)%6).fadeIn(1000);
//上一個導航點樣式修改為divhide
$("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
//當前導航點樣式修改為divshow
$("#nav div").eq((imageindex-1)%6).removeClass("divhide").addClass("divshow");
});
//導航點
$("#nav div").mouseover(function(){
console.log("修改前"+showindex);//修改前的位置
var divindex=$("#nav div").index($(this));//獲取當前鼠標在哪一個點上
//選定的為當前的自己則不產生動畫效果
if(divindex!=showindex)
{
//將以前的點的樣式修改成divhide
$("#nav div").eq(showindex).removeClass("divshow").addClass("divhide");
//將現在的點的樣式修改成div
$("#nav div").eq(divindex).removeClass("divhide").addClass("divshow");
//以前圖片淡出
$("img").eq(showindex).fadeOut(1000);
//新圖片淡入
$("img").eq(divindex).fadeIn(1000);
showindex=divindex;
console.log("修改后"+divindex);//修改后的位置
}
});
//鼠標在圖片范圍時停止切換(清除定時器)
$("#content").mouseenter(function() {
window.clearInterval(timer);
}
);
$("#content").mouseleave(function(){
timer=window.setInterval(timershow,2000);
});
});
</script>
</body>
</html>
