基于Jquery实现的一个图片滚动切换


Posted in Javascript onJune 21, 2012

首先还是要引用jquery框架的。

然后开始HTML代码:

<div id="New_zlMimgMv"> 
<div class="imgMvBox"> 
<ul id="imgMvCon"> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
</ul> 
</div> 
<div class="imgMvNum"> 
<a href="javascript:;">专业问答平台</a> 
<a href="javascript:;" style="width:206px;">啊是发达庵圣坊但是分开就</a> 
<a href="javascript:;">同城阿萨德业动</a> 
</div> 
</div>

再然后看看CSS(大家也可以直接看JS的):
ul,img,li,a{ 
border:0; 
margin:0; 
padding:0; 
list-style:none; 
} 
#New_zlMimgMv { 
border: 1px solid #B8B8B8; 
height: 192px; 
margin-bottom: 12px; 
width: 446px; 
} 
#New_zlMimgMv .imgMvBox, #New_zlMimgMv .imgMvBox img { 
height: 160px; 
width: 446px; 
} 
#New_zlMimgMv .imgMvBox { 
overflow: hidden; 
} 
#New_zlMimgMv .imgMvNum a { 
background: #E6E6E6; 
display: block; 
float: left; 
height: 32px; 
line-height: 32px; 
text-align: center; 
text-decoration: none; 
width: 120px; 
color:#282828; 
} 
#New_zlMimgMv .imgMvNum a.changeThis { 
background: #A29F9F; 
color: #FFFFFF; 
}

最后是JQ代码了:
var imgLength=$("#imgMvCon li").length;//获取需滚动元素总数 
var imgHeight=$("#imgMvCon li").height();//获取需滚动元素高度 
var totalHeight=imgLength*imgHeight;//获取需滚动元素总高度 
var mvul=$("#imgMvCon"); 
var positiontop=0;//定义一个初始偏移位置0var linknum=0;//定义一个用于控制按钮切换索引的初始值 
var mvTimer;//设置一个定时器 
mvul.parent().css({"position":"relative"})//设置容器的CSS 
mvul.css({"position":"absolute"});//同上 
$(".imgMvNum a").eq(linknum).addClass("changeThis");//给第一个按钮添加样式 
function imgMv(){ 
if(imgLength>1)//如果不是一张图片的话就执行下面的 
{ 
positiontop=positiontop+imgHeight;//没执行一次便宜位置加一次高度 
if(positiontop==totalHeight)//如果偏移值等于总高度将偏移值设回0 
{ 
positiontop=0; 
} 
linknum++;//运行一次,用于控制按钮切换的索引加1 
if(linknum>=imgLength)//如果索引大于或等于滚动元素总长度,将索引设回0 
{ 
linknum=0; 
} 
mvul.animate({top:-(linknum*imgHeight)},400);//用animate属性实现滚动,'linknum*imgHeight'方便和按钮同步 
$(".imgMvNum a").removeClass("changeThis");//移除样式 
$(".imgMvNum a").eq(linknum).addClass("changeThis");//添加样式 
} 
} 
function startMv(){ 
mvTimer=setInterval(imgMv,4000);//定时器函数 
} 
startMv();//运行定时器 
$(".imgMvNum a").each(function(){//遍历按钮 
$(this).mouseover(function(){//鼠标经过按钮 
clearInterval(mvTimer);//清除定时器 
linknum=$(this).index();//鼠标经过按钮将linknum设置为当前按钮索引 
$(".imgMvNum a").removeClass("changeThis"); 
$(this).addClass("changeThis"); 
mvul.animate({top:-(linknum*imgHeight)},300);//用animate属性实现滚动,'linknum*imgHeight'方便和按钮同步 
}).mouseout(function(){ 
startMv();//鼠标移出再次执行定时器 
}); 
});

每句都注释清楚了哈。这里只是简单的写了个简单的向上效果,代码可能也不优化。主要是给大家参考和提供思路。
大家可以把这些效果封装成插件,再编写一些其它的方向或效果。
看下效果(这个文章里面样式没法完全放进来,大家可以复制到自己电脑)
Javascript 相关文章推荐
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 #Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 #Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 #Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 #Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 #Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 #Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 #Javascript
You might like
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
python接口自动化框架实战
2020/12/23 Python
什么是Smart Navigation?
2016/07/03 面试题
如何手工释放资源
2013/12/15 面试题
幼儿如何来做好自我评价
2013/11/05 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
工程承诺书怎么写
2014/05/24 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
小学班主任个人总结
2015/03/03 职场文书
在Python中如何使用yield
2021/06/07 Python