基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效。效果图如下:

效果图如下:
<div class="flash">
<div class="con">
<ul>
<li class="current ti1">
<h3>关于我们</h3>
<div class="show">
<img src="data:images/big_1.jpg"/>
<img src="data:images/big_2.jpg"/>
<img src="data:images/big_3.jpg"/>
<img src="data:images/big_4.jpg"/>
</div>
</li>
<li class="ti2">
<h3>联系我们</h3>
<div class="show">
<img src="data:images/big_5.jpg"/>
<img src="data:images/big_6.jpg"/>
<img src="data:images/big_7.jpg"/>
<img src="data:images/big_8.jpg"/>
</div>
</li>
<li class="ti3">
<h3>给我留言</h3>
<div class="show">
<img src="data:images/big_1.jpg"/>
<img src="data:images/big_3.jpg"/>
<img src="data:images/big_5.jpg"/>
<img src="data:images/big_7.jpg"/>
</div>
</li>
<li class="ti4">
<h3>网站首页</h3>
<div class="show">
<img src="data:images/big_2.jpg"/>
<img src="data:images/big_4.jpg"/>
<img src="data:images/big_6.jpg"/>
<img src="data:images/big_8.jpg"/>
</div>
</li>
</ul>
</div>
</div>
javascript代码:
var timer=null;
var i=0;
$(function(){
$(".flash .con ul li").mouseover(function(){
clearInterval(timer);
});
$(".flash .con ul li").click(function(){
$(this).stop().animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
});
$(".flash .con ul li").mouseout(function(){
timer=setInterval("startMove()",2000)
}); })
function startMove(){
i++;
if(i>$(".flash .con ul li").length-1){i=0}
$(".flash .con ul li").stop().eq(i).animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
};
timer=setInterval("startMove()",2000)
via:http://www.w2bc.com/Article/43486
基于jquery横向手风琴效果的更多相关文章
- jquery横向手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery横向手风琴效果2
<!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 一款基于jquery的手风琴显示详情
今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div al ...
- jQuery横向手风琴图片滑块
jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- jquery实现手风琴效果
html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- is-a,has-a,like-a是什么 sql server中,N''表示什么意思? 关于SQL SERVER的N前缀的理解
https://blog.csdn.net/ooppookid/article/details/51174122#commentBox 1.is-a,has-a,like-a是什么 在面向对象设计的领 ...
- 《JAVA与模式》之简单工厂与工厂方法
一.简单工厂 1.1 使用场景 1.工厂类负责创建的对象比较少: 2.客户只知道传入工厂类的参数,对于如何创建对象(逻辑)不关心: 3.由于简单工厂很容易违反高内聚责任分配原则,因此一般只在很简单的情 ...
- RAID简介[zz]
RAID 0 是指磁盘分段(Disk Striping)技术其实现方法为将数据分段,同时写到多个磁盘上.其优点是磁盘可以实现并行的输入和输出,提高磁盘读写速度,但是这种技术无容错性能:RAID 1是指 ...
- Windows搭建测试RabbitMq遇到的问题
报错: d:\Program Files\RabbitMQ Server\rabbitmq_server-3.6.5\sbin>rabbitmq-plugins eble rabbitmq_ma ...
- JavaScript权威指南第02章 词法结构
词法结构 2.1字符集 JavaScript 是Unicode字符集编写,差点儿支持地球上全部的语言. 2.1.1区分大写和小写 javascript是区分大写和小写的语言. 2.1.2 空格.换行符 ...
- 使用 Apache Commons CLI 开发命令行工具示例
Apache Commons CLI 简介 Apache Commons CLI 是 Apache 下面的一个解析命令行输入的工具包,该工具包还提供了自动生成输出帮助文档的功能. Apache Com ...
- 网络协议-网络分层、TCP/UDP、TCP三次握手和四次挥手
网络的五层划分是什么? 应用层,常见协议:HTTP.FTP 传输层,常见协议:TCP.UDP 网络层,常见协议:IP 链路层 物理层 TCP 和 UDP 的区别是什么 TCP/UDP 都属于传输层的协 ...
- eclipse自动切换到debug视图
原文出自:http://blog.csdn.net/yizhizouxiaqu/article/details/7594502 当弹出"Confir Perspective Switch&q ...
- MariaDB/MySql 服务消失无法启动
今天启动电脑打开数据库发现这么一个错误: 2003 can't connect to mysql server on localhost 10038 无奈去查看了服务,发现mysql服务消失了,猜 ...
- Unity GPU Instancing的使用尝试
似乎是在Unity5.4中开始支持GPU Instacing,但如果要比较好的使用推荐用unity5.6版本,因为这几个版本一直在改. 这里测试也是使用unity5.6.2进行测试 在5.6的版本里, ...