原生 js 左右切换轮播图
使用方法：
可能很多人对轮播图感兴趣，下面奉上本人的 原生 js 轮播代码
复制 js 到页面的最底部，样式在 css 里改，js 基本不用动，这个是用 原生写的 轮播图，样式可以写自己喜欢的样式，什么都不用改，只改变样式就行，页面结构的id 要与js的相对应li随便加。li 随便加的意思就是说你可以加无数个图片。每个li 里装一个图片，或者是其他什么元素，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#parent{
width:50%;
height:200px;
border:1px solid red;
margin:0 auto;
} #imgBox{
width:500px;
height:200px;
position:relative;/*必须有===*/
overflow:hidden;/*必须有===*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul{
/*动画就是改变ul的left值的效果，所以一定要有定位*/
position:absolute;/*必须有*/
left:0;/*必须有*/ }
li{list-style: none;/*必须有*/
height:200px;/*必须有*/
width:500px;/*必须有*/
float:left;/*必须有*/
}
.span{
display:inline-block;
width:20px;
height:20px;
line-height:20px;
text-align: center;
border-radius:50%;
color:white;
}
</style>
</head>
<body>
<div id="parent">
<div id="imgBox">
<ul id='ul'>
<li style='background:red;'>第一个</li>
<li style='background:yellow;'>第二个</li>
<li style='background:pink;'>第三个</li>
<li style='background:green;'>第四个</li>
<li style='background:blue;'>第五个</li>
<li style='background:blue;'>第6个</li>
<li style='background:green;'>第7个</li>
<li style='background:blue;'>第8个</li>
<li style='background:green;'>第9个</li>
<li style='background:blue;'>第10个</li>
</ul>
</div>
<a href="#" id="prev">向左</a>
<a href="#" id="next">向右</a>
<!-- 放小圆点的盒子-->
<div id="arcBox">
<!-- 小圆点的位置 -->
</div>
</div>
<script>
var chefElement = {
bgColor1:'#cccccc',//小圆点的背景颜色
bgColor2:'red',//获得焦点的小圆点的背景颜色
animationSpeed:1, //每多少毫秒移动一次
minSpeed:5,//每次移动的距离
stopTime:5000, //动画停留的时间，毫秒为单位 包含移动所花费的时间 //获取页面元素
prev:document.getElementById('prev'),
next:document.getElementById('next'),
parent:document.getElementById('parent'),
ul:document.getElementById('ul'),
li:document.getElementById('ul').getElementsByTagName('li'),
arc:document.getElementById("arcBox"),
liWidth:document.getElementById('ul').getElementsByTagName('li')[0].offsetWidth,
type:true,
nextTimer:null,
prevTimer:null,
parent_n:null
}; //初始化小圆点/指定放图片的盒子 ul 的宽度
var elemSpan = (function(){
chefElement.ul.style.width = chefElement.liWidth*chefElement.li.length+'px';
for(var i = 0;i<chefElement.li.length;i++){
chefElement.li[i].index = i;
var span = document.createElement('span');
span.className = 'span';
span.index = i;
span.style.background = chefElement.bgColor1;
span.innerHTML = i+1;
chefElement.arc.appendChild(span);
}
var objSpan = chefElement.arc.getElementsByTagName('span'); //创建完以后第一个小圆点显示指定的颜色
objSpan[0].style.background = chefElement.bgColor2;
return objSpan;
})(); //给每个小圆点添加事件
chefElement.arc.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "span"){
if(chefElement.type){
showImg(target.index);
changeBackgroundColor(target)
chefElement.type = true;
}
}
} //改变小圆点的背景颜色
function changeBackgroundColor(obj){
for(var i = 0;i<elemSpan.length;i++){
elemSpan[i].style.background = chefElement.bgColor1;
}
elemSpan[obj.index].style.background = chefElement.bgColor2;
} //根据参数显示对应的图片。
function showImg(inde){
var this_li = chefElement.li[0].index; //把第一个元素放到最后面。
if(inde>this_li){
var x = inde-this_li;
for(var y = 0;y<x;y++){
chefElement.ul.appendChild(chefElement.li[0]);
}
} //把最后一个元素放到第一的位置
if(inde<this_li){
var x_x = this_li-inde;
for(var g = 0;g<x_x;g++){
chefElement.ul.insertBefore(chefElement.li[chefElement.li.length-1],chefElement.li[0]);
}
}
} chefElement.prev.onclick = function(){
if(chefElement.type){
clearInterval(chefElement.prevTimer);
chefElement.ul.insertBefore(chefElement.li[chefElement.li.length-1],chefElement.li[0]);
chefElement.liWidth = chefElement.li[0].offsetWidth;
chefElement.ul.style.left = '-'+chefElement.liWidth+'px';
chefElement.prevTimer = setInterval(pre,chefElement.animationSpeed);
chefElement.type = false;
changeBackgroundColor(chefElement.li[0]);
}
};
next.onclick = function(){
if(chefElement.type){
chefElement.liWidth = 0;
clearInterval(chefElement.nextTimer);
chefElement.nextTimer = setInterval(nex,chefElement.animationSpeed);
chefElement.type = false;
changeBackgroundColor(chefElement.li[1]);
}
}; //next动画函数
function nex(){
chefElement.ul.style.left = '-'+chefElement.liWidth+ 'px';
chefElement.liWidth += chefElement.minSpeed ;
if(chefElement.liWidth >= chefElement.li[0].offsetWidth){
clearInterval(chefElement.nextTimer);
chefElement.ul.appendChild(chefElement.li[0]);
chefElement.ul.style.left = 0;
chefElement.type = true;
}
} //prev动画函数
function pre(){
chefElement.ul.style.left = '-'+chefElement.liWidth+'px';
chefElement.liWidth -= chefElement.minSpeed ;
if(chefElement.liWidth <= -1){
chefElement.ul.style.left = 0;
clearInterval(chefElement.prevTimer);
chefElement.type = true;
}
} chefElement.parent.onmouseover = function(){
clearInterval(chefElement.parent_n);
};
chefElement.parent.onmouseout = function(){
chefElement.parent_n = setInterval(next.onclick,chefElement.stopTime);
}; //动画播放
chefElement.parent_n = setInterval(next.onclick,chefElement.stopTime);
</script>
</body>
</html>
原生 js 左右切换轮播图的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 【原生JS】层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 原生js实现的轮播图，易用+可多用
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 【jquery】一个简单的单选、多选、全选、反选、删除的小功能
对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...
- 解决eclipse中egit中的cannot open git-upload-pack问题
一.背景 今天在使用eclipse的egit插件进行检出远程代码到本地时,出现了cannot open git-upload-pack错误,后经过努力解决该问题,记录下方便回顾和交流! 二.出现原因 ...
- SQL Server output经典使用
output经典使用 分类: sql2012-02-16 18:17 409人阅读 评论(0) 收藏 举报 outputinserttabledeletegonull OUTPUT是SQL SERVE ...
- 模拟赛1029d2
[问题描述]祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到轨道上并加入原有序列中.一旦有三个或更多同色的珠子变 ...
- max number of threads [1024] for user [lish] likely too low, increase to at least [2048]
# cat /etc/security/limits.d/-nproc.conf # Default limit for number of user's processes to prevent # ...
- 用#define来实现多份近似代码 - map,set中的应用
在stl中map,set内部都是使用相同的红黑树实现,map对应模板参数key_type,mapped_type,而set对应模板参数没有mapped_type 两者都支持insert操作 pair& ...
- ActiveMQ的几种消息持久化机制
为了避免意外宕机以后丢失信息,需要做到重启后可以恢复消息队列,消息系统一般都会采用持久化机制. ActiveMQ的消息持久化机制有JDBC,AMQ,KahaDB和LevelDB,无论使用哪种持久化方式 ...
- Delphi基本数据类型---枚举、子界、集合、数组
参考:http://blog.csdn.net/qustdong/article/details/9230743 参考:http://www.cnblogs.com/xumenger/p/440222 ...
- python中的Iterable, Iterator,生成器概念
https://nychent.github.io/articles/2016-05/about-generator.cn 这个深刻 谈起Generator, 与之相关的的概念有 - {list, s ...
- Power BI for Office 365介绍
微软在七月份发布了一个新产品,它建立在微软的云的第一个数据平台- Power BI for Office 365.Satya Nadella,服务器和工具业务总裁,在当天的上午在微软的年度全球合作伙伴 ...