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实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
使用jQuery实现购物车
Oct 29 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动态生成VRML网页
2006/10/09 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
php批量修改表结构实例
2017/05/24 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
动态调用css文件——jquery的应用
2007/02/20 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python中单例模式总结
2018/02/20 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
pymysql模块使用简介与示例
2020/11/17 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
劳动之星获奖感言
2014/02/01 职场文书
歌咏比赛主持词
2015/06/29 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书