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();//隐藏右边的按钮})});

原创粉丝点击