<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="../Scripts/jquery-1.7.2.js"></script>

    <style type="text/css">

        body,div,ul,li,a,img{margin: 0;padding: 0;}

        ul,li{list-style: none;}

        a{text-decoration: none;}

        #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

        #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}

        .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}

        .imgList li{float:left;display: inline;}

        #prev,

        #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}

        #prev{left: 10px;}

        #next{right: 10px;}

        #prev:hover,

        #next:hover{opacity: 0.5;filter:alpha(opacity=50);}

        .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}

        .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

        .infoList li{display: none;}

        .infoList .infoOn{display: inline;color: white;}

        .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

        .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

        .indexList .indexOn{background: red;font-weight: bold;color: white;}

    </style>

</head>

<body>

    <div id="wrapper">

        <!-- 最外层部分 -->

        <div id="banner">

            <!-- 轮播部分 -->

            <ul class="imgList">

                <!-- 图片部分 -->

                <li><a href="#"><img src="../images/1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>

                <li><a href="#"><img src="../images/2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>

                <li><a href="#"><img src="../images/3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>

                <li><a href="#"><img src="../images/4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>

                <li><a href="#"><img src="../images/5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>

            </ul>

            <img src="../images/qianxleft1.png" width="20px" height="40px" id="prev">

            <img src="../images/qianxr1.png" width="20px" height="40px" id="next">

            <div class="bg"></div> <!-- 图片底部背景层部分-->

            <ul class="infoList">

                <!-- 图片左下角文字信息部分 -->

                <li class="infoOn">puss in boots1</li>

                <li>puss in boots2</li>

                <li>puss in boots3</li>

                <li>puss in boots4</li>

                <li>puss in boots5</li>

            </ul>

            <ul class="indexList">

                <!-- 图片右下角序号部分 -->

                <li class="indexOn">1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

            </ul>

        </div>

    </div>

    <script src="../Scripts/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

        var curIndex = 0,//当前index

        imgLen = $(".imgList li").length;//图片总数

        var autoChange = setInterval(function () {

            if (curIndex < imgLen - 1) {

                curIndex++;

            } else {

                curIndex = 0;

            }

            changeTo(curIndex);

        }, 2500);

        //左箭头事件

        $("#prev").hover(function () {

            clearInterval(autoChange);//滑入定时器清除;

        }, function () {

            autoChangeAgain();

        });

        $("#prev").click(function () {

            //根据curIndex处理上一张图片

            curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);

            changeTo(curIndex);

        });

        //右箭头滑入事件

        $("#next").hover(function () {

            //滑入清除定时器

            clearInterval(autoChange);

        }, function () {

            autoChangeAgain();

        });

        //右箭头点击处理事件

        $("#next").click(function () {

            curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;

            changeTo(curIndex);

        });

        //清除定时器时候的重置定时器--封装

        function autoChangeAgain() {

            autoChange = setInterval(function () {

                if (curIndex < imgLen - 1) {

                    curIndex++;

                } else {

                    curIndex = 0;

                }

                //调用变换处理函数

                changeTo(curIndex);

            }, 2500);

        }

        function changeTo(num) {

            var goLeft = num * 400;

            $(".imgList").animate({ left: "-" + goLeft + "px" }, 500);

            $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");

            $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

        }

        //对右下角按钮index进行事件绑定处理等

        $(".indexList").find("li").each(function (item) {

            $(this).hover(function () {

                clearInterval(autoChange);

                changeTo(item);

                curIndex = item;

            }, function () {

                autoChangeAgain();

            });

        });

    </script>

</body>

原生JQ实现图片滑动轮播的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. jq实现图片轮播:圆形焦点+左右控制+自动轮播

    来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  3. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  4. 原生Js_简易图片轮播模板

    功能:图片自动循环轮播,通过点击“上一张”,“下一张”按钮来控制图片的切换 <!DOCTYPE html> <html> <head> <meta chars ...

  5. 原生Javascript实现图片轮播效果

    首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...

  6. 原生JS实现图片轮播

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JQ简单图片轮播

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

  8. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  9. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

随机推荐

  1. 50道经典的JAVA编程题(目录)

    这份题从2013做到2014啊...哈哈,整理个目录吧.为了好查阅,也为了监督自己好好的去做完这50道题.当然,有些题实在做得没意思就跳过了,或者自己改题了.题目来源于:http://blog.sin ...

  2. 恒天云IaaS基础设施标准

    系统总体要求: 支持多种操作系统:支持Windows,Redhat.Suse等Linux操作系统: 支持多种虚拟化系统:支持多种计算资源虚拟化方式: 网络接口:支持千兆及万兆以太网技术: 供电:支持直 ...

  3. Java常用知识点

    1. java不支持默认参数,需要用重载来实现 2. java中要比较字符串是否相等,不能用等号,要用equals函数来比较内容 3. 尽量避免使用try catch来捕获异常,可以使用if语句判断以 ...

  4. ubuntu下一次网络流量危机

    为了便于团队合作,公司局域网搭建了一台服务器,安装了ubuntu 13.04. 一直相安无事.直到今天上午. 突然的大流量,让整个局域网网速慢下来,网页都打不开. 差不多一个小时都是这样,我还以为是公 ...

  5. 也谈SSO，一个简单实用的单点登录Demo

    关于SSO(单点登录),百度百科解释如下 : “SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要 ...

  6. openstack系列阅读目录

    一 keystone系列 keystone基础 网关协议cgi,fastcgi,wsgi,uwsgi keystone源码分析 keystone部署及使用 keystone客户端工作介绍 二 glan ...

  7. Smack[3]用户列表，头像，组操作，用户操作

    用户列表 Smack主要使用Roster进行列表管理的 connection.getRoster(); /** * 返回所有组信息 <RosterGroup> * * @return Li ...

  8. 【Cocos2d-X开发学习笔记】第09期：渲染框架之菜单类（CCMenu）的使用

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010    一.菜单项(CCMenuItem) 菜单项 ...

  9. .NET加密配置文件connectionStrings节点

    具体的可以参考petshop源码程序. 加密前: <connectionStrings> <add name="SQLProfileConnString" con ...

  10. AndroidStudio快捷键汇总

    最近开始全面转向Android Studio开发了,经常要去查快捷键,索性汇总下,自己方便查找 IDE 按键 说明 F1 帮助 Alt(Option)+F1 查找文件所在目录位置 Alt(Option ...