基于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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
js中!和!!的区别与用法
May 09 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
简述Python中的进程、线程、协程
2016/03/18 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
Python restful框架接口开发实现
2020/04/13 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
法律进机关实施方案
2014/03/12 职场文书
三年级学生期末评语
2014/12/26 职场文书
欢迎新生标语2015
2015/07/16 职场文书
化工生产实习心得体会
2016/01/22 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python