Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下
整个页面的文件结构如下图所示:
html部分代码:
旋转木马轮播图
在html部分引入的myStyle.css文件部分代码
@charset "UTF-8";
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;
}
.prev ,.next{
width:76px;
height:112px;
position:absolute;
top:50%;
margin-top:-56px;
background:url(../images/prev.png) no-repeat;
z-index:99;
}
.next{
right:0;
background-image:url(../images/next.png);
}
在html部分引入的animate.js文件部分代码
/**
* Created by RENPINGSHENG on 2018/4/6.
*/
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[k] = 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";
}
console.log("target:" + target + "leader:" + leader + "step:" + step);
if (leader != target){
flag = false;
}
}
if (flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},15)
}
function getStyle(obj,attr){
if (obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
在html部分引入的my.js文件部分代码
/**
* Created by RENPINGSHENG on 2018/4/6.
*/
window.onload = function () {
var wrap = document.getElementById("wrap");
var slide = document.getElementById("slide");
var ul = slide.children[0];
var lis = ul.children;
var arrow = document.getElementById("arrow");
var arrRight = document.getElementById("arrRight");
var arrLeft = document.getElementById("arrLeft");
var config = [
{
width:400,
top:20,
left:50,
opacity:0.2,
zIndex:2
},
{
width:600,
top:70,
left:0,
opacity:0.8,
zIndex:3
},
{
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{
width:600,
top:70,
left:600,
opacity:0.8,
zIndex:3
},
{
width:400,
top:20,
left:750,
opacity:0.2,
zIndex:2
}
];
wrap.onmouseover = function () {
animate(arrow,{"opacity":1});
}
wrap.onmouseout = function () {
animate(arrow,{"opacity":0});
}
function assign() {
for(var i = 0;i < lis.length;i++){
animate(lis[i],config[i],function(){
flag = true;
})
}
}
var flag = true;
assign();
arrRight.onclick = function () {
flag = false;
config.push(config.shift());
assign();
};
arrLeft.onclick = function () {
flag = false;
config.unshift(config.pop());
assign();
}
}
代码完成后,用浏览器打开网页,效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
Android 旋转木马轮播,js实现旋转木马轮播图效果相关推荐
- Three.js开发:环境贴图效果
Three.js支持环境贴图效果,通过设置场景的背景(background),增强显示效果,环境贴图一般使用全景图,分成6张图片,以立体贴图(CubeTexture)的方式进行加载. 官网示例效果: ...
- html 旋转木马 轮播,JS实现旋转木马式图片轮播效果
本文实例为大家分享了js图片轮播的具体代码,供大家参考,具体内容如下 主要html代码: Document function $(id){ return document.getElementById ...
- html实现横向轮播,js实现横向轮播效果
html: js横向轮播 body { margin: 0; } #container { position: relative; width: 100%; height: 300px; overfl ...
- html京东自动轮播,js 京东首页轮播图实现(透明度切换)
思路: 1.定义 图片和图片轮播dot初始下标 index为0,并为第一张轮播图和第一个dot赋予状态 2. 切换到下一张图片函数moveNext ,函数内将当前下标index的图片和dot恢复原来状 ...
- 原生js实现简单的焦点图效果
用到一些封装好的运动函数,主要是定时器 效果为图片和图片的描述定时自动更换 <!DOCTYPE html> <html><head><meta charset ...
- web前端学习基础教程,简单的图片旋转木马自动轮播js代码
一款简单的图片旋转木马自动轮播js代码,图片叠加轮播切换效果,支持点击左右箭头按钮控制切换. 案例效果图 案例源码: <!DOCTYPE html> <html lang=" ...
- Zepto.js 3D图片轮播旋转插件
下载地址 Zepto.js 3D图片轮播旋转插件,基于jquery的旋转木马图片切换插件. dd:
- Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)
前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以 ...
- 图片竖轮播html,JS实现纵向轮播图(初级版)
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下 描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
最新文章
- 面试官:谈谈你对 Spring AOP 的了解?请加上这些内容,绝对加分!
- 计算机一级讲评,一级WPS Office——全国计算机等级考试专家讲评
- [cdq分治][树状数组] Jzoj P4419 hole
- mysql循环遍历获取_MySQL 全表遍历
- android抽屉风格,Android开发实战之拥有Material Design风格的抽屉式布局
- VB调用ORACLE存储过程返回多记录集
- POP模式,提示密码错误的问题(密码是对的)
- python双线性插值函数_OpenCV ——双线性插值(Bilinear interpolation)
- Ubuntu20.04安装有道词典 + 卸载
- Java实现一个简单的计算器功能
- JAVA中LIST 和 MAP的区别
- Mybatis+Servlet+jsp
- VPS安装msf教程
- HTML网上书店静态HTML网页作业作品 大学生三联书店网页设计制作成品 简单DIV CSS布局网站...
- mysql允许远程链接,开放3306端口
- 涨知识 | 电机的十万个为什么?
- 文科生学计算机有前途吗,文科生学计算机专业难吗
- 没有一只蟹能活着爬出上海
- Linux使用tc模拟网络延迟和丢包
- IRS:智能反射表面(可重构智能表面)
热门文章
- 【大数据平台】基于Spark的美国新冠肺炎疫情数据分析及预测
- 二年级的女儿用计算机算算术,一年级的孩子一分钟口算多少题才算能达标?
- GPS数据处理_C语言
- 安科瑞消防应急照明和疏散指示在上海汽车城酒店的应用
- php 代码 咖啡店,#5 php中的变量(二) | 祭夜の咖啡馆
- 网站性能优化时Cookie常用的优化方式
- BUUCTF 密码题 old-fashion 小心猪圈
- Oracle Drop误删表、Delete误删表数据后恢复方法
- 预约有礼 | 迅镭激光与您相约2023深圳工业展,诚邀参观!
- CMfg-SC(云制造服务组合)、DRL、DQN的定义