功能实现:

(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 轮播图简单动画效果的更多相关文章

  1. 封装bt轮播图淡入淡出效果样式

    <!--BT轮播图-->    <div data-ride="carousel" class="carousel slide carousel_inn ...

  2. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 基于skitter的轮播图炫酷效果,幻灯片的体验

    概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...

  4. jQuery轮播图(一)轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  5. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  6. jQuery轮播图(手动点击轮播)

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  7. jQuery轮播图(二)利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  8. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  9. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

随机推荐

  1. JAVA math包

    Math类: java.lang.Math 类中包含基本的数字操作,如指数.对数.平方根和三角函数. java.math是一个包,提供用于执行任意精度整数(BigInteger)算法和任意精度小数(B ...

  2. NOSQL概念入门

    一.NOSQL概念 随着大数据时代的到来,分布式存储得到了快速发展,其中比较受欢迎的,主要以key-value键值对存储的非关系型数据库进入了大家的视野. NOSQL的全称是Not Only Sql, ...

  3. 模块讲解----time与date time(时间模块)

    time和datetime 在python中,通常有一下几种方式来表示时间:1.时间戳:2.格式化时间字符串:3.元祖(struct_time):其中元祖(struct_time分为九个元素) UTC ...

  4. [转]linux shell 获取当前正在执行脚本的绝对路径

    原文链接:http://sexywp.com/bash-how-to-get-the-basepath-of-current-running-script.htm 常见的一种误区,是使用 pwd 命令 ...

  5. 一步一步学EF系列【5、升级篇 实体与数据库的映射】live writer真坑,第4次补发

    前言 之前的几篇文章,被推荐到首页后,又被博客园下了,原因内容太少,那我要写多点呢,还是就按照这种频率进行写呢?本身我的意图这个系列就是想已最简单最容易理解的方式进行,每篇内容也不要太多,这样初学者容 ...

  6. 2017 Multi-University Training Contest - Team 3 Kanade's sum hd6058

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6058 题目: Kanade's sum Time Limit: 4000/2000 MS (J ...

  7. hdu4763 Theme Section

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=4763 题目: Theme Section Time Limit: 2000/1000 MS (Java/O ...

  8. GYM - 101490 J Programming Tutors (匈牙利+二分)

    题意:有N个学生和N个老师,每个人都有自己的坐标X,Y,给每个学生匹配一个老师,要求N个匹配中的距离最大值最小.其中距离的定义为:|X − X’| + |Y − Y ‘|. 分析:一道典型的最大值最小 ...

  9. akka消息传递

    消息传递 消息本身要求是什么?是否必须可以序列化?消息传递根据传递的要求严格程序依次分为三类,1.至多一次到达 至消息最多一次传递到目的端,消息可能会丢失,但不会重复2.至少一次到达 潜在可能存在多次 ...

  10. 数据库中的B树和B+树

    B树与B+树 数据库中建立索引能加快数据的存取,但是当索引变得很大时,可能导致内存装不下.这时就需要使用多级索引来实现.而B树和B+树是实现多级索引的一种数据结构. B树 B树是多叉树,其树中每个节点 ...