js+jq 淡入淡出轮播(点击+定时+鼠标进入移出事件)
<!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 淡入淡出轮播(点击+定时+鼠标进入移出事件)的更多相关文章
- js渐隐渐现透明度变化淡入淡出轮播图
js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- jq交叉淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js中用面向对象的思想——淡入淡出轮播图
首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换 3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...
- jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue渐变淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- JS实现小图放大轮播效果
JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...
随机推荐
- Hive 教程(七)-DML基础
DML,Hive Data Manipulation Language,数据操作语言: 通俗理解就是数据库里与数据的操作,如增删改查,统计汇总等: Loading files into tables ...
- 二维数组中的查找——牛客剑指offer
题目描述: 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整 ...
- mysql update join
随手记录一下 UPDATE information f1 LEFT JOIN topic f2 ON f1.id = f2.id SET f1.img_url = f2.img_url
- 定制ListView的界面(让列表中不仅有文字还有图片fruitImage.setImageResource(fruit.getImageId());)
1.定义自己的实体类来作为ListView的适配类型如: public class Fruit { private String name;//水果的名字 private int imageId;// ...
- mongo分布式锁Java实现
一.分布式锁使用场景: 代码部署在多台服务器上,即分布式部署. 多个进程同步访问一个共享资源. 二.需要的技术: 数据库:mongo java:mongo操作插件类 MongoTemplate(mav ...
- Jenkins+GitHub 项目环境搭建和发布脚本(二)
Jenkins+gitHub项目搭建配置 项目发布脚本 profilesScript.sh (支持不同环境配置文件) #!/bin/bash ACTIVE=$ JENKINS_PATH=/var/li ...
- Go语言标准库之fmt.Scan
Go语言fmt.Scan使用指南 本文介绍了Go语言中fmt包中从标准输入获取数据的的Scan系列函数.从io.Reader中获取数据的Fscan系列函数以及从字符串中获取数据的Sscan系列函数的用 ...
- 使用Spring Mail发送QQ邮件
一.邮箱设置 QQ邮箱设置:http://service.mail.qq.com/cgi-bin/help?id=28, 下面这些服务需要开启(需要设置邮箱独立密码): 二.applicationCo ...
- SQL函数取汉字拼音首字母
)='') ) as begin ), ) , ,) if @chn > 'z' if( @chn < '八' ) set @c = 'A' else if ( @chn < '嚓' ...
- ZenCart通过Contact Us接收垃圾邮件的过滤方案
最近收到一些通过Contact Us进行垃圾外链群发的邮件,虽然可以通过在Contact Us增加验证码来解决,但不利于客户体验.所以我们可以通过简单的关键词过滤来实现,一般垃圾外链都含有“[url= ...