一个简单的轮播图代码

#轮播图dome

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="lbbox"><ul class="oUl"><a href=""><li><img src="./imager/1.jpg" alt=""></li></a><a href=""><li><img src="./imager/2.jpg" alt=""></li></a><a href=""><li><img src="./imager/3.jpg" alt=""></li></a><a href=""><li><img src="./imager/4.jpg" alt=""></li></a><a href=""><li><img src="./imager/5.jpg" alt=""></li></a><a href=""><li><img src="./imager/1.jpg" alt=""></li></a></ul><span class="lf">〈</span><span class="rg">〉</span><div class="raidusYuan"><span class="yuanS"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span></div></div><script src="./js/index.js"></script>
</body>
</html>

*{padding: 0;margin: 0;text-decoration: none;list-style: none;
}
.lbbox{width:980px;height:420px;margin: 80px auto;position: relative;overflow: hidden;
}
.oUl{width: 9999999px;height:420px;position: absolute;top: 0;left: 0;
}
.oUl a{display: block;width: 980px;height:420px;float: left;
}
.oLi a li img{width: 980px;height:420px;
}
.lf,.rg{width: 50px;height: 50px;position: absolute;background: black;text-align: center;font-weight: bold;line-height: 50px;font-size:30px;color: rgb(255, 255, 255);opacity: 0.4;cursor: pointer;
}
.lf{left: 0;top:210px;
}
.rg{right: 0;top:210px;
}
.yuanS{background: black;
}
.raidusYuan{width: 300px;height: 30px;position: absolute;left: 327px;top: 347px;
}
.raidusYuan span{cursor: pointer;margin-left: 30px;height: 20px;border-radius: 50%;width: 20px;display: block;float: left;border: solid 1px rgb(255, 255, 255)
}

