$(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();
//隐藏右边的按钮
})
});
Jquery轮播实现
最新推荐文章于 2022-05-31 16:47:00 发布