【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轮播图淡入淡出效果样式
<!--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 ...
随机推荐
- boost单元测试框架
头文件: #include <boost/test/unit_test.hpp> 编译加:-lboost_unit_test_framework 单元测试: 需要定义BOOST_TEST_ ...
- Java中Map用法详解
原文地址http://blog.csdn.net/guomutian911/article/details/45771621 原文地址http://blog.csdn.net/sunny2437885 ...
- usermod命令、用户密码管理、mkpasswd命令
3.4 usermod命令--更改用户帐户属性 -a|--append ##把用户追加到某些组中,仅与-G选项一起使用 -G|--groups ##把用户追加到某些组中,仅与-a选项一起使用:把该用户 ...
- WebMagic 爬虫框架
官方网站[http://webmagic.io/](http://webmagic.io/) >webmagic是一个开源的Java垂直爬虫框架,目标是简化爬虫的开发流程,让开发者专注于逻辑功能 ...
- 20145316许心远《Java学习笔记（第8版）》课程总结
20145316许心远<Java学习笔记(第8版)>课程总结 每周读书笔记链接汇总 ▪ 第一周读书笔记 ▪ 第二周读书笔记 ▪ 第三周读书笔记 ▪ 第四周读书笔记 ▪ 第五周读书笔记 ▪ ...
- logstash运输器以及kibana的更多操作
为了达到不会因为ELK中的某一项组件因为故障而导致整个ELK工作出问题,于是 将logstash收集到的数据存入到消息队列中如redis,rabbitMQ,activeMQ或者kafka,这里以red ...
- Codeforces 235C. Cyclical Quest
传送门 写的时候挺蛋疼的. 刚开始的时候思路没跑偏,无非就是建个SAM然后把串开两倍然后在SAM上跑完后统计贡献.但是卡在第二个样例上就是没考虑相同的情况. 然后开始乱搞,发现会出现相同串的只有可能是 ...
- 20145216史婧瑶《Java程序设计》第四次实验报告
实验四 Android环境搭建 实验内容 搭建Android环境 运行Android 修改代码,能输出学号 实验步骤 1.搭建Android环境 2.安装Android,核心是配置JDK.SDK 3. ...
- Jquery4 过滤选择器
学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似 CSS3里的伪类,可以让不支持 CSS3 ...
- [WCF安全1]使用basicHttpBinding构建UserName授权的WCF应用程序
最近到了新公司,leader让我研究一下WCF的传输安全机制.以前也做过WCF的应用,但是很少涉及安全方面的东西.所以,花了三天的时间研究了一下如何在WCF的应用程序中配置安全.在这个系列文章中,我会 ...