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 相关文章推荐
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
js获取checkbox值的方法
Jan 28 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
继续学习javascript闭包
Dec 03 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
详解JavaScript中return的用法
May 08 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
详解JavaScript 事件流
Sep 02 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
php一个找二层目录的小东东
2012/08/02 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
python文件和目录操作函数小结
2014/07/11 Python
python+django加载静态网页模板解析
2017/12/12 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python如何导入依赖包
2020/07/13 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
门卫工作岗位职责
2013/12/17 职场文书
关于爱国的标语
2014/06/24 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书