html部分:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<h3>jQuery实现轮播图</h3>
<div class="main">
<div class="box" id="box">
<!-- 图片区域 bagin -->
<a href="#">
<div class="img img1"></div>
</a>
<a href="#">
<div class="img img2"></div>
</a>
<a href="#">
<div class="img img3"></div>
</a>
<a href="#">
<div class="img img4"></div>
</a>
<a href="#">
<div class="img img5"></div>
</a>
<!-- end -->

<!--上一张-->
<span class="pre" id="prev">
                  <a href="#"><img src="img/pre2.png"/></a>
                </span>
<!--下一张-->
<span class="pre" id="next" style="right: 0;">
                  <a href="#"><img src="img/pre.png"/></a>
                </span>
<!--小圆点-->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</body>

</html>

css部分:

/*样式重置*/

* {
margin: 0;
padding: 0;
}

body {
font-family: Microsoft YaHei;
}

li {
list-style: none;
}

/*main bagin*/
h3{
text-align: center;
margin-top: 20px;
}
.main {
width: 1224px;
height: 480px;
margin: 20px auto;

}

/*end*/

/*box bagin*/

.box {
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
padding-top: 10px;
padding-left: 12px;
}

/*end*/

/*图片共同样式 bagin*/

.img {
width: 1200px;
height: 460px;
background: no-repeat;
}

/*end*/

.img1 {
background-image: url(../img/1.jpg);
}

.img2 {
background-image: url(../img/2.jpg);
}

.img3 {
background-image: url(../img/3.jpg);
}

.img4 {
background-image: url(../img/4.jpg);
}

.img5 {
background-image: url(../img/5.jpg);
}

/*箭头共同样式 bagin*/
.pre{
display: inline-block;
width:40px;
height:60px;
position: absolute;
top: 50%;
text-align: center;
line-height: 76px;
}
/*end*/

/*移入箭头的样式*/
span.active{
background: rgba(0,0,0,0.5);
}

ul {
position: absolute;
top:93%;
right: 20px;
}
li{
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 10px;
margin-left: 8px;

cursor: pointer;
}
/*点击小圆点时的样式*/
li.active{

}

js部分：

$(function() {
var timer = null,
index = 0,
len=$("#box div").length;
//console.log(len)

//移出函数，图片自动轮播
    $("#box").mouseout(function(){
        clearInterval(timer)
        autoimg()
    })
    //移入函数，图片停止轮播
    $("#box").mouseover(function(){
        clearInterval(timer)
    })
    //页面打开自执行
    $("#box").mouseout()
    //下一张点击事件
    $("#next").click(function(){
        index++
         if (index>len-1) {
         index=0
         }
         tab()
    })
    //上一张点击事件
    $("#prev").click(function(){
     index--
         if (index<0) {
         index=len-1
         }
         tab()
    })
    //上下张移入移出事件 bagin
    $("#next").mouseover(function(){
       $(this).addClass("active")
    })
    $("#next").mouseout(function(){
     $(this).removeClass("active")
    })
    $("#prev").mouseover(function(){
       $(this).addClass("active")
    })
    $("#prev").mouseout(function(){
     $(this).removeClass("active")
    })
    //end
    
    //小圆点点击事件
    $("ul li").click(function(){
      index=$(this).index()
      tab()
    })
    
    function tab(){
       $("#box div").hide().eq(index).show()
       $("ul li").removeClass().eq(index).addClass("active")
    }
    //时间函数
    function autoimg(){
     timer=setInterval(function(){
       index++
         if (index>len-1) {
         index=0
         }
         tab()
     },2000)
    }
    
   
})

jQuery-实现图片轮播的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  3. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  4. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 基于jquery的图片轮播 （IE8以上）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jQuery实现图片轮播

    之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...

  7. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  8. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  10. html css+div+jquery实现图片轮播

    一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...

随机推荐

  1. Tensorflow学习笔记2019.01.22

    tensorflow学习笔记2 edit by Strangewx 2019.01.04 4.1 机器学习基础 4.1.1 一般结构: 初始化模型参数:通常随机赋值,简单模型赋值0 训练数据:一般打乱 ...

  2. Nevertheless 和 Nonetheless，你用对了吗？

    本文转自:https://www.sohu.com/a/229443257_338773 Nevertheless 以及 nonetheless 都可以表示转折.很多人很多课程也提到这两者基本上可以交 ...

  3. 将jar包添加到本地maven仓库中

    在使用maven依赖添加jar包时,有时会遇到下载不成功的问题,这时需要将jar手动添加到本地的maven仓库中. 准备工作 配置好maven的环境变量 已经下载好的jar包 具体过程 win + R ...

  4. Tomcat start.bat闪退：JRE_HOME环境变量配置不对

    最近在配置Tomcat上遇到startup.bat启动闪退,在网上找了很多方法,都没解决.后来在网上找到两种问题,更改了两次,解决了.现将我遇到的问题分享,希望对遇到同样问题有帮助. 1.很多初学者对 ...

  5. Retrofit 2.0 上传文件

    1.用MultipartBody.Part的方式上传文件(单文件上传)(表单方式) @Multipart @POST("xxx/xxx") Call<ResponseBody ...

  6. 从xampp到phpmyadmin

    目录 xampp的安装和配置 尝试运行Example11_1(图形化管理工具的可视化界面) 参考博文 xampp的安装和配置 主要参考博文Intellj IDEA 简易教程 1.下载并安装xampp ...

  7. centos 7 常用工具篇

    1.vmstat监控linux整体性能工具如查看命令:vmstat 1 4 2.用netstat查看网络连接,接口等信息如:netstat -an 3.dig  或者nslookup 跟踪yum解析过 ...

  8. 一张图说明TCP和UCP协议

    图片来自网络. 本来不想打字了,但是博客园有字数限制... 第一次 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认:SYN:同步序列编号( ...

  9. python11 装饰器与闭包

    一.装饰器定义 本质:一种函数,为其他函数增加新功能 原则: 1.不修改被修饰函数的源代码 2.不修改被修饰函数的调用方式 需要技能:装饰器=高阶函数+函数嵌套+闭包 二.高阶函数 定义:函数接收的参 ...

  10. Eclispe 错误：找不到或无法加载加载主类

    解决办法: Project --> Clean Clean 操作会将该 project 以前的所有编译信息清空,然后默认将所有工程的所有 .java 文件都进行一次编译,这样的话就可以方便的进行 ...