基于jQuery实现自动或点击切换效果

效果图

功能：元素自动切换，当点击下方小圆点时，控制上方元素同步切换

方法：主要是定义一个全局变量，通过自增变化来控制自动切换效果，其中当自身显示时，兄弟元素隐藏；给小圆点添加单击事件，当点击时，传递自身对象给单击切换函数，通过对象获取点击对象的下标值，从而切换元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题</title><link rel="stylesheet" href="../css/reset.css"><script src="./jquery-3.4.1.min.js"></script><style type="text/css">#box{width: 800px; height: 340px; margin: 100px auto;position: relative;}.aaa{width: 800px; height: 300px; line-height: 300px; text-align: center;font-size: 100px; color: #fff;position: absolute; top: 0; left: 0;}#div1{background: red;z-index: 1;}#div2{background: green;}#nav{width: 100px; height: 20px; position: absolute; bottom: 0; left: 50%;margin-left: -50px;}#nav p{width: 20px; height: 20px;border-radius: 10px;background: #ccc;margin: 0 10px;float: left;cursor: pointer;}#nav .active{width: 40px; background: blue;}</style><script>$(function(){// 全局变量var c = 0;var aaa = $("#box .aaa");// 定义自动切换效果function gunDongBoFang(){c++;    //c = 1if(c == aaa.length){c = 0;  };console.log(c);// 当自身显示时，兄弟元素隐藏aaa.eq(c).show().siblings(".aaa").hide();// 字符串值无法创建动画(比如：background-color：red)$("#nav p").eq(c).animate({width:"40px"}, 500).css({backgroundColor:"blue"}).siblings("p").css({backgroundColor:"#ccc", width:"20px"});};// 定义单击小圆点切换效果function danJiBoFang(obj){// 获取当前单击对象的下标值c = obj.index();// 当自身显示时，兄弟元素隐藏aaa.eq(c).show().siblings(".aaa").hide();// 字符串值无法创建动画(比如：background-color：red)$("#nav p").eq(c).animate({width:"40px"}, 500).css({backgroundColor:"blue"}).siblings("p").css({backgroundColor:"#ccc", width:"20px"});};// 定义单击小圆点事件$("#nav p").click(function(){danJiBoFang($(this));})// 定时器，每2秒执行一次var time = setInterval(gunDongBoFang, 2000);// 鼠标移入#box元素中，停止定时器$("#box").mouseenter(function(){clearInterval(time);});    // 鼠标移出#box元素后，开始定时器$("#box").mouseleave(function(){//鼠标移出时，开始定时器，并将定时器赋值给time变量，而当鼠标再次移入时，则刚好删除上次的定时器，不会累加time = setInterval(gunDongBoFang, 2000);});    });</script></head>
<body><div id="box"><div class="aaa" id="div1">0</div><div class="aaa" id="div2">1</div><!-- 图片下方两个小圆点 --><div id="nav"><p class="active"></p><p></p></div></div>
</body>
</html>

基于jQuery实现自动或点击切换效果相关推荐

【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览源码下载实现的代码. html代码: <a ...
基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="sli ...
基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
使用css实现点击切换效果
使用css制作简单的点击切换效果,参考了以下教程:css实现的轮播和点击切换(无js版) 首先先制作一个容器,用来容纳所显示的内容: HTML代码: <html></html> ...
html叠加层,JavaScript实现多个重叠层点击切换效果的方法
本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtm ...
Vue3 使用vant actionBar组件后对icon图标的点击切换效果/点击收藏/取消收藏
制作收藏的点击收藏.取消收藏的图标切换效果效果: vue: <template><van-action-bar><van-action-bar-icon icon=&q ...
鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果
今天来分享一下[鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码]. 最后的效果如下: Html代码部分: <!doctype html>&l ...
基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览源码下载部分代码: <div class=&quo ...

基于jQuery实现自动或点击切换效果

效果图

基于jQuery实现自动或点击切换效果相关推荐

最新文章

热门文章