<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>淡入淡出点击+定时轮播</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#bac{ 100%;height: 340px;background-color: lightgrey;position:relative;}
.pic_area{margin:0 auto; 790px;height: 340px;}
.pic_all{margin:0 auto; 790px;height: 340px;position:relative;}
.pic_2,.pic_3,.pic_4{position:absolute;top:0;}
.point{background-color: white;11px;height: 11px;border-radius: 50%;margin-left:14px;float:left;}
.point_all{position:absolute;top:320px;left:calc(50% - 43px);}
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.point:hover{background-color: #999!important;}
.other{ 100%;height: 20px;background-color: grey;}
</style>
<body>
<div id="bac">
<div class="pic_area">
<div class="pic_all">
<img class="pic pic_1" src="img/1.jpg"/>
<img class="pic pic_2" src="img/2.jpg"/>
<img class="pic pic_3" src="img/3.jpg"/>
<img class="pic pic_4" src="img/4.jpg"/>
</div>
<div class="point_all clearfix">
<div class="point point1"></div>
<div class="point point2"></div>
<div class="point point3"></div>
<div class="point point4"></div>
</div>
</div>
</div>
<div class="other">
</div>
<script type="text/javascript">
var count=0;
var timer;
var ul = document.getElementsByClassName('point_all');
var lis = document.getElementsByClassName('point');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
count=this.index;
};
}
//js的定时器,BOM
function start(){
timer=setInterval(function(){
var num = (count)%4;
$(".pic").eq(num).fadeIn(2000).siblings().fadeOut(2000);
$(".point").eq(num).css("background-color","#999").siblings().css("background-color","white");
count++;
},3000)
}
start();
$(".point").on("click",function (){
// $(".pic_all:nth-child(1)").fadeIn(1200).siblings().fadeOut(1200); 这里不能用siblings()，因为此时默认的选择器是$(".pic_all")
// if($(".pic").attr("style","opacity")){
// return false;
// } 有错误，会增加一个style opacity属性
$(".pic").eq(count).fadeIn(2000).siblings().fadeOut(2000); //$("p:eq(1)")括号内部只能是固定数字，$(".pic").eq(count)括号内部可以是变量
$(".point").eq(count).css("background-color","#999").siblings().css("background-color","white");
})
$(".pic_area").mouseenter(function stopInterval(){
clearInterval(timer);
}) //避开了连点问题，因为定时器会重启，而单纯的点击事件事件则不存在连点问题，或者说本身淡入淡出就不涉及连点问题
$(".pic_area").mouseleave(function restartInterval(){
start();
})
// $(".point2").on("click",function (){
// $(".pic_2").fadeIn(1200).siblings().fadeOut(1200);
// $(".point2").css("background-color","#999").siblings().css("background-color","white");
// })
</script>
</body>
</html>
将以上粘贴到前端开发工具中可以实现
//部分为注释
jq部分主要分为四块，分别为：
1，获取相应标签的index；
2，设置定时器，此时注意，将定时器放在函数内并赋给一个变量，变量需设为全局变量；
3，利用index去设置点击事件，此时应注意:eq() .eq()的区别， .eq()括号内可以设变量，:eq()不能，设置变量可以提高可扩展性；
4，鼠标进入和离开事件，其中应注意 mouseover 对应mouseout 和 mouseenter 对应mouseleave的区别，可以搜索，不赘述；
图片自己随便加
以上