JQuery和html+css实现带小圆点和左右按钮的轮播图实例

2024-01-25 07:40:03 343

/*轮播图左右按钮小白点*/ #second_div{ margin-top:160px; } .img_box{ overflow:hidden; width:100%; height:420px; border:1pxsolid; position:relative; } .img_boximg{ width:100%; position:absolute; } .ul5{ list-style:none; position:absolute; left:580px; top:565px; } .ul5li{ float:left; margin-left:20px; width:40px; height:5px; border:0px; background:lawngreen; } .d1,.d2{ width:50px; height:60px; background-color:rgba(10,10,10,0.5); text-align:center; font-size:26px; font-weight:800px; line-height:60px; cursor:pointer; } .d1{ position:absolute; top:373px; left:25px; } .d2{ position:absolute; top:373px; left:1445px; }

$(document).ready(function(){ //搜索按钮 $("#ss").click(function(){ varnew_li=$("

"+$("#skuang").val()+"

"); $("#d1ul").append(new_li); $("#d1").hide(); $("#skuang").val(""); }) $("#skuang").focus(function(){ $("#d1").css("display","block"); }); $("#skuang").blur(); $("#qingch").click(function(){ $("#d1li:gt(0)").remove(); $("#d1").hide(); }); //轮播图 varimg=$(".img_boximg"); varli=$(".ul5li"); vardivW=$(".img_box").width(); varlen=$(".img_boximg").length; img.css("left",divW); img.eq(0).css("left",0); li.eq(0).css("background","red"); varindex=0; varnext=0; functionshow(){ next++; if(next==len){ next=0; } img.eq(next).css("left",divW); img.eq(index).animate({"left":-divW}); img.eq(next).animate({"left":0}); li.eq(next).css("background","red"); li.eq(index).css("background","lawngreen"); index=next; } t=setInterval(show,2000); functionshow1(){ next--; if(next==-1){ next=len-1; } img.eq(next).css("left",-divW); img.eq(index).animate({"left":divW}); img.eq(next).animate({"left":0}); li.eq(next).css("background","red"); li.eq(index).css("background","lawngreen"); index=next; } img.hover(function(){ clearInterval(t); },function(){ t=setInterval(show,2000); }) //左右按钮 $(".d2").mousedown(function(){ clearInterval(t); show(); }) $(".d2").mousedown(function(){ t=setInterval(show,2000); }) $(".d1").mousedown(function(){ clearInterval(t); show1(); }) $(".d1").mousedown(function(){ t=setInterval(show,2000); }) //小白点点击 li.mousedown(function(){ num=$(this).index(); if(num==next){ return; }elseif(numnext){ clearInterval(t); img.eq(num).css("left",divW); img.eq(index).animate({"left":-divW}); img.eq(num).animate({"left":0}); li.eq(num).css("background","red"); li.eq(index).css("background","lawngreen"); index=num; next=num; } }) li.mouseup(function(){ t=setInterval(show,2000); }) })

JQuery和html+css实现带小圆点和左右按钮的轮播图实例

热门推荐

随机推荐