var timer = null;
//创建定时器的开关
var sliderPage = document.getElementsByClassName('oUl')[0];
//获取ul标签
var moverWidth = sliderPage.children[0].offsetWidth;
//获取一张轮播图的宽度
var num = sliderPage.children.length - 1;
//获取所以轮播图的张数
var leftBtn = document.getElementsByClassName('lf')[0];
//获取左按钮
var rightBtn = document.getElementsByClassName('rg')[0];
//获取右按钮
var oSPan = document.getElementsByClassName('raidusYuan')[0].getElementsByTagName('span')
//获取圆点
var key = true;
//锁
var index = 0;
//创建一个变量用来判断样式圆点在那个位置function changeIndex(_index){//给圆点添加样式函数for(var i = 0; i < oSPan.length; i ++){//获取每个圆点的位置oSPan[i].className = ' ';//让当前所有的圆点的class变为空}oSPan[_index].className = "yuanS"//让当前的index的值也就是当前轮播图圆点变为黑色。
}for(var i = 0; i < oSPan.length; i ++){//给当前每一个圆点加点击事件(function(i){//会触发闭包，使用立即执行函数oSPan[i].onclick = function(){//添加事件key = false;//将锁关上clearTimeout(timer);//清楚定时器index = i;//让当前的Index等于当前点击按钮对等轮播图的位置startMove(sliderPage, {left: - index * moverWidth,},function(){//starMove函数是dom运动函数,让当前ul的位置 减去点击的位置的数字* 宽度key = true;//将锁打开timer = setTimeout(autoMove,1500);//执行图片自己动changeIndex(index)//改变圆点样式})}}(i))}function autoMove(direction){//轮播图自左向右自动运动clearTimeout(timer)//清除定时器if(key){//先看锁开了没有，如果锁是关着的则不执行，防止两个定时器一起动发生冲突。key = false;//将锁关闭if(!direction || direction == "left->right"){//如果当前的值是"left->right"index ++;//让index加一个值startMove(sliderPage,{left : sliderPage.offsetLeft - moverWidth}, function () {//图片运动函数，让当前Ul的宽度减去初始的moveWidth宽度if(sliderPage.offsetLeft == -num * moverWidth){//如果越界了，当前Ul的宽度等于所有轮播图的张数的宽度index = 0;//让圆点值等于1sliderPage.style.left = '0px';//让轮播图归位第一张}changeIndex(index);   //执行圆点样式timer = setTimeout(autoMove,1500);//再一次执行自动轮播key = true;//将锁打开console.log(index)})}else if(direction == "right->left"){//如果点击是自右向左if(sliderPage.offsetLeft == 0){//先判断当前的Ul轮播图是不是第一张sliderPage.style.left = - num * moverWidth + 'px';//如果是让当前ul的宽度值直接等于所有轮播图的最后一张的宽度值index = num;///让圆点等于最后一张轮播图位置数字的值}index --;//如果不是第一张就index --一个值startMove(sliderPage,{left : sliderPage.offsetLeft + moverWidth,}, function () {//执行动画changeIndex(index);//执行圆点样式timer = setTimeout(autoMove,1500);//执行自动定时器key = true;//让锁打开})}}
}leftBtn.onclick = function(){//给左按键添加点击事件
autoMove('right->left');
//传入参数自右向左
}
rightBtn.onclick = function(){//给右键添加点击事件
autoMove('left->right');
//传入参数自左向右
}setTimeout(autoMove,1500);
//初始自动加载函数//获取当前元素的class值的方法
function getStyle (dom, attr){if(window.getComputedStyle){return window.getComputedStyle(dom, null)[attr];}else{return dom.currentStyle[attr];}
}
//动画方法，看之前的博客文章有写到
function startMove(dom, attrObj, callback) {clearInterval(dom.timer);var iSpeed = null, iCur = null;dom.timer = setInterval(function () {var bStop = true;for (var attr in attrObj) {if (attr == 'opacity') {iCur = parseFloat(getStyle(dom, attr)) * 100} else {iCur = parseFloat(getStyle(dom, attr));}iSpeed = (attrObj[attr] - iCur) / 7;iSpeed = iSpeed > 0 ?  Math.ceil(iSpeed) : Math.floor(iSpeed);if(attr == 'opacity'){dom.style.opacity = (iCur + iSpeed) / 100;}else{dom.style[attr] = iCur + iSpeed + 'px'}if( iCur != attrObj[attr]){bStop = false;}}if(bStop) {clearInterval(dom.timer);typeof callback == 'function' && callback()}}, 30)
}

一个简单的轮播图代码相关推荐

jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...
制作一个简单的轮播图
记录一下轮播图制作(这里用的是原生js制作的) 前期准备工作 1.自己用的顺手的开发工具,我这里用的时HBuilder来写的 2.创建项目 3.在项目中创建images.css.js文件夹,把需要制作 ...
原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了首先是构造html: <div id=&qu ...
使用jQuery，写一个简单的轮播图，实现切换功能！
1.谈到jquery,想必大家都知道,它是一个js库.使用起来简单又方便,接下来就给大家看看我用jquery实现的轮播图吧! <!DOCTYPE html> <html lang=& ...
使用jQuery写一个简单的轮播图（笔记）
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
学习使用vue实现一个简单的轮播图
目录关于template外壳: 关于图片的自动切换的处理: 为什么要把第一张图片外的 li 克隆一份放到 li 列表的最后: 函数节流处理 : 关于template外壳: 创建一个div,用于内容的 ...
jQuery实现一个简单的轮播图
一.轮播图内容组成包括:4张图片,图片标号,向左翻页,向右翻页的几个部分,如下图所示: 二.实现功能 1.加载页面后,4张图片默认从第一张图片开始轮播,索引值为1. 2.当把鼠标over到图片上时, ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
html 图片轮播实例,简单实现轮播图效果的实例
一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; ...

一个简单的轮播图代码

一个简单的轮播图代码相关推荐

最新文章

热门文章