案例---左右焦点轮播图(tb)

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<style>
body,
ul,
ol,
li,
img {
margin: 0;
padding: 0;
list-style: none;
} #box {
width: 520px;
height: 280px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
} .ad {
width: 520px;
height: 280px;
/*overflow: hidden;*/
position: relative;
} #box img {
width: 520px;
} .ad ol {
position: absolute;
right: 10px;
bottom: 10px;
} .ad ol li {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
} .ad ol li.current {
background: yellow;
} .ad ul li {
float: left;
} .ad ul {
position: absolute;
top: 0;
width: 2940px;
} .ad ul li.current {
display: block;
} #focusD {
display: none;
} #focusD span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
} #focusD #right {
right: 5px;
left: auto;
}
</style>
</head> <body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="data:images/01.jpg" /></li>
<li><img src="data:images/02.jpg" /></li>
<li><img src="data:images/03.jpg" /></li>
<li><img src="data:images/04.jpg" /></li>
<li><img src="data:images/05.jpg" /></li>
</ul>
</div>
<!--相框-->
<div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
</div>
</div>
<script src="common.js"></script>
<script> //获取最外面的div
var box = my$("box");
//获取相框
var ad = box.children[0];
//获取相框的宽度
var imgWidth = ad.offsetWidth;
//获取ul
var ulObj = ad.children[0];
//获取装span左右焦点的div
var focusD = my$("focusD"); //显示和隐藏左右焦点的div----为box注册事件
box.onmouseover = function () {
focusD.style.display = "block";
};
box.onmouseout = function () {
focusD.style.display = "none";
}; //点击右边的按钮
var index = 0;
my$("right").onclick = function () {
if (index < ulObj.children.length - 1) {
index++;
animate(ulObj, -index * imgWidth);
}
};
//点击左边的按钮
my$("left").onclick = function () {
if (index > 0) {
index--;
animate(ulObj, -index * imgWidth);
}
}; </script> </body> </html>

JS---案例---左右焦点轮播图(tb)的更多相关文章

  1. 原生js焦点轮播图

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

  2. js焦点轮播图

    汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...

  3. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  4. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

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

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

  6. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  7. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  8. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  9. JS+css3焦点轮播图PC端

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

随机推荐

  1. mysql的事物,外键,与常用引擎

    ### part1 时间类型 date YYYY-MM-DD 年月日 (出现日期) time HH:MM:SS 时分秒 (竞赛时间) year YYYY 年份值 (红酒年份 82年矿泉水) datet ...

  2. Celery框架实现异步执行任务

    Celery 官方 Celery 官网:http://www.celeryproject.org/ Celery 官方文档英文版:http://docs.celeryproject.org/en/la ...

  3. 2019年12月4日Linux开发手记

    OK,经过昨天对V4L2工作流程的学习,现在已经大体了解了V4L2的工作原理,现在开始对V4L2的API的学习,目标:1.打开摄像头 2.储存图像 3.关闭摄像头,API网址:Linux Media ...

  4. length of the longest substring without repeating character

    Given a string, find the length of the longest substring without repeating characters. 来源:力扣(LeetCod ...

  5. 感觉async await 异步编程 并不能提升性能?

    我有2个方法 代码相同 都是执行上传文件IO操作 一个同步 一个异步 接着我用POSTMAN 分别用200个线程 去同时测试2个接口 结果很意外 2个接口 同时执行完成的速度 异步更慢 之前经常看别人 ...

  6. 简单聊一聊spring cloud stream和kafka的那点事

    Spring Cloud Stream is a framework for building highly scalable event-driven microservices connected ...

  7. e = e || window.event的区别及用法

    本文链接:https://blog.csdn.net/qq_41348029/article/details/81288481 e = e || window.event 在做事件处理时,用于区分IE ...

  8. 教程 Redis+ flask+vue 在线聊天

    知识点 基于 Server-Sent Event 工作方式,Web 即时通信 Redis 包 发布订阅功能的使用 flask 快速入门,常用对象实例方法函数 Vuejs 列表页面自动渲染 效果图 代码 ...

  9. SQL追踪器的安装和使用

    SQL追踪器主要作用快速查出错误SQL语言.此工具能几秒钟追踪出sql 数据库操作,能几分钟内分析任意项目系统数据库表结构,瞬间无刷新测试.调试 php代码 第一步:下载 https://pan.ba ...

  10. 输入URL按下enter键后发生的事

    输入URL按下enter键后浏览器和服务器各自发生的事. 浏览器 1.用户在浏览器中输入URL地址 2.浏览器解析用户输入的URL地址=>域名+端口 3.浏览器检查本地缓存中是否存在这个域名=& ...