<!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{width: 100%;height: 340px;background-color: lightgrey;position:relative;}
.pic_area{margin:0 auto;width: 790px;height: 340px;}
.pic_all{margin:0 auto;width: 790px;height: 340px;position:relative;}
.pic_2,.pic_3,.pic_4{position:absolute;top:0;}
.point{background-color: white;width: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{width: 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的区别，可以搜索，不赘述；

图片自己随便加

以上

js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）的更多相关文章

  1. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  4. jq交叉淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js中用面向对象的思想——淡入淡出轮播图

    首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...

  6. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. vue渐变淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  9. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

随机推荐

  1. Python 入门 之 反射

    Python 入门 之 反射 1.反射 : (自省) ​ 反射主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省). Python面向对象中的反射:通过字符串的形式操作对象的相关属性.P ...

  2. JavaScript使用readAsDataURL读取图像文件

    JavaScript使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以 ...

  3. 可能是把 Java 内存区域讲的最清楚的一篇文章

    出处:  可能是把 Java 内存区域讲的最清楚的一篇文章 Java 内存区域详解 写在前面 (常见面试题) 基本问题 拓展问题 一 概述 二 运行时数据区域 2.1 程序计数器 2.2 Java 虚 ...

  4. QuickSort(快排)的JAVA实现

    QuickSort的JAVA实现 这是一篇算法课程的复习笔记 用JAVA对快排又实现了一遍. 先实现的是那个easy版的,每次选的排序轴都是数组的最后一个: package com.algorithm ...

  5. Redis从入门到高可用，分布式实践

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  6. 重学HTML5的语义化

    干了这么多年的前端,之前面试的时候经常会遇到面试官提问:你是如何理解HTML的语义化的? 说实话,之前遇到这个问题的时候,都是从网上找参考答案,然后记下来,用自己的语言重新组织一下,就变成自己的理解了 ...

  7. js 获取当前月份 第一天和最后一天

    js 获取当前月份 第一天和最后一天 var now = new Date(); //当前日期 var nowMonth = now.getMonth(); //当前月 var nowYear = n ...

  8. java 周期时期计算

    package org.apple.date; import java.text.SimpleDateFormat; import java.util.Calendar; import java.ut ...

  9. Linux 配置：Xmanager连接Linux图形界面

    想要在远程终端使用用图形界面来操作和控制Linux服务器,就在windows下像使用MSTSC一样.linux通过XDMCP来提供这种支持,我们只要用一个终端仿真软件如:xmanager就可以实现,但 ...

  10. 移远模组-BC95-工作模式之间关系

    三种连接状态下,均可发送上行数据( CoAP/UDP): IDLE 下发送数据, 模块会进入 CONNECT 状态: PSM 下发送是数据会唤醒模块, 进入 CONNECT,或者当 TAU(TAU 的 ...