js实现轮播图的完整代码


Posted in Javascript onOctober 26, 2020

今天写一个完整的轮播图,首先它需要实现三个功能:

1.鼠标放在小圆点上实现轮播

2.点击焦点按钮实现轮播

3.无缝自动轮播

轮播图的原理:

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片。

js实现轮播图的完整代码

html布局:

<div id="box" class="all">
 <div class="inner"> <!-- 相框-->
 <ul>
 <li><a href="#"><img src="images/18.jpg" width="550" height="320" alt=""></a></li>
 <li><a href="#"><img src="images/19.jpg" width="550" height="320" alt=""></a></li>
 <li><a href="#"><img src="images/14.jpg" width="550" height="320" alt=""></a></li>
 <li><a href="#"><img src="images/17.jpg" width="550" height="320" alt=""></a></li>

 </ul>
 <ol> <!--里面存放小圆点-->

 </ol>
 </div>
 <div class="focusD" id="arr">
 <span id="left"><</span>
 <span id="right">></span>
 </div>
</div>

css样式:

* {
 margin: 0;
 padding: 0;
 }
 /*<--清除底部三像素距离-->*/
 img {
 vertical-align: top;
 }

 .all {
 width: 550px;
 height: 320px;
 margin: 100px auto;
 padding: 5px;
 border: 1px solid #ccc;
 position: relative;
 }

 .inner {
 position: relative;
 width: 550px;
 height: 320px;
 background-color: pink;
 overflow: hidden;
 }

 .inner ul {
 width: 1000%;
 list-style: none;
 position: absolute;
 top: 0;
 left: 0;
 }

 .inner ul li {
 float: left;
 }

 .focusD {
 position: absolute;
 left: 0;
 top: 50%;
 width: 550px;
 padding: 0 10px;
 height: 30px;
 box-sizing: border-box;
 display: none;
 }

 .inner ol {
 position: absolute;
 right: 30px;
 bottom: 10px;
 }

 .inner ol li {
 width: 15px;
 display: inline-block;
 height: 15px;
 margin: 0 3px;
 cursor: pointer;
 line-height: 15px;
 text-align: center;
 background-color: #fff;
 }
 /*当前的高亮的小圆点*/
 .inner ol .current {
 background-color: orange;
 color: #fff;
 }

 .focusD span {
 display: inline-block;
 width: 25px;
 font-size: 24px;
 height: 30px;
 color: #ccc;
 line-height: 30px;
 text-align: center;
 background: rgba(255, 255, 255, 0.3);
 cursor: pointer;
 }

 #left {
 float: left;
 }

 #right {
 float: right;
}

显示效果:

js实现轮播图的完整代码

js部分:

 接下来我们要写js 代码 ,首先我们先获取我们需要的所有元素 。注:my$("id")即document.getElementById,为了简便即建的方法。

var index=0;
 //获取最外面的div
 var box = my$("box");
 //获取相框
 var inner = box.children[0];
 //获取去相框的宽度
 var imgWidth = inner.offsetWidth;
 // 获取ul
 var ulObj = inner.children[0];
 //获取ul中所有的li
 var list = ulObj.children;
 //获取ol
 var olObj = inner.children[1];
 //获取焦点
 var arr = my$("arr");

然后我们需要给它创建小按钮即小圆点并注册鼠标进入事件,再此之前 我们要明白,小圆点 1 2 3 并不是写死的,它是根据ul li中的图片张数来决定的 ,所以 我们要先在js中给div中的ol中的添加li(即小圆点),并且给ul中的图片几li添加索引值以便下一步的操作。

//创建小按钮-----根据ul中li的个数
 for (var i = 0; i < list.length; i++) {
 var liObjs = document.createElement("li");
 olObj.appendChild(liObjs);
 liObjs.innerHTML = (i + 1);
 //在ol中每个li中增加自定义属性,添加索引值
 liObjs.setAttribute("index", i);
 //注册鼠标进入事件
 liObjs.onmouseover = function () {
 //先干掉所有背景颜色
 for (var j = 0; j < olObj.children.length; j++) {
 olObj.children[j].removeAttribute("class");
 }
 //设置当前鼠标进来的类样式
 this.className = "current";
 //获取ol中li的索引值
 index = this.getAttribute("index");
 //移动ul
 animate(ulObj, -index * imgWidth); //移动动画函数
 };
 }
 //设置第一个ol中li的背景颜色
 olObj.children[0].className = "current";

要实现无缝滚动 就需要多一张图片才行 ,即克隆第一张图片,放到最后面。

//克隆ol中第一个li放到最后一个
 ulObj.appendChild(ulObj.children[0].cloneNode(true));

下一步就要实现点击左右的按钮实现轮播

