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


Posted in jQuery onJuly 22, 2017

是的!你没看错!还是轮播图。这次的JQuery的哟!!

CSS代码:

/*轮播图 左右按钮 小白点*/
  #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;
 }  
  .ul5{
  list-style: none;
  position:absolute;
  left:580px;
  top:565px;
  } 
  .ul5 li{
  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;
  }

HTML代码:

<!-- 轮播图 -->
<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代码:

<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实现带小圆点和左右按钮的轮播图实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
一个超级简单的python web程序
2014/09/11 Python
python入门教程 python入门神图一张
2018/03/05 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
浅述python2与python3的简单区别
2018/09/19 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
优秀员工自荐书
2013/12/19 职场文书
服务员自我评价
2014/01/25 职场文书
自荐信如何制作?
2014/02/21 职场文书
补充协议书范本
2014/04/23 职场文书
爱的教育读书笔记
2015/06/26 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python