JQuery和html+css实现带小圆点和左右按钮的轮播图实例
更新时间:2017年07月22日 08:53:22 投稿:jingxian
下面小编就为大家带来一篇JQuery和html+css实现带小圆点和左右按钮的轮播图实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
是的!你没看错!还是轮播图。这次的JQuery的哟!!
CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | /*轮播图 左右按钮 小白点*/ #second_div{ margin-top : 160px ; } .img_box{ overflow : hidden ; width : 100% ; height : 420px ; border : 1px solid ; position : relative ; } .img_box img{ width : 100% ; position : absolute ; } .ul 5 { list-style : none ; position : absolute ; left : 580px ; top : 565px ; } .ul 5 li{ float : left ; margin-left : 20px ; width : 40px ; height : 5px ; border : 0px ; background :lawngreen; } .d 1 ,.d 2 { 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 ; } .d 1 { position : absolute ; top : 373px ; left : 25px ; } .d 2 { position : absolute ; top : 373px ; left : 1445px ; } |
HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- 轮播图 --> < div id = "second_div" > < div class = "img_box" > < img src = "img/ban1.jpg" > < img src = "img/ban2.jpg" > < img src = "img/ban3.jpg" > < img src = "img/ban4.png" > </ div > < ul class = "ul5" > < li ></ li > < li ></ li > < li ></ li > < li ></ li > </ ul > < div class = "d1" ><</ div > < div class = "d2" >></ div > </ div > |
js代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | <script type= "text/javascript" > $(document).ready( function (){ //搜索按钮 $( "#ss" ).click( function (){ var new_li = $( "<li>" + $( "#skuang" ).val() + "</li>" ); $( "#d1 ul" ).append(new_li); $( "#d1" ).hide(); $( "#skuang" ).val( "" ); }) $( "#skuang" ).focus( function (){ $( "#d1" ).css( "display" , "block" ); }); $( "#skuang" ).blur(); $( "#qingch" ).click( function (){ $( "#d1 li:gt(0)" ).remove(); $( "#d1" ).hide(); }); //轮播图 var img=$( ".img_box img" ); var li=$( ".ul5 li" ); var divW=$( ".img_box" ).width(); var len=$( ".img_box img" ).length; img.css( "left" ,divW); img.eq(0).css( "left" ,0); li.eq(0).css( "background" , "red" ); var index=0; var next=0; function show(){ 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); function show1(){ 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 ; } else if (num<next){ 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; } else if (num>next){ 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); }) }) </script> |
以上这篇JQuery和html+css实现带小圆点和左右按钮的轮播图实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
在jQuery1.5中使用deferred对象 着放大镜看Promise
在那篇经典的关于jQuery1.5中Deferred使用方法介绍的文章中(译文见这里),有下面一段描述2011-03-03jQuery基于$.ajax设置移动端click超时处理方法
这篇文章主要介绍了jQuery基于$.ajax设置移动端click超时处理方法,分析了click事件与touchstart事件的原理与处理技巧,需要的朋友可以参考下2016-05-05关于setInterval、setTimeout在jQuery中的使用注意事项
最近碰到个问题,在使用jquery写定时器时,总是会出现fn不存在的错误提示2011-09-09
最新评论