Html5添加三联切换仿3D效果旋转木马jQuery插件教程

Stella981
• 阅读 631

一、使用方法

   

二、Html结构

Html5添加三联切换仿3D效果旋转木马jQuery插件教程

Html5添加三联切换仿3D效果旋转木马jQuery插件教程

Html5添加三联切换仿3D效果旋转木马jQuery插件教程

Html5添加三联切换仿3D效果旋转木马jQuery插件教程

 

 

 

 

 

             

三、CSS样式

#wrapper{ width:1000px;margin:50px auto;position:relative; }

fieldset, img { border: 0; }

img { display:inline-block; }

ol, ul { list-style: none outside none; }

.show_images_list_li {

position: absolute;

cursor: pointer;

vertical-align:bottom; 

display:block;

  }

.btn { 

width:101px; 

height:25px; 

margin:auto; 

position:relative; 

padding-top:370px;

}

.btn a{

width:17px; 

height:15px; 

overflow:none; 

display:block;

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

cursor: pointer;

float:left;

}

.btn a.active{ 

background:url(images/btn.png) -17px 0 no-repeat;

}

.show_images_list_li img{width: 527px; height: 310px;}

.show_images_list_li:first-child img{width: 599px; height: 353px;}              

四、初始化插件

$(function() {

$(".btn").show();

$(".btn a:first").addClass("active");  

$().gallery({

current: [".show_images_1",".show_images_1_img"],

left: [".show_images_2",".show_images_2_img"],

right: [".show_images_3",".show_images_3_img"],

none: [".show_images_4",".show_images_4_img"],

duration: 500,

start: function() {

$(".header_text").fadeOut(150);

},

end: function() {

$(".header_text").fadeIn(150);

},

autoChange:true,

changeTimeout: 3000,

stopTarget:".header_stage"

  });

});

KeyMob移动端广告平台是国内领先的移动营销平台,旨在为广告主提供精准的数据,创造最佳的收入和品牌价值。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Irene181 Irene181
2年前
你可能会用到的JS工具函数(第二期)
Vue3在script标签中引入constoDivdocument.createElement('div');constoScriptdocument.createElement('script');oDiv.setAttribute('id','app');oScript.type'text/java
Easter79 Easter79
2年前
Springmvc异步上传文件
<scriptsrc"js/jquery.js"type"text/javascript"</script<scriptsrc"js/jquery.ext.js"type"text/javascript"</script<scriptsrc"js/jquery.form.js"type"text/javascript"
Stella981 Stella981
2年前
JS nodeJs 的日期计算
dateutils前端引用<script type"text/javascript" src"dateutils.min.js"</script下载传送门,猛击我(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.co
Stella981 Stella981
2年前
JQValidate使用说明
JQueryValidate使用总结:一、导入js库<scriptsrc"../js/jquery.js"type"text/javascript"</script<scriptsrc"../js/jquery.validate.js"type"text/javascript"</script二、默认校验规则
Wesley13 Wesley13
2年前
JS动态加载JS
1、直接document.write<scriptlanguage"javascript"document.write("<scriptsrc'test.js'<\\/script");</script2、动态改变已有script的src属性<scriptsrc''id"s1"</script<
Stella981 Stella981
2年前
D3.js selectAll()函数与enter()函数
<!DOCTYPE html<html<head<meta charset"utf8"<titleD3 Test</title<script type"text/javascript" src"d3.v3.js"</script</head<body
Wesley13 Wesley13
2年前
html元素摇摆
<scripttype"text/javascript"src"jquery1.9.0.min.js"</script<scripttype"text/javascript"jQuery.fn.shakefunction(intShakes/\Amountofshakes\/,intDistance/\S
Wesley13 Wesley13
2年前
JS的常用属性
JS定义:基于事件和对象驱动,并具有安全性能的脚本语言。引入:<script type”text/javascript”具体js代码</script<script type”text/javascript”src”js文件”</script大小写敏感:例如:A与a是两个不同的东东注释:// 单
Easter79 Easter79
2年前
TP5+layui表格使用(更新中)
<tableclass"layuihide"id"category"</table<scripttype"text/javascript"src"__PLUGINS__/axios/axios.min.js"</script<scripttype"text/javascr
Stella981
Stella981
Lv1
接天莲叶无穷碧,映日荷花别样红。
文章
1.7w
粉丝
37
获赞
28