Jquery 实现轮播图
2024-08-28 09:48:42
jq 轮播图
function banner_show(){
var left_btn = $("#banner_tag_left"); //获取左侧单击按钮
var right_btn = $("#banner_tag_right"); //获取右侧点击按钮
var Owidth = $("#banner ul li").width(); //获取单个图片宽度
var Oindex = $("#banner ul li"); //获取需要轮播的图片个数
var banner_w = $("#banner").width(); //获取总宽度
var index = 0; //定义当前的轮播图的位数
$(left_btn).bind("click",function(){
index++;
if( index>(Oindex.length-1)){ //当位于最后一张图片时,位数重置
index = 0;
}
$("#banner").animate({ //JQ动画方法
left:-Owidth*index+"px", //position定位,left 的值为负的 宽度乘以位数(width * index )
},300)
});
$(right_btn).bind("click",function(){
index--;
if( index<0){
index=Oindex.length-1; //当位于第一张图时,位数变为最后一位
}
$("#banner").animate({
left:-Owidth*index+"px", //position定位。left 的值为负的 宽度乘以位数(width * index )
},300) }); }
最新文章
- C语言位域
- iOS:后台定位并实时向服务器发送位置
- ASPxGridView中如何对主从表绑定数据
- sql 自定义函数--十进制转二进制
- Lua和Javascript差异对比
- Threading Module源码概述(三)
- Flex中的折线图
- ReactJS基础(续)
- 远程服务器数据交互技术:rsync,scp,mysqldump
- jenkins乱码解决问题
- Chapter 1 An Overview of Computers and Programming Languages
- git回滚部分文件到某个版本
- BZOJ.1805.[IOI2007]sail船帆(贪心 线段树)
- Linux下更换jdk和配置环境变量
- Centos下分布式跟踪工具Pinpoint的完整部署记录
- bzoj千题计划212:bzoj1864: [Zjoi2006]三色二叉树
- 20170731xlVba根据数据表和模板表生成新表
- Mysql 插入时间时报错Incorrect datetime value: &#39;&#39; for column &#39;createtime&#39;
- medusa爆破路由
- 斯皮尔曼等级相关(Spearman’s correlation coefficient for ranked data)
热门文章
- Codeforces Round #412 (rated, Div. 2, base on VK Cup 2017 Round 3) A B C D 水 模拟 二分 贪心
- C++ ------ 虚函数覆盖、重载
- Ambari和ClouderaManager主要不同对比
- 「Django」rest_framework学习系列-解析器
- Java运行原理研究(未完待续)
- CodeBlocks调试器设置错误问题
- 洛谷 P2345 奶牛集会
- Linux网络知识
- 在JavaScript中重写jQuery对象的方法
- 【leetcode 简单】第十八题 爬楼梯