基于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 相关文章推荐
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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代码简化
2010/02/08 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
JS 控件事件小结
2012/10/31 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
node中的session的具体使用
2018/09/14 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
复习Python中的字符串知识点
2015/04/14 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
Python接收手机短信的代码整理
2020/08/02 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
南京南京观后感
2015/06/02 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS