html旋转木马 代码,JavaScript实现旋转木马轮播图
本文实例为大家分享了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实现旋转木马轮播图相关推荐
- 【JavaScript】网页轮播图
目录 HTML搭建 功能实现 小圆圈事件 左右按钮事件 自动播放 轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
- 用javascript做网页轮播图
文章目录 网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...
- 原生javascript之实战 轮播图
成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: 1 <div class=" ...
- php图片左右滚动代码怎么写,css图片滚动代码怎么写?轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
- 前端全栈大佬是如何使用javaScript实现一个轮播图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset=" ...
- JavaScript实现网页轮播图
轮播图也成为焦点图,是网页中比较常见的网页特效 一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...
- 用JavaScript制作天猫轮播图
**pacity和rgba的区别:** 1. 都可以设置透明的效果, 2. 用opacity来设置透明效果时文本的内容也会变透明,而用rgba来设置是文本的内容不会改变.例如:opacity:0.3; ...
- HTML+JavaScript网页背景轮播图完整源码
轮播图运行效果 轮播图实现完整源码 <!DOCTYPE html> <html lang="en">
- 用HTML5和JavaScript做一个轮播图
说明: (1)代码中四个div内的图片 " images/14.jpg " , " images/15.jpg " , " images/16.jpg ...
- 用原生JavaScript实现简单轮播图
html代码 <div id="banner"><ul><li><img src="images/1.jpg"> ...
最新文章
- mysql pdo 查询一条数据_pdo mysql怎么输出第1条 第4条 第7条数据
- 成功解决OSError: cannot open resource File F:Python36\lib\site-packages\PIL\ImageFont.py, self.font
- 批次管理相关事务代码
- php获得注册信息,PHP网络编程:获取用户的注册信息[2]
- Docker部署Elasticsearch集群
- 在redhat enterprise 5 下安装ORACLE 10g
- centos 6.5 搭建svn
- 算法笔记_面试题_8.零钱兑换
- [ERROR CRI]: unable to check if the container runtime at “/var/run/dockershim.sock“
- mysql 多选数据类型_【多选题】Mysql定点数数据类型包括( )。【本题2项正确】...
- 个人2台网站服务器,急急急 如何架设个人web服务器
- 民数记研读3——于宏洁
- Ubuntu fatal: 无法访问 ‘https://github.com/xxxxx/xxxxx‘:Failed to connect to github.com port 443: 连接超时
- Adobe Premiere Pro 2020 入门教程(三)首选项和快捷键的设置
- 统计学习方法_支持向量机SVM实现
- 一个简单的判断三角形形状的C程序
- 房产中介租房平台小程序v4.1.61+ 前端(模块版)安装教程
- 苹果手机左上角的数字怎么弄_出了新朋友,莫忘老朋友,苹果Macbook这款小键盘能让你键步如飞...
- 计算机工程毕业论文任务书,计算机工程毕业设计论文任务书开题报告模板.doc...
- KVM 虚机镜像操作, 扩容和压缩