JS实现横向轮播图(初级版)


Posted in Javascript onJune 24, 2020

本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下

描述:

轮播图,初级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的位移达到效果。

效果:

JS实现横向轮播图(初级版)

代码:

js文件:

/*
* 工厂模式
* */
 
var Method=(function () {
 return {
 loadImage:function (arr,callback) {
 var img=new Image();
 img.arr=arr;
 img.list=[];
 img.num=0;
 img.callback=callback;
// 如果DOM对象下的事件侦听没有被删除掉,将会常驻堆中
// 一旦触发了这个事件需要的条件,就会继续执行事件函数
 img.addEventListener("load",this.loadHandler);
 img.self=this;
 img.src=arr[img.num];
 },
 
 loadHandler:function (e) {
 this.list.push(this.cloneNode(false));
 this.num++;
 if(this.num>this.arr.length-1){
 this.removeEventListener("load",this.self.loadHandler);
 this.callback(this.list);
 return;
 }
 this.src=this.arr[this.num];
 },
 
 $c:function (type,parent,style) {
 var elem=document.createElement(type);
 if(parent) parent.appendChild(elem);
 for(var key in style){
 elem.style[key]=style[key];
 }
 return elem;
 }
 }
})();

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #carousel,#imgCon img{
 width: 1200px;
 height: 400px;
 }
 #carousel
 {
 position: relative;
 margin: auto;
 overflow: hidden;
 }
 #imgCon{
 width: 6000px;
 height: 400px;
 position: absolute;
 left: 0;
 font-size: 0;
 transition: all 1s;
 }
 #leftBn,#rightBn
 {
 position: absolute;
 top:170px;
 }
 #leftBn{
 left: 20px;
 }
 #rightBn
 {
 right: 20px;
 }
 ul{
 position: absolute;
 bottom: 20px;
 list-style: none;
 margin: auto;
 left: 45%;
 }
 li
 {
 width: 20px;
 height: 20px;
 border: 1px solid red;
 border-radius: 10px;
 float: left;
 text-align: center;
 color: white;
 cursor: default;
 line-height:20px;
 font-size: 12px;
 margin-left: 8px;
 }
 </style>
</head>
<body>
 <div id="carousel">
 <div id="imgCon">
 <img src="img/a.jpeg">
 <img src="img/b.jpeg">
 <img src="img/c.jpeg">
 <img src="img/d.jpeg">
 <img src="img/e.jpeg">
 </div>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 <img src="img/left.png" id="leftBn">
 <img src="img/right.png" id="rightBn">
 </div>
<script>
 /*
 *
 * 数据驱动显示
 *
 * */
 var imgCon,leftBn,rightBn,lis,ul,prevLi;
 var position=0;//图像的标记 第一张0 第二张1...
 init();
 function init() {
 imgCon=document.getElementById("imgCon");//图
 leftBn=document.getElementById("leftBn");//左按钮
 rightBn=document.getElementById("rightBn");//右按钮
 lis=document.getElementsByTagName("li");//下方数字右按钮
 ul=document.getElementsByTagName("ul")[0];
 leftBn.addEventListener("click",clickHandler);
 rightBn.addEventListener("click",clickHandler);
 for(var i=0;i<lis.length;i++){//为每隔小Li 也就是底部数字赋值
 lis[i].num=i;
 lis[i].addEventListener("click",liClickHandler);
 }
 changeLi();
 }
 
// setInterval(autoImg,3000);可以实现自动
 
 function autoImg() {//自动轮播
 position++;
 if(position>4) position=0;
 changeImg();
 }
 
 function clickHandler(e) {
 e= e || window.event;
 if(this===leftBn){
 position--;
 if(position<0) position=4;
 }else if(this===rightBn){
 position++;
 if(position>4) position=0;
 }
 changeImg();
 }
 
 function liClickHandler(e) {
 e= e || window.event;
 position=this.num;
 changeImg();
 }
 function changeImg() {//图片的转换效果 唯一
 imgCon.style.left=-position*1200+"px";//一次一张图片的位移
 changeLi();
 }
 
 function changeLi() {//底部数字的转换效果
 if(prevLi){
 prevLi.style.backgroundColor="rgba(255,0,0,0)";
 }
 prevLi=lis[position];
 prevLi.style.backgroundColor="rgba(255,0,0,0.5)";
 }
</script>
</body>
</html>

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

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

Javascript 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
js表数据排序 sort table data
Feb 18 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 #Javascript
微信小程序开发中var that =this的用法详解
Jan 18 #Javascript
JavaScript实现滑动门效果
Jan 18 #Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 #Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 #Javascript
JS数组方法join()用法实例分析
Jan 18 #Javascript
JavaScript进制转换实现方法解析
Jan 18 #Javascript
You might like
Yii操作数据库的3种方法
2014/03/11 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
ionic3双击返回退出应用的方法
2019/09/17 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python常用知识点汇总
2016/05/08 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
关于元旦的广播稿
2014/02/16 职场文书
党员干部承诺书范文
2014/03/25 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
电气自动化求职信
2014/06/24 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
检讨书怎么写
2015/01/23 职场文书
k-means & DBSCAN 总结
2021/04/27 Python