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

是的!你没看错!还是轮播图。这次的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实现带小圆点和左右按钮的轮播图实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • jQuery图片左右滚动代码 有左右按钮实例

    用jquery封装了一个控制图片左右滚动的插件,有左右按钮可以点击实现图片滚动效果. 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>slide</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquer

  • jQuery插件实现带圆点的焦点图片轮播切换

    这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <base target="_blank" /> <

  • jquery实现左右滑动式轮播图

    本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><

  • 用jQuery实现圆点图片轮播效果

    图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : -------------------------------------------------------------------------------- 自动轮播: 将一个用于放置图片素材的与显示框同高度的大div放入显示框,将图片素材放入大的div中,通过jquery的animate()方法改变大div相对

  • 基于jQuery实现左右图片轮播(原理通用)

    本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下 运行效果图: 重点!!! 实现原理: 通过判断index值的大小变化来判断图片左移还是右移.通过控制图片的left值,来达到一个轮播的效果. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <scrip

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

    是的!你没看错!还是轮播图.这次的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;

  • jQuery制作全屏宽度固定高度轮播图(实例讲解)

    前端新手自己写的,练习一下基本功,也是留下的第一次记录 html部分 div class="cm-banner"> <div class="cm-banner-list"> <ul id="cm_banner_list"> <!--图片宽度和高度在css中定为1920x300--> <li><img src="cm-banner-01.png" /></l

  • jQuery轮播图实例详解

    本文实例为大家分享了jQuery轮播图实例的具体代码,供大家参考,具体内容如下 1.html+css+js代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none; } body{ padding: 20px; } #containe

  • JS原生带小白点轮播图实例讲解

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: 300px; position: absolute; } li{ float: left; list-style: none; } img{ width: 500px; height: 300px; } div{ width: 500px; height: 300px; margin: 50px a

  • jquery写出PC端轮播图实例

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过swiper.js,后来想了想,就不引入它了,免得又得增加依次一次网络请求,项目里既然已经用到了jQuery,那就索性用jQuery写一个轮播图吧. 现在把自己写的轮播图这块代码单独拿出来,做一个小demo写在这里记录一下(demo中轮播图的图片网上随意找的) 实现的效果: 1.自动轮播(轮播时间间隔在

  • 微信小程序实现轮播图指示器

    本文实例为大家分享了微信小程序实现轮播图指示器的具体代码,供大家参考,具体内容如下 1.文件目录 2.轮播图页面布局 需求:自定义轮播指示器:当轮播图发生变化时,自定义轮播指示器跟随图片发生对应改变 bindchange:current 改变时会触发 change 事件,即当图片索引发生变化时触发的事件 current:当前所在滑块的 index (number类型) autoplay: 是否自动切换 interval: 自动切换时间间隔 circular: 是否采用衔接滑动 <view cla

  • jQuery实现轮播图源码

    本文实例为大家分享了jQuery实现轮播图展示的具体代码,供大家参考,具体内容如下 设计: 根据上图可以看出,轮播图需要以下元素:外面的盒子div.放置图片集合的盒子ul.放置两侧按钮的盒子div.下侧顺序按钮div 源代码如下: 一.html源码如下: <div class="outer"> <ul class="img"> <li><a><img src="../static/img/1.jpg&q

  • jquery版轮播图效果和extend扩展

    本文实例为大家分享了jquery版本轮播图及extend扩展的具体代码,供大家参考,具体内容如下 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -w

  • JS+CSS实现带小三角指引的滑动门效果

    本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代

  • jQuery实现带3D切割效果的轮播图功能示例【附源码下载】

    本文实例讲述了jQuery实现带3D切割效果的轮播图.分享给大家供大家参考,具体如下: 这是一个使用css3+jQuery实现的轮播图效果,以前还没接触css3时,觉得效果挺酷炫的,但是实现挺复杂的,今天研究了一下,发现特别简单,稍微动用一下空间想象力就好了,下面时效果图 1.这是html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

随机推荐