版权声明:https://blog.csdn.net/qq_37618797 https://blog.csdn.net/qq_37618797/article/details/83214425
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<script src="js/jquery-1.12.3.js"></script>
<script>
$(function(){
$(".rs").on("click",function(){ //右箭头点击事件
$(".imgs").css({
marginLeft: function(index, value) { //此函数返回要设置的属性值。接受两个参数,index为元素在对象集合中的索引位置,value是原先的属性值。
var move = parseInt(value) - 290; //每点击一次移动一个图片的像素
if(move == -1160){ //当图片移动超过界限后,返回第一张图片
return 0 + "px";
}
return move + "px";
}
});
$(".imgs").stop().fadeOut(5).fadeIn(500); //stop 停止之前的所有动画 fadeOut 淡出 fadeIn 淡入
});
$(".ls").on("click",function(){
//左边
$(".imgs").css({
marginLeft: function(index, value) {
var move = parseInt(value) + 290;
if(move == 290){
return -870 + "px";
}
return move + "px";
}
});
$(".imgs").stop().fadeOut(5).fadeIn(500);
});
});
</script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 290px;
margin: 200px auto;
overflow: hidden;
position: relative;
}
ul{
width: 1800px;
height: 430px;
margin-left: 0;
}
ul>li{
list-style: none;
float: left;
}
span{
display: block;
width: 40px;
font-size: 50px;
background-color: rgba(0,0,0,0.3);
color: white;
text-align: center;
line-height: 80px;
}
div .leftArrow{
position: absolute;
top: 50%;
left: 0;
margin-top: -40px;
}
div .rightArrow{
position: absolute;
top: 50%;
right: 0;
margin-top: -40px;
}
div>a{
display: none;
}
div:hover a{
display: inline-block;
}
</style>
</head>
<body>
<div>
<ul class="imgs">
<!-- 图片大小为 290 * 430 -->
<li><img src="img/item1.jpg" /></li>
<li><img src="img/item2.jpg" /></li>
<li><img src="img/item3.jpg" /></li>
<li><img src="img/item4.jpg" /></li>
</ul>
<a href="javascript:void(0)" class="ls"><span class="leftArrow"><</span></a>
<a href="javascript:void(0)" class="rs"><span class="rightArrow">></span></a>
</div>
</body>
</html>