jQuery图片轮播特效

效果预览:http://hovertree.com/texiao/jquery/51/这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换。使用的jQuery库版本为1.12.3,

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

效果预览:http://hovertree.com/texiao/jquery/51/

这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换。

使用的jQuery库版本为1.12.3 ,当然项1.11.1等也是可以的。下载地址:http://hovertree.com/h/bjaf/ati6k7yk.htm

效果图:
jQuery图片轮播特效

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery适合风景展现幻灯片代码 - 何问起</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/51/images/index.css">
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/51/js/jquery.slides.js"></script>

</head>
<body>
<div style="text-align:center;"><h1>jQuery带缩略图的图片切换</h1></div>
<div id="yxh_article">
<div class="slider_box" id="slider_name"> 

<div class="mask"></div>

<ul class="silder_con">    

<li class="silder_panel"><a href="http://hovertree.com/h/bjaf/41eyinh2.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/uqa9cu66.jpg" width="600" height="375" /></a></li> 
<li class="silder_panel"><a href="http://hovertree.com/texiao/game/" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/2m6dep2i.jpg" width="600" height="375" /></a></li>
<li class="silder_panel"><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/rrlmyu1g.jpg" width="600" height="375" /></a></li>
<li class="silder_panel"><a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/81q15f9j.jpg" width="600" height="375" /></a></li>


</ul>    
<div class="silder_intro">
<h3>荷叶</h3>
</div>
<div class="silder_intro">
<h3>内衣</h3>
</div>

<div class="silder_intro">
<h3>沙滩</h3>
</div>

<div class="silder_intro">
<h3>大海</h3>
</div>


<ul class="silder_nav dec"> 
<li><a href="http://hovertree.com/h/bjaf/41eyinh2.htm"><img src="http://hovertree.com/hvtimg/bjafjd/uqa9cu66.jpg" width="110" height="48" /></a></li>
<li><a href="http://hovertree.com/texiao/game/"><img src="http://hovertree.com/hvtimg/bjafjd/2m6dep2i.jpg" width="110" height="48" /></a></li>
<li><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm"><img src="http://hovertree.com/hvtimg/bjafjd/rrlmyu1g.jpg" width="110" height="48" /></a></li>
<li><a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm"><img src="http://hovertree.com/hvtimg/bjafjd/81q15f9j.jpg" width="110" height="48" /></a></li> 
</ul>
</div>

</div> 

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源:<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/picqiehuan.htm">原文</a></p>
</div>
</body>
</html>

转自:http://hovertree.com/h/bjaf/picqiehuan.htm

推荐:http://hovertree.com/texiao/jquery/53/

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120613.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 把ocx打包成CAB,并签名

    把ocx打包成CAB,并签名准备好工具包,微软的IESDK里包含这些工具, 但是那个开发包太过庞大,而且操作起来也稍微得繁琐了一些你只需要下载这么几个文件就可以了 文中提到的数字签名工具包,请在此处下载&#

    2022年6月30日
    21
  • docker离线安装部署 linux_docker 离线安装

    docker离线安装部署 linux_docker 离线安装docker离线安装

    2022年9月26日
    0
  • JAVA XML转对象 对象转XML

    JAVA XML转对象 对象转XML在网上看了许多XML跟Obj互相转换的Demo,但是都很复杂,现在推荐一个极度简单好理解的XML和Obj互转的例子:JacksonXML,只需要简单的几个注解就能完成XML和Obj的相互转换假设有如下xml报文:<?xmlversion=”1.0″encoding=”utf-8″?><msgbody><StringList>&…

    2022年7月21日
    11
  • java逻辑删除_MybatisPlus中的删除和逻辑删除及区别介绍

    java逻辑删除_MybatisPlus中的删除和逻辑删除及区别介绍删除又分为逻辑删除和物理删除,那么它们有什么区别呢?物理删除:真实删除,将对应数据从数据库中删除,之后查询不到此条被删除数据。逻辑删除:假删除,将对应数据中代表是否被删除字段状态修改为“被删除状态”,之后在数据库中仍旧能看到此条数据记录。在我们日常开发中,为了保留数据,经常会使用逻辑删除的方式进行数据删除,下面我们就来看看物理删除与逻辑删除怎么实现的吧首先假设我有这样一张表实体类:package…

    2022年6月2日
    39
  • 3G最新动态

    3G最新动态

    2021年7月29日
    55
  • android apk 签名(平台和普通签名)

    android apk 签名(平台和普通签名)因为做了太多的终端项目,客户总会有自己的apk提供,这时候各种签名问题就来了,最近整理了一下相关知识,分享给大家。签名的用处:1.应用程序升级:如果你希望用户无缝升级到新的版本,那么你必须用同一个证书进行签名。这是由于只有以同一个证书签名,系统才会允许安装升级的应用程序。如果你采用了不同的证书,那么系统会要求你的应用程序采用不同的包名称,在这种情况下相当于安装了一个全新的应用程…

    2022年6月6日
    74

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号