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或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
最新文章
- html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...
- conda - 虚拟环境,常用指令
- 在Linux系统中构建虚拟网络
- 《几何与代数导引》习题1.36.2
- 网络作者的心声-23、网络作家大多赚'辛苦钱'
- 前端学习(2630):git安装包下载
- java 泛型 t extends_Java泛型的定义以及对于? extends T和? super T
- 32bit win7 在VMWARE中安装64位的redhat LINUX4.7
- 学习 Message(13): 解析 TWMMouse.Keys 参数
- U盘安装ubuntu server 10.4
- Spring4-@PostConstruct和@PreDestroy注解的使用
- wer 流程图编程_WER机器人搭建学习实操练习
- 微信服务号突破每个月4条的限制
- 二元一次方程编程解鸡兔同笼问题
- 1×pbs缓冲液配方_pbs配方_1xpbs配方_pbs缓冲液配制
- MATLAB图中图绘制(局部放大图)
- 在炼数成金报名的课程!加油!
- ddr3ip核心_XILINX DDR3 IP核使用教程
- fdsafdsafdsafdsafdsa
- 人人玩棋牌电玩城全套源码搭建下载教程