<!doctype html>

<html>

<head>

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

    <title>JQ轮播图，图片可调用，自动向左切换+鼠标点击切换</title>

    <script src="jquery-1.11.1.js"></script>

    <style>

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

        ul,ol,li{list-style:none;}

        img{vertical-align:top;}

        #img_box{width:470px;height:150px;margin:30px auto;position:relative;overflow:hidden;}

        #img_box ul{position:absolute;top:0;left:0;z-index:1;}

        #img_box ul li{width:470px; position:absolute; top:0;}

        #img_box ol{position:absolute;bottom:15px;right:15px;z-index:2;}

        #img_box ol li{display:inline-block;cursor:pointer;width:20px;height:20px;margin-right:5px;line-height:20px;text-align:center;background:#fff; color:#f60;}

        #img_box ol .active{background:#f60; color:#fff;padding:2px;bottom:2px;}

    </style>

    <script>

        $(function(){

            var iNow = 0;

	        var timer = null;

            var $uLi=$('#img_box ul li');

            var oneWidth=$uLi.width();

            if($uLi.length>0){

                for(var i = 1; i <= $uLi.length; i++){

                    var $olLi=$('<li>'+ i +'</li>');

                    $('#img_box ol').append($olLi);

                }

                $('#img_box ol li').eq(0).attr('class','active');

            };

            $uLi.each(function(i,elem){

                $(this).css('left',i*oneWidth);

            });

            timer=setInterval(toRun,2000);

            function toRun(){

                if($uLi.length>1){

                    if (iNow==$uLi.length-1){

                        iNow=0;

                    }else{

                        iNow++;

                    };

                    $('#img_box ol li').attr('class','');

                    $('#img_box ol li').eq(iNow).attr('class','active');

                    $('ul').stop().animate({left : -470 * iNow},1000);

                }

            };

            $('#img_box').mouseover(function(){

                clearInterval(timer);

            }).mouseout(function(){

                timer=setInterval(toRun,2000);

            })

            $('#img_box ol li').click(function(e){

                $('#img_box ol li').attr('class','');

                $(this).attr('class','active');

                iNow=$(this).index();

                $('ul').stop().animate({left : -470 * iNow},1000);

            });

        });

    </script>

</head>

<body>

    <div id="img_box">

        <ul>

            <li><img src="img/1.jpg" alt="" /></li>

            <li><img src="img/2.jpg" alt="" /></li>

            <li><img src="img/3.jpg" alt="" /></li>

            <li><img src="img/4.jpg" alt="" /></li>

            <li><img src="img/5.jpg" alt="" /></li>

        </ul>

        <ol>

            <!--<li class="active">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>-->

        </ol>

    </div>

</body>

</html>

　　

jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换的更多相关文章

  1. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  2. iview Carousel 轮播图自适应宽高；iview 轮播图 图片重叠问题；iview tabs 高度互相影响问题；vue this问题；

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  3. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  4. JQ万能轮播图

    lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  ...

  5. 5 项目---自定义用户模型以及轮播图图片url返回格式

    创建自定义的用户模型类  1. 用命令创建users 应用 2. 将users 注册到settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'd ...

  6. jq龙禧轮播图

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

  7. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  8. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  9. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

随机推荐

  1. Linux LVS_NAT DR

    一.lvs-nat LVS是Linux Virtual Server的简写,意即Linux虚拟服务器.是由章文嵩博士开发的一个在内核层面的负载均衡调度器.    lvs是在netfilter的INPU ...

  2. html5 javascript 表单练习案例

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

  3. 使用fastdfs搭建文件服务器

    一:安装tracker 1. 拷贝安装目录下各个.gz文件到/usr/local/src下,解压各个install lib,例如tar zxvf xxx.tar.gz 2. 先安装libfastcom ...

  4. Kubernetes-Host网络模式应用

    目录贴:Kubernetes学习系列 在实际生产环境中,有些容器内应用(比如编码器)需要用到物理层面的网络资源(比如组播流).这就要求Kubernetes中的该Pod以HOST模式来启动.以下实验了K ...

  5. GoldenGate for Java adapter介绍二（代码篇）

    本示例主要介绍通过实现OGG的接口函数,实现自定义处理增量数据,将数据实时写入到mariadb (OGG官方不支持此数据库,所以只能采用自定义方式实现).以下是本次示例的4个类: Connection ...

  6. oracle flashback data archive闪回数据归档天坑之XID重用导致闪回查询数据重复

    我们有个系统使用了Oracle flashback data archive闪回数据归档特性来作为基于时间点的恢复机制,在频繁插入.更新期间发现SYS_FBA_HIST_NNNN表中的XID被两个事务 ...

  7. webpack搭建项目时出现的报错“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”

    控制台出现的错误如下: webpack.config.js中的配置如下: module.exports={ entry:'./src/main.js', output:{ path:__dirname ...

  8. 在VS2013 使用C语言库函数，出现出现错误，提示使用不安全函数use _CRT_SECURE_NO_WARNINGS

    在VS 2013 中编译 C 语言项目,如果使用了 scanf 函数,编译时便会提示如下错误: error C4996: 'scanf': This function or variable may ...

  9. 清除wnTKYg 这个挖矿工木马的过程讲述

    由于工作需要,我由一个专业java开发工程师,渐渐的也成为了不专业的资深的运维工程师了.感慨一番,书归正传,下面就讲解wnTKYg如何清除.最近项目在做性能测试,发现CPU使用率异常,无人访问时CPU ...

  10. git的一些补充点

    git rm和 rm的区别 git rm是删除文件, 同时加入到git的跟踪管理中,做一个登记,那么在git commit的时候, 会把这次删除作为一次修改提交上去, 否则, 在 git log中你就 ...