本文实例为大家分享了JavaScript实现旋转木马轮播图的具体代码,供大家参考,具体内容如下

html代码段

图片自己添加,或者使用本人的上传照片,拉到最下面即可看见

css代码段:

初始化 reset

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {

margin: 0;

padding: 0

}

body, button, input, select, textarea {

font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;

color: #666;

}

ol, ul {

list-style: none;

}

a {

text-decoration: none;

}

fieldset, img {

border: 0;

vertical-align: top;

}

a, input, button, select, textarea {

outline: none;

}

a, button {

cursor: pointer;

}

.wrap {

width: 1200px;

margin: 100px auto;

}

.slide {

height: 500px;

position: relative;

}

.slide li {

position: absolute;

left: 200px;

top: 0;

}

.slide li img {

width: 100%;

}

.arrow {

opacity: 0;

position: absolute;

top: 50%;

z-index: 1000;

width: 100%;

}

.prev, .next {

width: 76px;

height: 112px;

position: absolute;

z-index: 99;

}

.prev {

left: 0;

background: url(../images/prev.png) no-repeat;

}

.next {

right: 0;

background-image: url(../images/next.png);

}

js代码段:

这个是封装好的的js代码,直接引用即可

function animate(obj, json, fn) {

clearInterval(obj.timer);

obj.timer = setInterval(function () {

var flag = true;

for (var k in json) {

if (k === "opacity") {

var leader = getStyle(obj, k) * 100;

var target = json[k] * 100;

var step = (target - leader) / 10;

step = step > 0 ? Math.ceil(step) : Math.floor(step);

leader = leader + step;

obj.style[k] = leader / 100;

} else if (k === "zIndex") {

obj.style.zIndex = json[k];

} else {

var leader = parseInt(getStyle(obj, k)) || 0;

var target = json[k];

var step = (target - leader) / 10;

step = step > 0 ? Math.ceil(step) : Math.floor(step);

leader = leader + step;

obj.style[k] = leader + "px";

}

if (leader != target) {

flag = false;

}

}

if (flag) {

clearInterval(obj.timer);

if (fn) {

fn();

}

}

}, 15);

}

function getStyle(obj, attr) {

if (window.getComputedStyle) {

return window.getComputedStyle(obj, null)[attr];

} else {

return obj.currentStyle[attr];

}

}

定义onload函数,获取每一个对象,设置鼠标经过事件,鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失;然后.设置图片位置(给对象赋值)

window.onload = function () {

//alert("外部的JS");

//找人

var wrap = document.getElementById("wrap");

var arrow = document.getElementById("arrow");

var arrLeft = document.getElementById("arrLeft");

var arrRight = document.getElementById("arrRight");

var slide = document.getElementById("slide");

var ul = slide.children[0];

var lis = ul.children;//所有图片

//1.鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失

wrap.onmouseover = function () {

animate(arrow, {"opacity": 1});

};

wrap.onmouseout = function () {

animate(arrow, {"opacity": 0});

};

//2.设置图片位置

var config = [

{

"width": 400,

"top": 20,

"left": 50,

"opacity": 0.2,

"zIndex": 2

},//0

{

"width": 600,

"top": 70,

"left": 0,

"opacity": 0.8,

"zIndex": 3

},//1

{

"width": 800,

"top": 100,

"left": 200,

"opacity": 1,

"zIndex": 4

},//2

{

width: 600,

top: 70,

left: 600,

opacity: 0.8,

zIndex: 3

},//3

{

"width": 400,

"top": 20,

"left": 750,

"opacity": 0.2,

"zIndex": 2

}//4

];//其实就是一个配置单 规定了每张图片的大小位置层级透明度

//获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置

function assign() {

for (var i = 0; i < lis.length; i++) {

animate(lis[i], config[i], function () {

flag = true;//动画执行完成后重新打开阀门

});

}

}

assign();

//3.点击箭头旋转

//点击右箭头

arrRight.onclick = function () {

if (flag) {

flag = false;//关闭阀门

//把开始的元素放到最后

config.push(config.shift());

assign();

}

};

//点击左箭头

arrLeft.onclick = function () {

if (flag) {

flag = false;

//把最后的元素放到开始

config.unshift(config.pop());

assign();

}

};

//4.添加节流阀

var flag = true;//表示阀门是打开的

};

本人刚刚开始入行前端,希望大佬有什么意见的话,欢迎给我留言,你们的支持就是我最大的动力

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

html旋转木马 代码,JavaScript实现旋转木马轮播图相关推荐

  1. 【JavaScript】网页轮播图

    目录 HTML搭建 功能实现 小圆圈事件 左右按钮事件 自动播放 轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...

  2. 用javascript做网页轮播图

    文章目录 网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...

  3. 原生javascript之实战 轮播图

    成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: 1 <div class=" ...

  4. php图片左右滚动代码怎么写,css图片滚动代码怎么写?轮播图横向滚动展示

    在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...

  5. 前端全栈大佬是如何使用javaScript实现一个轮播图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset=" ...

  6. JavaScript实现网页轮播图

    轮播图也成为焦点图,是网页中比较常见的网页特效 一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...

  7. 用JavaScript制作天猫轮播图

    **pacity和rgba的区别:** 1. 都可以设置透明的效果, 2. 用opacity来设置透明效果时文本的内容也会变透明,而用rgba来设置是文本的内容不会改变.例如:opacity:0.3; ...

  8. HTML+JavaScript网页背景轮播图完整源码

    轮播图运行效果 轮播图实现完整源码 <!DOCTYPE html> <html lang="en">

  9. 用HTML5和JavaScript做一个轮播图

    说明: (1)代码中四个div内的图片 " images/14.jpg " , " images/15.jpg " , " images/16.jpg ...

  10. 用原生JavaScript实现简单轮播图

    html代码 <div id="banner"><ul><li><img src="images/1.jpg"> ...

最新文章

  1. java基础 Unsafe
  2. 二叉树的基本特性和二叉树的几种基本操作的机制_深入理解二叉树01 二叉树基础
  3. 【GamePlay】入门篇
  4. C#实现简体繁体转换代码示例
  5. Java中的复合设计模式
  6. xss植入_前端安全之XSS攻击
  7. JAVA垃圾收集机制剖析
  8. 适合MySQL master/slave模式的JDBC driver: lbpool
  9. MySql 8 命令
  10. 漂亮的抽奖C#源代码
  11. 博客园文章索引生成器
  12. 中控考勤机管理员密码清除
  13. 理解多线程(四)--原子量和原子操作
  14. 上海跳槽后 如何进行公积金转移?
  15. balanced-match 源码解析
  16. spring-data-redis 实现用户登录次数限制以及冻结时间重试机制
  17. mysql json数据引号处理
  18. 3D目标检测——代码理解——Second代码:数据处理kitti_dataset.py的理解
  19. 图像像素类型转换与归一化
  20. ZipEntry实现文件解压缩与目录解压缩

热门文章

  1. C++基础知识(7)
  2. html5 边框效果图,图片边框border-image的用法
  3. 神奇的e——Python编程算e
  4. luogu P1510 精卫填海
  5. SFP+光纤模块使用
  6. python递归排列组合_Python 排列组合
  7. NHibernate]集合类(Collections)映射
  8. vue js 前端实现PDF文件下载的三种方式 解决vue下载pdf文件打开文件后空白
  9. 文件管理服务器搭建教程,文件服务器搭建教程
  10. 游戏跟计算机不兼容,端游不兼容怎么解决