紫橙绿蓝的jQuery幻灯片切换

效果展示 http://hovertree.com/texiao/jquery/77/看惯了左右切换的幻灯片,何问起向您推荐一个新颖的,旋转切换,通过点击按钮的相应区域可以使幻灯片以旋转的方

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



效果展示 
http://hovertree.com/texiao/jquery/77/

看惯了左右切换的幻灯片,何问起向您推荐一个新颖的,旋转切换,通过点击按钮的相应区域可以使幻灯片以旋转的方式来切换图片,非常有创意。点击哪个颜色就切换到那个颜色,还带音效。背景图可以自定义。

进入源码下载页面  
http://hovertree.com/h/bjaf/m3wiy7u3.htm

 
效果图如下:


紫橙绿蓝的jQuery幻灯片切换
 
HTML页面完整代码:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery紫橙绿蓝的幻灯片 - 何问起</title><base target="_blank" />

<link href="http://hovertree.com/texiao/jquery/77/css/jquery.rotatingSlideshow.css" rel="stylesheet" type="text/css">
    <style>a{color:blue}</style>
</head>
<body>
<div class="rotating-slideshow">
    <div id="slider-main" data-position="1" data-deg="0">
        <div id="slider-btns" class="button">
            <a id="pos1" href="http://hovertree.com/h/bjaf/sby54kjl.htm" class="pos1" data-position="1">时间轴</a>
            <a id="pos2" href="http://hovertree.com/hovertreescj/" class="pos2" data-position="4"></a>
            <a id="pos3" href="http://hovertree.com/h/bjaf/ati6k7yk.htm" class="pos3" data-position="3"></a>
            <a id="pos4" href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" class="pos4" data-position="2"></a>
        </div>
        <div class="slider-overlay">
            <div class="active" data-position="1">
                <h3>幻灯片切换</h3>
                <p>
                    看惯了左右切换的幻灯片,何问起向您推荐一个新颖的,旋转切换,点击哪个颜色就切换到那个颜色,还带音效。背景图也可自定义,感觉到朦胧美了没?朦胧的细雨有朦胧的美,忘情水再来一杯。
                </p>
            </div>
            <div data-position="2">
                <h3>服装店风云</h3>
                <p>
                    受到网店的影响,服装店的生意逐渐有所下降,老板找何问起去谈,大概是准备跟上网购潮流,让何问起准备一下, 要在网上开网店,要为服装店建立网站。 何问起也没说自己经验不足,只说会积极准备。于是抓紧时间查找资料,学习练习。毕竟还是有功底的,过不多久就在本地搭建了一个网站,实现了一些企业网站的基本功能,信息产品发布、留言版等。也了解了在电商网开网店的方方面面。
                </p>
            </div>
            <div data-position="3">
                <h3>服装店风云②</h3>
                <p>
                    何问起准备好后,跟老板报告分析了具体情况,老板说人手不足,就从易到难逐步推行把,有什么需要尽管提。何问起又有得忙活了,但也是乐此不疲。虽然学的是纺织,而不是计算机或者软件工程等相关专业,但自从接触编程以后,兴趣就一直有增无减,也熟悉了不少网站架设,Web前端,后端程序,数据库等等的知识,开了网站 hovertree.com ,有向全栈工程师发展的趋势。接受了老板的这个任务后更是开心,整天精力充沛,战斗力十足。
                </p>
            </div>
            <div data-position="4">
                <h3>HoverTreeSCJ</h3>
                <p>
                    HoverTreeSCJ(何问起收藏夹)是一个C#项目,用于收藏管理网址,为网址贴标签分类.使用Visual Studio 2015编辑.使用了SQL Server作为数据库,因为采用分层结构,方便扩展支持其他数据库,例如Access.源代码可以到何问起网下载.
                </p>
            </div>
        </div>
        <div class="slides">
            <img class="active" src="http://hovertree.com/texiao/jquery/77/images/slide1.jpg" data-position="1">
            <img src="http://hovertree.com/texiao/jquery/77/images/slide4.jpg" data-position="2">
            <img src="http://hovertree.com/texiao/jquery/77/images/slide3.jpg" data-position="3">
            <img src="http://hovertree.com/texiao/jquery/77/images/slide2.jpg" data-position="4">
        </div>
        <img class="spinner-btn" src="http://hovertree.com/texiao/jquery/77/images/button.png" alt="">
        <img class="spinner" src="http://hovertree.com/texiao/jquery/77/images/slides-overlay.jpg" alt="">
    </div>
    <audio id="slider-sound" preload="auto">
        <source src="sound/sound.mp3">
        你的浏览器不支持HTML5 AUDIO元素。何问起推荐您使用Chrome,火狐,Edge,IE11等新版浏览器。
    </audio> 
</div>

<script src="http://down.hovertree.com/jquery/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="http://hovertree.com/texiao/jquery/77/js/jquery.rotatingSlideshow.js"></script>
<script>
$(document).ready(function(){
  $('.rotating-slideshow').rotatingSlideshow({
    sliderHolder: '#slider-main',
    btnsHolder: '#slider-btns',
    audioHolder: '#slider-sound',
    auto: true,
    autoSpeed: '6000'//自动播放时间
  });
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:FireFox、Chrome、Opera、Edeg、IE11、傲游、360、搜狗、世界之窗等新版浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效库</a>
<a href="http://hovertree.com/h/bjaf/fk7ql5hx.htm">代码说明下载</a></p>
</div>
</body>
</html>

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

前端特效库:http://www.cnblogs.com/roucheng/p/texiao.html

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120336.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python gui设计 tkinter菜鸟编程_三菱简单运动控制模块教程

    python gui设计 tkinter菜鸟编程_三菱简单运动控制模块教程学习tkinter之余,实现了一个简单的计算器操作,能够满足页面输入参数和计算得到结果

  • jdk环境变量的配置[通俗易懂]

    jdk环境变量的配置[通俗易懂]jdk下载并配置下载jdk下图是自己资源管理器中jdk的安装路径,双击然后next就好,不需要改什么配置手里没有安装包的,下载地址在这里:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下面主要讲怎么配置Java的环境变量,也是为了以后哪天自己忘记了做个备份1.在电脑桌面右键点击“此电脑”的“属性”选项2.选择“高级系统设置”选项…

  • sublime 激活码(注册激活)

    (sublime 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • linux apache2配置_虚拟主机开启ssl

    linux apache2配置_虚拟主机开启ssl测试环境*操作系统:Ubuntu5.10*测试机地址:10.39.6.59*测试机域名:*.firehare.com基本配置我们都知道,如果我们想在单台机器上设置多个域名或主机名时,我们就要用到基于名称的虚拟主机了。那么要如何进行设置呢?这就是本指南想解决的问题了。在Ubuntu的/etc/apache2/目录下有个Ap

  • 渗透之——使用reaver傻瓜式破解wifi之利用路由器WPS漏洞

    渗透之——使用reaver傻瓜式破解wifi之利用路由器WPS漏洞跟这篇破解教程一样,网上破解教程多是基于路由器的WPS漏洞破解,但是这样的路由器只占少数。一般wifi是依据WPA/WPA2加密的,因此想要破解一般的wifi,还得破解这个协议,虽然近期这个协议也被破解了,不过也是很不容易的。刚入门破解,不是很熟悉,在网上找各种破解资料,终于破解成功了临近工作室的wifi,沾沾自喜~本文破解wifi针对一些路由器的WPS(Wi-fiprotectedset…

  • C#下怎样处理并保存单色格式PNG图片?

    C#下怎样处理并保存单色格式PNG图片?  用微软自带的画图,打开一个已经存在的单色PNG图片文件,然后复制图像粘贴上去,做点反色或其他处理再保存,可以得到黑白单色PNG图片;但是,如果有很多黑底白字的图片要想改成白纸黑字的单色PNG格式保存这就很麻烦了,譬如2,3百张BMP或JPG图片用来保存只有白纸黑字的书页真是浪费。可是,有些索引格式图像如单色位图,或者单色PNG,如果用C#的Graphics类处理之后,保存文件只能得

发表回复

您的电子邮箱地址不会被公开。

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