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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery实现高级检索功能
May 28 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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php数组键名技巧小结
2015/02/17 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JS回调函数的应用简单实例
2014/09/17 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
python 不关闭控制台的实现方法
2011/10/23 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python中的句柄操作的方法示例
2019/06/20 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
四年级语文教学反思
2014/02/05 职场文书
物业品质提升方案
2014/06/08 职场文书
上课不认真检讨书
2014/09/17 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