废话不多说,先上源码
1 <div id="baner"> 2 <div class="imgt"> 3 <div class="shadeDiv clarity"></div><!-- 透明层 --> 4 <ul> 5 <li name="1"></li> 6 <li name="2"></li> 7 <li name="3"></li> 8 <li class="clarity" name="4"></li> 9 </ul> 10 </div> 11 12 <ul class="imgc"> 13 <li id="img_1"><img src="image/baner.jpg" alt=""></li> 14 <li id="img_2"><img src="image/baner.jpg" alt=""></li> 15 <li id="img_3"><img src="image/baner.jpg" alt=""></li> 16 <li id="img_4"><img src="image/baner.jpg" alt=""></li> 17 </ul> 18 <div class="next" name="next"> 19 </div> 20 <div class="before" name="before"> 21 </div> 22 </div>
/*index css start*/ #baner{ width: 1000px; height: 500px; margin: 0 auto; position: relative; } .imgc li img{ width: 1000px; } .imgc li{ position: absolute; } .next{ position: absolute; background: url(../image/next.png) no-repeat 0 0; background-position: 5px 17px; width: 20px; height: 50px; background-color: #fff; z-index: 2; margin-left: 980px; margin-top: 174px; cursor: pointer; } .before{ position: absolute; background: url(../image/before.png) no-repeat 0 0; background-position: 5px 17px; width: 20px; height: 50px; background-color: #fff; z-index: 2; margin-top: 174px; cursor: pointer; } .imgt{ margin: 0 auto; position: absolute; z-index: 2; height: auto; margin-top: 357px; width: 1000px; height: 40px; text-align: center; } .imgt ul{ margin: 0 auto; width: 100px; height: 40px; } .imgt ul li{ width: 10px; height: 10px; background-color: #000; float: left; border-radius: 50%; margin-left:3px; margin-top: 15px; cursor: pointer; } .shadeDiv{ width: 100%; height: 40px; background-color: #777777; position: absolute; z-index: 1; } .clarity { filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3; }
1 var n=0;//当前图片编号 2 var count=0;//图片数量 3 count=$(".imgc li").length; 4 //下一张图片 5 function changeimg(){ 6 $(".imgc").children().fadeOut(500);//所有图片淡出 7 $(".imgc").children().eq(n).fadeIn(1000);//第N张图淡入 8 $(".imgt li").removeClass("clarity");//移除所有编号样式 9 $(".imgt li").eq(n).addClass("clarity");//增加当前编号样式 10 if(n==(count-1)) 11 { 12 n=0; 13 } 14 else{ 15 n=n+1; 16 } 17 } 18 19 function start(){ 20 //定时器,4秒更换图片 21 t = setInterval("changeimg()", 4000); 22 23 } 24 25 //图片编号点击事件 26 $(".imgt li").click(function(){ 27 window.clearInterval(t); 28 n=parseInt($(this).attr("name")-1); 29 changeimg(); 30 start(); 31 }) 32 33 34 //左右切换图片,点击下一张图时直接执行changeimg() 35 $(".next,.before").click(function(){ 36 var btntext=$(this).attr("name"); 37 //点击上一张 38 if (btntext=="before") { 39 if (n==0) {//当n=0时当前显示的为最后一张图 40 n=count-2;//当n为0时切换倒数第二张图 41 } 42 else if(n==1){//当n=1是先前显示的第一张图 43 n=count-1;//当n=0是切换到最后一张图 44 } 45 else{ 46 n=n-2; 47 } 48 } 49 window.clearInterval(t);//停止计时器 50 changeimg(); 51 start(); 52 }) 53 start();
第一次自己写轮播效果,有很多不足的地方请多多批评教育
时间: 2024-11-23 21:59:17