jq 方法 简易轮播图
时间:2019-09-25
本文章向大家介绍jq 方法 简易轮播图,主要包括jq 方法 简易轮播图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
css + body部分 注意img父级的设置
<style> * { margin: 0; padding: 0; } ul li { list-style: none; } #box { height: 260px; width: 500px; margin: 50px auto; position: relative; overflow: hidden; } /* 这里img的父级xian不设置宽度 */ /* 下面根据图片的数量 */ #box div { position: absolute; top: 0; left: 0; } #box div img { width: 500px; height: 260px; float: left; } .but .right { height: 50px; width: 50px; position: absolute; left: 450px; top: 105px; } .but .left { height: 50px; width: 50px; position: absolute; top: 105px; left: 0; } .dian { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); } .dian li { float: left; height: 10px; width: 10px; border-radius: 5px; background-color: #E84A7E; margin: 0 5px; } .dian .act { background-color: papayawhip; } </style>
<body>
<div id="box">
<div id="box1">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/1.jpg" />
</div>
<div class="but">
<button class="right">>>></button>
<button class="left"><<<</button>
</div>
<ul class="dian">
</ul>
</div>
</body>
js部分
<script src="jquery.js"></script> <script> // 1选择元素 var $box = $("#box1") var $img = $box.find("img") var $right = $(".right") var $left = $(".left") var $dian = $(".dian") // 2获取图片的个数 var num = $img.length; // 3给img的父级设置宽度 数量*1个的宽度 $box.width($img.length * $img.width()) console.log($img.width()) // $box[0].style.width = $img.length * $img.width() +"px" // console.log($box.width()) // 设置图片起始索引 var index = 0 //4点击右按钮是 //因为是让img的直接父级滚动 //如果不在最后加上第一张的话, //当动画走到最后一张时再点击的时候应该是到第一张, //但是这个时候第一张会从右边出来,所以, //在最后添加一个img // 改变index的值为1 $right.on("click", function() { if (index === num - 1) { //5不加不在最后加上第一张的为0 // index = 0 index = 1 // 6当它走到最后的时候,再点击还是会从右边出来 // 所以强行把box1这个盒子回到最开始的位置 $box[0].style.left = 0 + "px" } else { index++ } // console.log(index) $box.stop().animate({ // 7每点击一次走的长度 当前这个图片*一个图片的宽度 left: -index * $img.width() }) //10将class属性设置给当前图片的索引,图片走到谁身上,第几个小点点就变色 $dian.find("li").eq(index).addClass("act").siblings().removeClass() }) $left.on("click", function() { if (index === 0) { //点击左按钮的时候,设置索引 和 box1走到最后 之后的位置 index = $img.length - 2 $box[0].style.left = -($img.length) * $img.width() + "px" // console.log($box[0].style.left) } else { index-- } // console.log(index) $box.stop().animate({ left: -index * $img.width() }) //10将class属性设置给当前图片的索引,图片走到谁身上,第几个小点点就变色 $dian.find("li").eq(index).addClass("act").siblings().removeClass() }) var str = "" // 8循环遍历num,给ul加li for (var i = 0; i < num; i++) { str += `<li></li>` } $dian.html(str) // 9并且给第一张加上class属性 $dian.find("li").eq(0).addClass("act") //11 开启计时器,执行点击事件 //相当于每隔一定的时间去点击了一次左右按钮 // 注意 用到click的方法 var time; time = setInterval(function() { $right.click() }, 3000) //12 hover方法 //鼠标进入 停止自动轮播 //鼠标移出 开启 $box.hover(function() { clearInterval(time) }, function() { time = setInterval(function() { $right.click() }, 3000) }) //13 最难理解的一步 click根据需要可以改成mouseenter //鼠标点击的是谁 获取当前的索引值 给它保存到actindex上 并设置给index $dian.find("li").on("click", function() { var actindex = $(this).index() index = actindex //并让当前的点击的开启 $box.stop().animate({ left: -index * $img.width() }) //点击的这个小点点加上属性 $dian.find("li").eq(index).addClass("act").siblings().removeClass() }) </script>
原文地址:https://www.cnblogs.com/shun1015/p/11588397.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 拿好了!Linux 运维必备的 13 款实用工具!
- 自制CA证书设置ssl证书
- MySQL数据迁移TcaplusDB实践
- TKE之初识容器探测器
- 2.3.2 JDK动态代理 -《SSM深入解析与项目实战》
- mac设备安装nginx注意事项
- 《研发运营安全白皮书(2020年)》深度解读:全生命周期安全体系将是未来趋势
- 深度学习故障诊断:残差收缩网络 Residual Shrinkage Networks
- Java基于SSM的个人博客系统(源码 包含前后台)
- 聊聊RespServer
- Spring Boot系列之读取配置
- Flutter中State深入分析理解
- Xenomai3.1+ubuntu 18.04/16.04
- 聊聊RespCommand
- Python爬取网站图片