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 相关文章推荐
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
AngularJs表单验证实例详解
May 30 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
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并发查询MySQL的实例代码
2017/08/09 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Vue表单验证插件的制作过程
2017/04/01 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
家长会演讲稿范文
2014/01/10 职场文书
毕业留言寄语大全
2014/04/10 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
2015年暑假工作总结
2015/07/13 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
创业计划之特色精品店
2019/08/12 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS