【Demo】jQuery 轮播图简单动画效果

功能实现：

（1）设定图片称号的鼠标悬停事件；

（2）在事件中利用自定义动画函数调整显示图片，并修改对应标号样式；

（3）为图片显示区域设定鼠标悬停事件；

（4）当鼠标停在该区域时，清除图片切换动画定时器；

（5）当鼠标离开该区域时，重启图片切换动画，每隔2秒换一张图片；

效果图：

(垂直滚动)实现代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

            .imgarea img{

                width: 100%;

                height: 100%;

            }

            .content{

                width: 306px;

                height: 156px;

            }

            .main{

                width: 300px;

                height: 150px;

                border: 1px solid #CCCCCC;

                overflow: hidden;

            }

            .imgarea{

                position: relative;

            }

            .imgarea li{

                list-style: none;

                width: 300px;

                height: 150px;

            }

            .imgID{

                position: absolute;

                top: 130px;

            }

            .imgID li{

                float: left;

                list-style: none;

                width: 30px;

                height: 20px;

                border: solid 1px #CCCCCC;

                /*background-color: aliceblue;*/

            }

            .active{

                background-color: bisque;

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="main">

                <ul class="imgarea">

                    <li><a href="#"><img src="../img/0.jpg"/></a></li>

                    <li><a href="#"><img src="../img/1.jpg"/></a></li>

                    <li><a href="#"><img src="../img/2.jpg"/></a></li>

                    <li><a href="#"><img src="../img/3.jpg"/></a></li>

                </ul>

                <ul class="imgID">

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                </ul>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        $(function(){

            var index = 0;

            var timer;

            $(".imgID li").mouseover(function(){    //图片标号的鼠标悬停事件

                index = $(".imgID li").index(this);        //获取图片标号的索引值

                animateImg(index);                //显示与索引值匹配的图片

            }).eq(0).mouseover();

            $('main').hover(function(){        //图片显示区域的鼠标悬停事件

                clearInterval(timer);        //清除定时器

            },function(){

                timer = setInterval(function(){        //设定定时器，循环显示每张图片

                    animateImg(index);

                    index++;

                    if (index == $(".imgID > li").length) {

                        index = 0;

                    }

                },2000);

            }).trigger("mouseleave");

        });

        function animateImg(index){

            var divh = $(".content .main").height();

            //利用动画效果调整图片列表行高

            $(".imgarea").stop(true,false).animate({top:-divh*index},1000);

            //改变图片标号样式

            $(".imgID li").removeClass("active").eq(index).addClass("active");

        }

    </script>

</html>

（水平滚动）实现代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>水平滚动</title>

        <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>

    </head>

    <body>

        <div id="scrollarea" style="overflow: hidden;width:500px ;">

            <table border="0" align="center">

                <tr>

                    <td id="area1" valign="top" bgcolor="#ffffff">

                        <table border="0" cellspacing="0" cellpadding="0">

                            <tr align="center">

                                <td>

                                    <a href="#" target="_blank">

                                        <img src="../img/0.jpg" width="335" height="260" alt="第一张图"/>

                                    </a>

                                </td>

                                <td>

                                    <a href="#" target="_blank">

                                        <img src="../img/1.jpg" width="335" height="260" alt="第二张图"/>

                                    </a>

                                </td>

                                <td>

                                    <a href="#" target="_blank">

                                        <img src="../img/2.jpg" width="335" height="260" alt="第三张图"/>

                                    </a>

                                </td>

                                <td>

                                    <a href="#" target="_blank">

                                        <img src="../img/3.jpg" width="335" height="260" alt="第四张图"/>

                                    </a>

                                </td>

                            </tr>

                        </table>

                    </td>

                    <td id="area2" valign="top"></td>

                </tr>

            </table>

        </div>

        <script type="text/javascript">

            var timer;

            $("#area2").html($("#area1").html());

            function imgMarquee(){

                if ($("#scrollarea").scrollLeft() >= $("#area1").width()) {

                    $("#scrollarea").scrollLeft(0);

                }else{

                    $("#scrollarea").scrollLeft($("#scrollarea")).scrollLeft(5);

                }

            }

            $("#scrollarea").hover(function(){

                clearInterval(timer);

            },function(){

                timer = setInterval(imgMarquee(),10);

            });

        </script>

    </body>

</html>

【Demo】jQuery 轮播图简单动画效果的更多相关文章

封装bt轮播图淡入淡出效果样式
 <div data-ride="carousel" class="carousel slide carousel_inn ...
超级简单的jquery轮播图demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
基于skitter的轮播图炫酷效果，幻灯片的体验
概述包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端详细代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...
jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览代码地址:https://github.com/zsqosos/componen ...
Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
jQuery轮播图（手动点击轮播）
下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...
jQuery轮播图（二）利用构造函数和原型创建对象以实现继承
本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...
jquery 轮播图实例
实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...
jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

随机推荐

汇编文件后缀.s与.S
转载:http://www.cnblogs.com/IamEasy_Man/archive/2011/08/10/2134212.html 一.大小写后缀的区别: .s: 汇编语言源程序;汇编 .S ...
w命令
命令:w 功能说明:显示目前登入系统的用户信息. 语法:w [-fhlsuV][用户名称] 补充说明:执行这项指令可得知目前登入系统的用户有那些人,以及他们正在执行的程序.单独执行w 指令会显示所 ...
执行Java脚本firefox启动成功，不运行test方法，且提示NullPointerException
在ideal中新建maven项目,将录制好的Java脚本文件,直接复制到项目中,添加相关的依赖脚本. 代码不报错之后,运行录制好的Java脚本,启动了firefox之后,不执行test方法,报错Nul ...
Delphi APP 開發入門（七）通知與雲端推播
Delphi APP 開發入門(七)通知與雲端推播分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數: ...
001-netty的优势
1.API简单. 2.性能高. 3.成熟稳定. 4.入门门槛低.
DevStore分享：月薪3万的程序员都避开了哪些坑
程序员薪水有高有低,有的人一个月可能拿30K.50K,有的人可能只有2K.3K.同样有五年工作经验的程序员,可能一个人每月拿20K,一个拿5K.是什么因素导致了这种差异?我特意总结了容易导致薪水低的九 ...
cdoj1587 失恋772002天
地址:http://acm.uestc.edu.cn/#/problem/show/1587 题目: 失恋772002天 Time Limit: 3000/1000MS (Java/Others) ...
appium服务关键字
关键字描述实例 automationName 你想使用的自动化测试引擎 Appium (默认) 或 Selendroid platformName 你要测试的手机操作系统 iOS, Android ...
如何用纯 CSS 创作一个变色旋转动画
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 ...
# 20145327 《Java程序设计》第七周学习总结
20145327 <Java程序设计>第七周学习总结教材学习内容总结只有Lambda表达式,参数的类型必须写出来,如果有目标类型,在编译程序可推断出类型的情况下,可以不写出. GMT时 ...

【Demo】jQuery 轮播图简单动画效果

【Demo】jQuery 轮播图简单动画效果的更多相关文章

随机推荐

热门专题