[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.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...
随机推荐
- struts2学习笔记（二）
一. 国际化的目标 1). 如何配置国际化资源文件 I. Action 范围资源文件: 在Action类文件所在的路径建立名为 ActionName_language_country.properti ...
- Spring - IoC(12): 属性占位符
使用属性占位符可以将 Spring 配置文件中的部分元数据放在属性文件中设置,这样可以将相似的配置(如 JDBC 的参数配置)放在特定的属性文件中,如果只需要修改这部分配置,则无需修改 Spring ...
- 【BZOJ3942】Censoring [KMP]
Censoring Time Limit: 10 Sec Memory Limit: 128 MB[Submit][Status][Discuss] Description 有一个S串和一个T串,长 ...
- ubuntu 安装wxpython以及boa-constructor
直接参考 官方的安装文档. 学习python 的时候就 用 wxPython . 那个时候用的是windows 的版本. 现在 用 ubuntu 下开发了.没有搭建好环境. 其实就一句话: sudo ...
- 培训补坑(day8:树上倍增+树链剖分)
补坑补坑.. 其实挺不理解孙爷为什么把这两个东西放在一起讲..当时我学这一块数据结构都学了一周左右吧(超虚的) 也许孙爷以为我们是省队集训班... 好吧,虽然如此,我还是会认真写博客(保证初学者不会出 ...
- 常见协议基础知识总结--FTP协议
FTP协议是一种基于客户端和服务器的文件传输协议,属于应用层协议,基于传输层的TCP协议: FTP主要分成主动模式和被动模式两种传输方式, 方式是相对服务器而言的,服务器主动发起数据连接即主动方式,使 ...
- python实战===石头剪刀布，简单模型
#石头剪刀布 import random import time win_list = [("石头","剪刀"),("布","石头 ...
- 5分钟在Mac上从0配置安装laravel5.5
1.安装包管理工具homebrew ,相当于ubuntu的apt-get 在iTerm命令行输入: /usr/bin/ruby -e "$(curl -fsSL https://raw.gi ...
- SecureCRT的安装、介绍、简单操作
网上看到一篇名为<SecureCRT的使用方法和技巧(详细使用教程)>的secureCRT教程,可能软件版本与我不一样我安装的是8.1. 原文来源:http://www.jb51.net/ ...
- HDU 2280 Tetris Comes Back
状态压缩,$dp$,预处理. 设$dp[i][j]$为前$i-1$行填满,第$i$行为状态$j$的最小需要$1$种类的数量.预处理好每种状态能推出哪些状态,并且记录下所需花费就可以了. #pragma ...