之前说过JQ按钮淡入淡出的轮播图,今天我把左右移动的轮播图也发出来让大家看看。
如上图,这次分享的至是左右按钮和自动轮播图,如果需要有按钮的话可以参考https://www.balrogsxt.com/60.html进行修改
左右轮播和幻灯片轮播区别也不是很大,接下来我用代码展示。
HTML+CSS
<div class="container"> <a href="javascript:move_btn(1);" id="move_left">←</a> <a href="javascript:move_btn(2);" id="move_right">→</a> <ul class="content"> <li> <img src="images/1.jpg" alt=""/> </li> <li> <img src="images/2.jpg" alt=""/> </li> <li> <img src="images/3.png" alt=""/> </li> <li> <img src="images/4.jpg" alt=""/> </li> </ul> </div>
JQuery
<!--调用百度jq--> <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script> var i = 0;//初始化当前移动下标 var w = $(".content li").width();//获取单个图片li宽度 var move = 0;//定义移动距离 setInterval("start()",2000);//设置定时器,2s一次 function start(){ i++;//迭代并判断 if(i>3)i=0; move = -w*i;//计算需要移动的距离 $(".content").stop(true,false).animate({ left:move//移动 },500); } function move_btn(id){ var b;//定义左右点击需要移动到的坐标 //判断下一个移动位置并赋值给b if(id=="1"){ switch(i) { case 0:b = 3;i = b;break; case 1:b = 0;i = b;break; case 2:b = 1;i = b;break; case 3:b = 2;i = b;break; default:alert("左按钮轮播失败!初始化中");b = 0;i = b; } }else if(id=="2"){ switch(i) { case 0:b = 1;i = b;break; case 1:b = 2;i = b;break; case 2:b = 3;i = b;break; case 3:b = 0;i = b;break; default:alert("右按钮轮播失败!初始化中");b = 0;i = b; } } moveImg(b);//调用函数并传递下一个坐标 } function moveImg(b){ move = -w*b;//计算需要移动的距离 $(".content").stop(true,false).animate({ left:move//移动 },500); } </script>代码不多,希望大家能够深刻学会,如果以上代码搞不清楚什么情况的话,我留下了文件,大家可以下载参考
下载地址
3条评论登录后可见