淡入淡出式
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title></title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" charset="utf-8"></script>
<style>
.pic{
position: relative;
}
img{
position: absolute;
width:700px;
height:400px;
display: none;
}
</style>
<body>
<div class="pic">
<img src="你的图片1" alt="图片">
<img src="你的图片2" alt="图片">
<img src="你的图片3" alt="图片">
<img src="你的图片4" alt="图片">
</div>
</body>
<script >
$(function(){
var index = -1;
var pic = $('.pic>img');
var length = pic.length;
var transform = function(){
if(index === length - 1){
index = 0;
}else{
index++;
}
pic.eq(index - 1).fadeOut(2000);
pic.eq(index).fadeIn(2000);
};
transform();
setInterval(transform,3000);
});
</script>
</html>
无缝滑动式
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style media="screen">
.pic{
width: 700px;
height: 400px;
position: relative;
top:0;
left: 0;
overflow: hidden;
}
.pic_content{
height: 100%;
position: absolute;
top:0;
left: 0;
}
.pic_content img{
height: 100%;
float: left;
}
</style>
<body>
<div class="pic">
<div class="pic_content">
<!--在第一章图前添加第四张图的内容，在第最后一张图后添加第一张图的内容-->
<img src="你的图片4" alt="图片4">
<img src="你的图片1" alt="图片1">
<img src="你的图片2" alt="图片2">
<img src="你的图片3" alt="图片3">
<img src="你的图片4" alt="图片4">
<img src="你的图片1" alt="图片1">
</div>
</div>
</body>
<script>
//图片展示
$(function () {
var pic_content = $(".pic_content");
var Img = $(".pic img");
var Width = $(".pic").width();
Img.width(Width);
var picturelength = Img.length;
var picWidth = Width * picturelength;
var index = 0;
pic_content.width(picWidth);
picMove();
setInterval(picMove, 5000); //必须大于动画执行时长
function picMove() {
index++;
if (index === picturelength) {
index = 1;
$(".pic_content").css("left", -Width + "px");
index = 2;
} else if (index === -1) {
index = picturelength - 1;
$(".pic_content").css("left", -index * Width + "px");
index = picturelength - 2;
}
$(".pic_content").animate({"left": -index * Width + "px"}, 3000);
}
});
</script>
</html>
版权声明：本文为Dilomen原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。