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

Stella981 等级 271 0 0
标签: listjquery

一、使用方法

   

二、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移动端广告平台是国内领先的移动营销平台,旨在为广告主提供精准的数据,创造最佳的收入和品牌价值。

收藏
评论区

相关推荐

JQ面试问题(转载)
1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,动画啊,表单啊,ajax事件等 配置Jquery环境 下载jquery类库 在jsp页面引用jquery类库即可 <script type="text/javascript" src="jquery/jquery-1.7.2
JS中的匿名函数自执行、函数声明与函数表达式
先看一段jQuery源码中匿名函数自执行的例子: (function( window, undefined ) { // jquery code })(window); 另外一种常见的写法: +function( $ ) { // jquery code })(window
SEO和体验并重的超链接设计
如果你要了解PJAX,请看: AJAX + window.history.pushState/onpopstate (需要HTML5支持) https://github.com/defunkt/jquery-pjax 我下面说的是锚点链接(书签链接)这个方案: AJAX + window.location.hash/onhashchan
241个jquery插件—jquery插件大全
**jQuery**由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架。其经典的Slogan是**“Write Less, Do more”(写更少的代码,做更多的事情)**。jQuery是轻量级的js库(压缩后只有21k) ,这
Babel 处理 webpack 无法处理的 ES 语法(Babel 6.x 和 Babel 7.x 有区别)(二)
//这是main.js是我们项目的js入口文件 //1:a导入jQuery,引入jQuery包用$变量接收,此方法与node中 const $ = require('jquery') 同 //此为ES6中导入模块的方式 //由于ES6的语法太高级,浏览器解析不了次引入方式 import $ from 'jqu
Highcharts的一些属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/gallery.js"></script>    二、Html结构 <div id="wrapper"> <div id="mai
JFinal——Jquery
        最近在使用[神奇的Jfinal](http://www.oschina.net/p/jfinal)框架写项目的时候想用类似搜索框自动完成的效果,经过一番搜索后发现jquery的autocomplete比较不错,前台数据的处理基本都封装好了,可谓万事俱备只欠数据了。准备好所需的文件和写好后台的数据库查询之后发现一个很严重的问题,返回什么数据?返
JQuery
一、jq简介 jq其实就是js的一个文件。 二、jq书写步骤 1、先引入jq文件(min的文件) <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script> 2、换新的一行写js代码 <script type="text/javascri
JQuery事件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/
Jquery从入门到放弃(八)
杂项: === 一、 noConflict() --------------- 为防止简写符号‘$’和其他JS库发生冲突,执行此语句后,jquery会释放出 "$"符号,自己使用jquery全称 $.noConflict(); jQuery(document).ready(function(){ jQuery("button
Js和Thymeleaf如何获取model中的值
简述 == 在大多数的项目架构中,使用SPringBoot发布微服务,前端采用Thymeleaf作为Html模版,使用Jquery作为动态脚本,那么Thymeleaf和Jquery是如何获取Model中的数据呢? Jquery获取Model中的数据 ================= 方法1:将model中的值赋给hidden,然后Js获取隐藏域的值。
List of Useful jQuery Plugins
I viewed each of the jQuery plugins in the [jQuery plugins repository](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fjquery.com%2Fplugins%2Fproject%2FPlugins%2Fname). I
RF日志文件(log.html)解读一
引入的js库: Jquery,Jquery templates plugin,Jquery tablesorter,JsxCompressor(JSXGraph) 版本都很老,而且有些还是废弃的项目(Jquery templates plugin),但是脚本都直接写进了html页面中,所以版本问题无影响 页面呈现的内容:统计列表,python运行时错误
Struts2 整合jQuery实现Ajax功能
Struts2 整合jQuery实现Ajax功能 技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美。 **首先明确个概念:** jQuery是什么:是使用javascript语言开发的,用于满足项目前台各种操作需要的js程序文件。也就是说,jQuery基本上就是个js程序集,**基础核

热门文章

Linux 命令行 SS端加密以及obfs混淆 GitHub神器,一个可以白嫖全网无损音乐的神器 OpenWrt 路由器过滤广告的N种方法 Mac配置Aria2,高速下载百度云

最新文章

SpringBoot:整合Swagger3.0与RESTful接口整合返回值(2020最新最易懂) SpringBoot:初探 RabbitMQ 消息队列 SpringBoot:切面AOP实现权限校验:实例演示与注解全解 SpringBoot:使用小技巧合集 SpringBoot,用200行代码完成一个一二级分布式缓存