[JQuery]用InsertAfter实现图片走马灯展示效果
写在前面
最近一个搞美工的朋友让我给他写一个图片轮播的特效。
需求：
- 图片向左循环滚动。
- 图片滚动到中间高亮显示，并在下方显示照片人物对应的信息。
- 鼠标悬停止滚动。
- 鼠标离开开始滚动。
- 单击图片，图片移到中间并高亮显示。
分析
思考一
首先想到的是图片轮播的插件，找了几款，并不是太满意，就放弃了。
思考二
然后想到使用jquery的animate()方法，对这个不熟悉，也放弃了。
jQuery animate() 方法用于创建自定义动画。
语法
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：实例
$("button").click(function(){
$("div").animate({left:'250px'});
});说明：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
由上可以知道animate方法对操作位移比较方便（也许对该方法了解的不够深入），而需求需要对中间高亮显示的照片并在下方显示对应人物的信息。
思考三
该方式有点类似走马灯的效果，另外想到了jquery中常用的文档操作的方法：append()、appendTo()、before()、insertAfter()、insertBefore()
而这些方法在使用时，针对元素本身是否已经存在，有不同的效果，比如动态创建的元素，使用文档操作的方法是在目标对象之前(之后)追加（插入），而对于已经存在的元素，则会出现移动的效果。
所以，想到了，每移动一个图片，将最前面的那个图片插入在最后一张图片后面，然后使用定时器不间断的移动就可以满足上面的需求了，有了这些考虑，就开始动手实践了。
实践
朋友给的css
@charset "utf-8";
/* CSS Document */
*{margin:; padding:; list-style:none;}
body{margin:; padding:; font-family:"宋体"; font-size:14px; color:#3c3d43; background:#e2e2d7;}
a:link{ text-decoration:none;}
/*轮播图片的样式*/
.teacher{width:1000px; height:250px; margin:0 auto; background:url(../imges/Jshi1.png);position:relative;}
.teach_top{width:120px; height:100px; float:right; background:#3b3f8c; margin-top:7px; margin-right:24px;}
.teach_top p{ color:#fff; font-weight:bold; text-align:center;}
.Teac{width:950px; height:100px; position:absolute; margin-top:50px; margin-left:30px;}
.Teac ul li:hover{}
.Teac ul li{ float:left; width:99px; height:100px; margin-left:5px; background:#000;}
.Zzhao img{width:100px; height:100px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; border:; list-style:none;}
.Jjie{width:240px; height:60px; position:absolute; margin-top:120px; margin-left:350px;}
.T1{ font-family:"宋体"; font-size:20px; font-weight:bold; color:#011b12; margin-left:27px;}
.T2{font-family:"宋体"; font-size:12px; color:#7b7c7c;}
.T3{font-family:"宋体"; font-size:12px; color:#7b7c7c; text-align:center; margin-top:6px; line-height:150%;}
.Zzhao_cent img{width:100px; height:100px; border:; list-style:none;}
css
静态页Index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播</title>
<link href="Css/Style.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.10.2.js"></script> <script type="text/javascript">
var Tearchers = [{
"id": "1",
"T1": "萌萌雨1",
"T2": "上海复旦大学硕士学位1",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师1",
"imgsrc": "imges/teach_1.png"
},
{
"id": "2",
"T1": "萌萌雨2",
"T2": "上海复旦大学硕士学位2",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师2",
"imgsrc": "imges/teach_2.png" },
{
"id": "3",
"T1": "萌萌雨3",
"T2": "上海复旦大学硕士学位3",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师3",
"imgsrc": "imges/teach_3.png"
}, {
"id": "4",
"T1": "萌萌雨4",
"T2": "上海复旦大学硕士学位4",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师4",
"imgsrc": "imges/teach_4.png"
}, {
"id": "5",
"T1": "萌萌雨5",
"T2": "上海复旦大学硕士学位5",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师5",
"imgsrc": "imges/teach_5.png"
}
, {
"id": "6",
"T1": "萌萌雨6",
"T2": "上海复旦大学硕士学位6",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师6",
"imgsrc": "imges/teach_6.png" }, {
"id": "7",
"T1": "萌萌雨7",
"T2": "上海复旦大学硕士学位7",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师7",
"imgsrc": "imges/teach_7.png" }, {
"id": "8",
"T1": "萌萌雨8",
"T2": "上海复旦大学硕士学位8",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师8",
"imgsrc": "imges/teach_8.png" }, {
"id": "9",
"T1": "萌萌雨9",
"T2": "上海复旦大学硕士学位9",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师9",
"imgsrc": "imges/teach_9.png" },
];
//滚动图片对象
var srcollImages = {
//将第一个li插在最后一个ul之后
firstInsertAfterLast: function () {
$("ul li:first").insertAfter($("ul li:last"));
},
/*
获得高亮显示的li
$result：获得高亮的li并将高亮显示的li对象返回
*/
getHightLightLi: function ($container) {
var $lis = $("ul li", $container);
var $result = null;
$lis.each(function (index, element) {
if ($(this).attr("class") == "Zzhao_cent") {
$result = $(element);
$.each(Tearchers, function (index) {
//当前对象
var teacher = this;
if ($result.find("img").attr("src") == teacher.imgsrc) {
//因为索引是从0开始，为了让信息和照片对应所做的处理
index = index + 1;
//对最后一张图片的处理
if (index > (Tearchers.length - 1)) {
teacher = Tearchers[0];
} else {
teacher = Tearchers[index];
}
//将信息写入下面的span中
$(".T1").html(teacher.T1);
$(".T2").html(teacher.T2);
$(".T3").html(teacher.T3);
}
})
}
});
return $result;
}
};
$(function () {
//开启定时器
var timerHandl = timerScroll();
//鼠标悬停在li和离开li的处理,单击li后的处理
$("ul li").hover(function () {
//停止定时器
clearInterval(timerHandl);
}, function () {
//保持句柄
timerHandl = timerScroll();
})
/*
在滚动的时，单击li并将其移动到中间高亮显示的处理方法
timerHandl：单击停止计时器所需的计时器句柄
*/
$("ul li").each(function () {
$(this).click(function () {
var selfclik = $(this);
clearInterval(timerHandl);
//只对普通的照片进行处理，高亮居中的照片不再处理
if ($(this).hasClass("Zzhao")) {
//index()方法用来获取jquery对象的位置索引
var currentIndex = $(this).index();
//高亮图片的索引位置，以中间高亮图片为原点
var hightIndex = $(".Zzhao_cent").index();
//currentIndex > hightIndex说明单击的图片在高亮图片右边
if (currentIndex > hightIndex) {
//移动的步数
var step = currentIndex - hightIndex;
$(this).removeClass("Zzhao").addClass("Zzhao_cent");
$(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
//移动多少次
for (var i = 0; i < step; i++) {
srcollImages.firstInsertAfterLast();
} } else {
//中间高亮图片之前的单击处理
//移动的步数
var step = currentIndex + hightIndex + 1;
$(this).removeClass("Zzhao").addClass("Zzhao_cent");
$(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
//移动多少次
for (var i = 0; i < step; i++) {
srcollImages.firstInsertAfterLast();
}
}
//当单击某个图片时，将对应的信息在下面的span中显示
for (var i = 0; i < Tearchers.length; i++) {
var teacher = Tearchers[i];
if (teacher) {
if (selfclik.find("img").attr("src") == teacher.imgsrc) {
$(".T1").html(teacher.T1);
$(".T2").html(teacher.T2);
$(".T3").html(teacher.T3);
}
} }
}
});
});
}); /*
定时器开始，图片循环滚动
timerHandl：定时器句柄，用来控制开启和停止*/
function timerScroll() {
var timerHandl = setInterval(function () {
//获得当前高亮的li
var $hightli = srcollImages.getHightLightLi($(".Teac"));
//将第一个li插入最后一个li后面
srcollImages.firstInsertAfterLast();
//移除高亮的li的Zzhao_cent类，添加遮罩类Zzhao，紧跟的下一个li移除遮罩类Zzhao，添加高亮类Zzhao_cent
$hightli.removeClass("Zzhao_cent").addClass("Zzhao").next().removeClass("Zzhao").addClass("Zzhao_cent"); }, 1000);
return timerHandl;
}
</script>
</head> <body>
<div class="teacher">
<div class="Teac">
<ul>
<li class="Zzhao">
<a href="#"><img src="imges/teach_1.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_2.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_3.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_4.png" /></a>
</li>
<li class="Zzhao_cent">
<a href="#"><img src="imges/teach_5.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_6.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_7.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_8.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_9.png" /></a>
</li>
</ul>
<div class="Jjie">
<span class="T1">萌萌雨5</span>
<span class="T2">上海复旦大学硕士学位5</span></br>
<p class="T3">
追求完美与一身的现代化教师女性，才华横溢
一表人才，优秀教师5
</p>
</div>
</div>
</div>
<script type="text/javascript"> </script> </body>
</html>
Index.html
效果
源码下载：http://files.cnblogs.com/wolf-sun/Scroll.rar
总结
在使用jquery或者js实现该功能的时候，也没想着让代码多优雅，就是一个目标先实现该功能再说，然后再使用面向对象的思想慢慢的优化将里面乱糟糟的东西抽象出来，也想过弄一个插件来着，可惜由于功底有限也就放弃了，插件的方式还得再研究研究。实现的方式不唯一，这里也是记录一下自己的实现方式。在实现该功能中，对jquery的文档操作，animate方法，选择器，以及this的作用域问题又复习了一下。
[JQuery]用InsertAfter实现图片走马灯展示效果的更多相关文章
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...
- 3-5 编程练习：jQuery实现简单的图片对应展示效果
3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...
- 【三石jQuery视频教程】01.图片循环展示
视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- 【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
- Elastislide - 响应式的图片循环展示效果
Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- 手把手教小白如何用css+js实现页面中图片放大展示效果
1.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...
随机推荐
- Java节假日算法
类:Vacation package test; import java.io.Serializable; import java.util.Date; public class Vacation i ...
- oracle中函数
一:前言 最近决定每天都把知识点总结下,然后每个星期把知识点在进行分类发表日志. 二:The Question (1):在oracle中进行年龄的计算,知道出生日期进行计算后截取,本来是一个很简单的函 ...
- centos7下yum快速安装 mariadb（mysql）
从最新版本的centos系统开始,默认的是 Mariadb而不是mysql! 使用系统自带的repos安装很简单: yum install mariadb mariadb-server systemc ...
- openstack 问题澄清
1. neutron中plugin与agent是一一对应的吗? 在不使用ml2时,plugin与agent一一对应,如ovs-plugin与ovs-agent:当使用ml2 plugin时,该plug ...
- hdu 2112 HDU Today （最短路）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2112 题目大意:给出起点和终点,然后算出最短的路. 不过有好多细节要注意: (1)起始点和终止点相等的 ...
- Django【进阶】序列化
关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户,特别的Ajax请求一般返回的为Json格式. 方案一:serializers 1 2 3 4 5 fromdjango.cor ...
- 网络基础（osi、协议）
*互联网协议 人和人沟通需要一套共同的标准,英语就是普遍的一种,计算机如果需要进行联网互通,也需要一种统一的标准,如果所有的计算机都遵守这种标准,就会实现网络的互联. 1.一系列统一的标准,这些标准称 ...
- MySQL MyISAM优化设置点滴
先说一点问题: Mysql中的InnoDB和MyISAM是在使用MySQL中最常用的两个表类型,各有优缺点.两种类型最主要的差别就是 InnoDB 支持事务处理与外键和行级锁.而MyISAM不支持 ...
- （接口自动化）Python3操作MySQL数据库
基础语法: import pymysql #导入模块 conn = pymysql.connect(host='localhost',user='root', passwd='123456', db= ...
- 2.jinja2
1.jinja2模板介绍和查找路径 from flask import Flask, render_template import os # 之前提到过在渲染模板的时候,默认会从项目根目录下的temp ...