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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jquery轮播图插件使用方法详解
Jul 31 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
php中过滤非法字符的具体实现
2013/10/29 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python使用正则表达式提取网页URL的方法
2015/05/26 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python实现简单http服务器
2018/04/12 Python
解决python 输出是省略号的问题
2018/04/19 Python
Pandas的数据过滤实现
2021/01/15 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技