基于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 相关文章推荐
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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伪静态写法附代码
2008/06/20 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue实现购物车的监听
2020/04/20 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
用python写asp详细讲解
2013/12/16 Python
Python实现发送email的几种常用方法
2014/08/18 Python
Python3实现生成随机密码的方法
2014/08/23 Python
python复制与引用用法分析
2015/04/08 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python中shell执行知识点
2020/05/06 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
函授本科自我鉴定
2013/11/03 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
写给同事的离职感言
2015/08/04 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