js原生轮播

  今天用js做了轮播图,做的不怎么好,希望大家能够看懂。

效果:

  1.鼠标放在轮播图上自动停止

  2.鼠标离开轮播图自动播放

  3.鼠标点击轮播图上的小圆点跳转到相应的图上。

代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js轮播</title>
<style type="text/css" media="screen">
*{margin: 0;padding: 0;}
body{width: 100%}
ul{width: 100%;height: 500px;list-style: none;position: relative;overflow: hidden}
ul li {float: left;width: 100%;height: 100%;position: absolute;top: 0;left: 0;text-align: center;line-height: 500px;font-size: 40px;font-weight: bold;background: red;z-index: 0;opacity: 0}
ul li:nth-child(2){background: yellow}
ul li:nth-child(3){background: pink}
.anbox{position: absolute;z-index: 999;left: 50%;top: 90%;transform: translate(-50%, 0);}
.an{width: 20px;height: 20px;background: white;float: left;margin-left: 20px;border-radius: 50%;opacity: 0.6}
.an:nth-child(1){margin: 0;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<div class="anbox">
<div class="an"></div>
<div class="an"></div>
<div class="an"></div>
</div>
</ul>
<script src="js/c.js"></script>
<script>
$tag('body')[0].onload = aa;
var yuans = $class('an');
var lis = $tag('li');
var ul = $tag('ul')[0];
var b = 1;//控制图片和小圆点的下标值; // 轮播
function aa(){
reset();
lis[b-1].style.zIndex = b;
lis[b-1].style.transition = 1+'s';
lis[b-1].style.opacity = 1;
yuans[b-1].style.background = $random255();
yuans[b-1].style.opacity = 1;
b++;
if(b==lis.length+1){//重置b值
b=1;
}
}
// 鼠标放上去
var time =setInterval(aa,2000);
ul.onmousemove = ting;
function ting(){
clearInterval(time);
}
ul.onmouseout = function(){
ting = null;
time =setInterval(aa,2000);
} //鼠标放在小圆点的时候
for(var x=0;x<yuans.length;x++){
yuans[x].onclick = yuan;
yuans[x].value = x;
}
function yuan(){
var i = this.value;
reset();
lis[i].style.zIndex =4;
lis[i].style.opacity = 1;
yuans[i].style.background = $random255();
} //点击上一个或者下一个
var page = $class('tag');
for(var x of page){
x.onclick = pages;
}
function pages(){
if(this.id == 'left'){
font();
}
}
function reset(){ //小圆点和图全部还原
for(var j=0;j<lis.length;j++){
lis[j].style.zIndex = 0;
lis[j].style.opacity = 0;
yuans[j].style.background = "white";
yuans[j].style.opacity = 0.6;
}
}
</script>
</body>
</html>

  轮播就到这里了,里面还有自己封装的函数,就使用了标签,类名,id获取。

js原生轮播的更多相关文章

  1. js原生轮播图

    轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...

  2. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 小白之js原生轮播图

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Js原生轮播-直接上代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  6. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  7. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  8. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  9. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

随机推荐

  1. C# 文件上传和下载

    一.   在Form中一定要将encType设为"multipart/form-data": <form id="WebForm3" method=&qu ...

  2. Application Request Route实现IIS Server Farms集群负载

    首先你装一个web 平台安装程序:https://www.microsoft.com/zh-CN/download/details.aspx?id=6164 安装完之后会出现打开界面,iis中也可找到 ...

  3. 5分钟搭建 nginx +php --------------(LNMP)新手专用

    5分钟搭建 nginx +php --------------(LNMP)新手专用 2014-11-14 16:48 88876人阅读 评论(2) 收藏 举报 版权声明:本文为博主原创文章,未经博主允 ...

  4. 代码编辑器之sublime text

    http://www.iplaysoft.com/sublimetext.html 1.特点: 中文乱码问题:另外,很多朋友反映表示打开中文会有乱码,其实是因为ST2本身只支持UTF-8编码,而我们常 ...

  5. PHP_EOL DIRECTORY_SEPARATOR

    换行符 PHP_EOL unix系列用 \n windows系列用 \r\n mac用 \r PHP中可以用PHP_EOL来替代,以提高代码的源代码级可移植性 路径上的斜杠    DIRECTORY_ ...

  6. 【nginx】之常用命令

    查看版本号: nginx -s reload  :修改配置后重新加载生效 nginx -s reopen  :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试ngi ...

  7. 使用python操作word

    有两种方式: 使用win32com 使用docx 1.使用win32com扩展包 只对windows平台有效 代码: # coding=utf-8 import win32com from win32 ...

  8. css-去掉IE浏览器自带×号

    1.去除IE输入框的叉号 /* 去除IE输入框的叉号 */ ::-ms-clear, ::-ms-reveal{ display:none; } 2.前端多行展现代码,多余部分使用...代替 div{ ...

  9. 配置允许匿名用户登录访问vsftpd服务,进行文档的上传下载、文档的新建删除等操作

    centos7环境下 临时关闭防火墙 #systemctl stop firewalld 临时关闭selinux #setenforce 0 安装ftp服务 #yum install vsftpd - ...

  10. 关于Centos7 firewalld防火墙开放端口后仍不能访问ftp和nginx的问题解决

    我在阿里轻量应用服务器搭建ftp服务器这篇博客中把防火墙换为iptables,因为当时无论我怎么设置firewalld,就是无法访问ftp服务器,今天在翻看其他博客的时候,突然发现firewalld有 ...