<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
img{
width: 100%;
}
.arrow {
display: none;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋體";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
.slider li {
float: left;
}
.slider li:first-child {
display: block;
}
.slider ul{
position: absolute;
left: 0;
top: 0;
width: 5530px;
}
</style>
</head>
<body>
<div class="slider">
<!--圖檔容器-->
<ul>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./images/1.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./images/2.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./images/3.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./images/4.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./images/5.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="./images/6.jpg" alt=""></a></li>
</ul>
<!--箭頭-->
<div class="arrow">
<span class="arrow-left" id="left"><</span>
<span class="arrow-right" id="right">></span>
</div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 1.箭頭的顯示和隐藏
$(".slider").on("mouseenter",function(){
$(".arrow").show();
});
$(".slider").on("mouseleave",function(){
$(".arrow").hide();
});
// 克隆第一張圖,追加到最後
$(".slider ul").append($(".slider li").eq(0).clone());
var flag=false;
var index=0;
$(".arrow-left").on("click",function(){
if(flag){
return;
}
flag=true;
index--;
if(index==-1){
index=5;
$(".slider ul").css("left","-4740px");
}
$(".slider ul").stop(true,false).animate({
"left":-790*index+"px"
},1000,function(){
flag=false;
});
});
$(".arrow-right").on("click",function(){
if(flag){
return;
}
flag=true;
if(index==6){
index=0;
$(".slider ul").css("left","0px");
}
index++;
$(".slider ul").stop(true,false).animate({
"left":-790*index+"px"
},1000,function(){
flag=false;
});
});
});
</script>
</body>
</html>
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)