js实现点击左右按钮轮播图片效果实例
更新时间：2015年01月29日 09:40:06 作者：comeonstone
这篇文章主要介绍了js实现点击左右按钮轮播图片效果的方法,涉及click事件相应、animate方法等使用技巧,需要的朋友可以参考下
本文实例讲述了js实现点击左右按钮轮播图片效果的方法。分享给大家供大家参考。具体实现方法如下：
$(function () {
var index = 1;
var pPage = 1;
var $v_citemss = $(".citemss");
var $v_show = $v_citemss.find("ul");
v_width = $v_citemss.width();//图片展示区外围div的大小
//注：若为整数，前边不能再加var，否则会被提示underfine
p_count = $v_citemss.find("li").length;//获取此处li的个数
$(".slideprev1").click(function () {
if (!$v_show.is(":animated")) {
if (pPage == index) {
$v_show.animate({ right: '0px' }, "3000");
pPage = 4;
} else {
$v_show.animate({right: '-=' + v_width },"3000");
pPage--;
}
}
});
$(".slidenext").click(function () {
if (!$v_show.is(":animated")) {
if (pPage == p_count) {
$v_show.animate({ left: '0px' }, "3000");
pPage = 1;
} else {
$v_show.animate({ left: '-=' + v_width }, "3000");
pPage++;
}
}
});
});
对于鼠标悬浮上去，下方出现横条描述、左右出现按钮等效果，完全可以用css实现，不需要使用js来实现了。
具体操作：css中绝对或相对定位，left，right或bottom为负数，鼠标悬浮上去后，分别正确显示，再设置一下transition，作为动画的缓冲即可。
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了点评js异步加载的4种方式，帮助大家更全面的了解js异步加载方式，感兴趣的小伙伴们可以参考一下2015-12-12
向导可以让你的网站用户快速上手使用你的web应用，提高网站的吸引力。向导一般分为好几个步骤，每个步骤收集一些数据，并且支持退回功能，所有步骤完成后可以得到每一步的收集结果。这里给大家展示一种比较通用，灵活且简单的向导框架。2011-08-08
这篇文章主要介绍了Javascript数组中push方法用法,结合实例形式分析了javascript中push方法的原理、使用方法与相关注意事项,需要的朋友可以参考下2016-10-10
JavaScript数据类型和变量_动力节点Java学院整理
这篇文章主要为大家详细介绍了JavaScript数据类型和变量的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
在微信小程序中内嵌H5页面是一种常见的需求,因为H5页面具有灵活性和跨平台性,可以弥补小程序原生代码的不足,这篇文章主要给大家介绍了关于小程序webView实现小程序内嵌H5页面的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了JS返回iframe中frameBorder属性值的方法,分析了frameBorder属性的功能及javascript获取frameBorder属性值的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了uni-app封装组件实现下方滑动弹出模态框效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-08-08
这篇文章主要介绍了es6 filter() 数组过滤方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
uni-app的h5页面中onHide/onUnload方法不触发的问题解决方法
uni-app的页面的生命周期包括onInit、onLoad、onShow、onReady、onHide和onUnload等几个阶段,这篇文章主要给大家介绍了关于uni-app的h5页面中onHide/onUnload方法不触发的问题解决方法,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了原生JS实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
最新评论