Jquery轮播实现
来源:互联网 发布:linux 进程执行了sleep 编辑:程序博客网 时间:2024/05/17 06:19
$(document).ready(function(){//创建一个数组 用来存储图片var img = Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "adver05.jpg", "adver06.jpg");//再定义一个变量var flag = 0;//图片从左往右切换$(".op_next").click(function(){//当到最后一张图片的时候if(flag==img.length-1){alert('这是最后一张图片');}else{//进行累加flag++;var i = flag+1;//设置背景图片$("#a").attr("src","images/"+img[flag])$("#xx").find("li").eq(flag).css("background","green"); $("#xx").find("li").eq(flag).siblings().css("background","black");};});//图片从右边往左边切换$(".op_prev").click(function(){//当图片为第一张的时候if(flag==0){alert('这是第一张图片');}else{//依次递减flag--;var i = flag+1;//设置背景图片$("#a").attr("src","images/"+img[flag]);//设置图片对应编号的颜色$("#xx").find("li").eq(flag).css("background","green");$("#xx").find("li").eq(flag).siblings().css("background","black");//$("ul[id='xx'] li:nth-of-type("+i+")").css("background","green");////设置没有被选择图片对应的编号颜色//$("li:nth-of-type("+i+")").siblings().css("background","black");}});//鼠标移上去显示按钮,鼠标移开隐藏按钮$(".top_slide_wrap").mouseover(function(){//显示左边的按钮$(".op_btns").show();//显示右边的按钮}).mouseout(function(){//隐藏左边的按钮$(".op_btns").hide();//隐藏右边的按钮})});
阅读全文
0 0
- Jquery轮播实现
- jQuery 实现图片轮播
- jquery 实现图片轮播
- jQuery --- 实现图片轮播
- jquery实现图片轮播
- jquery实现图片轮播
- jQuery实现轮播效果
- 浅谈jQuery实现轮播
- jQuery 实现图片轮播
- JQuery 实现图片轮播
- Jquery实现幻灯片轮播
- Jquery实现图片轮播
- jquery实现无缝轮播
- jQuery实现轮播广告
- jQuery实现文字轮播效果
- JQuery实现图片轮播效果
- Jquery 图片轮播实现原理总结
- JQuery实现图片轮播效果
- 魔方阵
- CSS的背景设置
- (转)每个程序员都可能犯过的10个错误
- Spring MVC过滤器-HiddenHttpMethodFilter
- 计划任务,账户密钥集不存在 错误是: 0x80090016
- Jquery轮播实现
- java学习-----例子2
- JavaSE学习--面向对象
- Butterknife8.6在项目中的使用
- opengl红宝书第三章 视图 拾遗
- setTimeout 与setInterval 用法案例
- SQLServer配置
- 软考笔记0523
- 【问底】徐汉彬:Web系统大规模并发——电商秒杀与抢购