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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
vue环形进度条组件实例应用
Oct 10 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的常用扩展函数
2014/10/23 PHP
php unlink()函数使用教程
2018/07/12 PHP
laravel 数据验证规则详解
2019/10/23 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
vue.js的提示组件
2017/03/02 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python实现两个文件合并功能
2018/04/01 Python
Flask-Mail用法实例分析
2018/07/21 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
咖啡店自主创业商业计划书
2014/01/22 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
企业挂职心得体会
2014/09/10 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014年教研组工作总结
2014/11/26 职场文书
邀请函样本
2015/02/02 职场文书
团委工作总结2015
2015/04/02 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
nginx配置之并发频次限制
2022/04/18 Servers