淡入淡出式
<!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>
html,body{
height: 100%;
}
/* 轮播图片 */
.pic{
width:50%;
height:50%;
position: relative;
}
img{
position: absolute;
width:100%;
height:100%;
display: none;
}
</style>
<body>
<div class="pic">
<img src="https://img-blog.csdn.net/20181014225547582?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
<img src="https://img-blog.csdn.net/20181014225628228?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
<img src="https://img-blog.csdn.net/20181014225707763?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
<img src="https://img-blog.csdn.net/20181014225738169?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
</div>
</body>
<script >
$(function(){
var index=-1;
var pic=$('.pic>img');
var transform=function(){
if(index==3){
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">
html,body{
height: 100%;
}
.pic{
width: 50%;
height: 50%;
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="https://img-blog.csdn.net/20181014225738169?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
<img src="https://img-blog.csdn.net/20181014225547582?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
<img src="https://img-blog.csdn.net/20181014225628228?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
<img src="https://img-blog.csdn.net/20181014225707763?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
<img src="https://img-blog.csdn.net/20181014225738169?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
<img src="https://img-blog.csdn.net/20181014225547582?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RpbG9tZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="山水图">
</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").css("width",picWidth+"px");
picMove();
setInterval(picMove,1000);
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");
}
$(".pic_content").animate({"left":-index*Width},3000);
}
});
</script>
</html>