//点击右边按钮
 my$("right").onclick=clickHandle;
 function clickHandle() {
 if (index==ulObj.children.length-1){
 ulObj.style.left=0+"px";
 index=0;
 }
 index++;
 animate(ulObj,-index*imgWidth);
 if (index==list.length-1){
 olObj.children[0].className="current";
 olObj.children[olObj.children.length-1].className="";
 }else {
 for (var i=0;i<olObj.children.length;i++){
  olObj.children[i].className="";
 }
 olObj.children[index].className="current";
 }
 };
 //点击左边按钮
 my$("left").onclick=function () {
 if (index==0){
 index=list.length-1;
 ulObj.style.left=-index*imgWidth+"px";
 }
 index--;
 animate(ulObj,-index*imgWidth);
 for (var i=0;i<olObj.children.length;i++){
 olObj.children[i].className="";
 }
 olObj.children[index].className="current";
 };

最后一步就是自动轮播,即可以创建一个定时器,每隔一段时间就调用左右按钮的点击事件,相当于点按钮,但是要注意的是当鼠标放进相框的时候要清除定时器,不然在你点击的时候它还是会自动轮播。

完整js代码:

<script>
 var index=0;
 //获取最外面的div
 var box = my$("box");
 //获取相框
 var inner = box.children[0];
 //获取去相框的宽度
 var imgWidth = inner.offsetWidth;
 // 获取ul
 var ulObj = inner.children[0];
 //获取ul中所有的li
 var list = ulObj.children;
 //获取ol
 var olObj = inner.children[1];
 //获取焦点
 var arr = my$("arr");

 //创建小按钮-----根据ul中li的个数
 for (var i = 0; i < list.length; i++) {
 var liObjs = document.createElement("li");
 olObj.appendChild(liObjs);
 liObjs.innerHTML = (i + 1);
 //在ol中每个li中增加自定义属性,添加索引值
 liObjs.setAttribute("index", i);
 //注册鼠标进入事件
 liObjs.onmouseover = function () {
 //先干掉所有背景颜色
 for (var j = 0; j < olObj.children.length; j++) {
 olObj.children[j].removeAttribute("class");
 }
 //设置当前鼠标进来的类样式
 this.className = "current";
 //获取ol中li的索引值
 index = this.getAttribute("index");
 //移动ul
 animate(ulObj, -index * imgWidth); //移动动画函数
 };
 }
 //设置第一个ol中li的背景颜色
 olObj.children[0].className = "current";
 //克隆ol中第一个li放到最后一个
 ulObj.appendChild(ulObj.children[0].cloneNode(true));


 var timeId=setInterval(clickHandle,3000);

 my$("box").onmouseover=function(){
 arr.style.display="block";
 clearInterval(timeId);
 };
 //点击右边按钮
 my$("right").onclick=clickHandle;
 function clickHandle() {
 if (index==ulObj.children.length-1){
 ulObj.style.left=0+"px";
 index=0;
 }
 index++;
 animate(ulObj,-index*imgWidth);
 if (index==list.length-1){
 olObj.children[0].className="current";
 olObj.children[olObj.children.length-1].className="";
 }else {
 for (var i=0;i<olObj.children.length;i++){
  olObj.children[i].className="";
 }
 olObj.children[index].className="current";
 }
 };
 //点击左边按钮
 my$("left").onclick=function () {
 if (index==0){
 index=list.length-1;
 ulObj.style.left=-index*imgWidth+"px";
 }
 index--;
 animate(ulObj,-index*imgWidth);
 for (var i=0;i<olObj.children.length;i++){
 olObj.children[i].className="";
 }
 olObj.children[index].className="current";
 };

 my$("box").onmouseout=function(){
 arr.style.display="none";
 timeId=setInterval(clickHandle,3000);
 };



 // 设置一个元素,移动到指定位置
 function animate(element, target) {
 clearInterval(element.timeId);
 element.timeId = setInterval(function () {
 var current = element.offsetLeft;
 var step = 9;
 step = current > target ? -step : step;
 current += step;
 if (Math.abs(target - current) > Math.abs(step)) {
 element.style.left = current + "px";
 } else {
 clearInterval(element.timeId);
 element.style.left = target + "px";
 }
 }, 10);
 }
function my$(id) {
 
 return document.getElementById(id);


}
</script>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
JQuery扩展对象方法操作示例
Aug 21 #jQuery
详解Vue结合后台的列表增删改案例
Aug 21 #Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 #Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 #Javascript
小程序开发基础之view视图容器
Aug 21 #Javascript
详解微信小程序的 request 封装示例
Aug 21 #Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 #Javascript
You might like
php 无限分类的树类代码
2009/12/03 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python实现的字典值比较功能示例
2018/01/08 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
魅力教师事迹材料
2014/01/10 职场文书
工作迟到检讨书
2014/02/21 职场文书
高三学习决心书
2014/03/11 职场文书
节约用水倡议书
2014/04/16 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
法定代表人身份证明书
2014/09/10 职场文书
工作检讨书怎么写
2015/01/23 职场文书
病房管理制度范本
2015/08/06 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
导游词之吉林花园山
2019/10/17 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js