<!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. POJ 3087 模拟

    给定两个长度为len的字符串s1和s2, 接着给出一个长度为len*2的字符串s12. 将字符串s1和s2通过一定的变换变成s12,找到变换次数 变换规则如下: 假设s1=12345,s2=67890 ...

  2. react和vue，angular的比较

    就这几天我所了解到react情况和大家探讨一下子react的知识: react由facebook团队维护的一套框架,已经应用在instagram网站上了,react以其独特的性能优化方案,正在被越来越 ...

  3. 给学习立个flag

    今天是2018年7月7号,此时的砖相比昨天格外烫手,望着手套因被磨破而露出来的半截手指头,一股股热浪溜溜的从指间划过,背后还有小山一样高的砖头,感觉对面today店里的冰镇西瓜又成了不可奢望的梦... ...

  4. c# System.Object类和数据的安全转型

    .NET Fraework 最重要的引用类型之一是System命名空间中Object类.所有的类都是System.Object的派生类.System.Object类型的变量System.Object的 ...

  5. DB2 错误代码

    sqlcode sqlstate 说明 000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 +098 0 ...

  6. PriorityQueue 源码分析

    public boolean hasNext() { return cursor < size || (forgetMeNot != null && !forgetMeNot.i ...

  7. 记账本微信小程序开发五

    准备做首页和分页 准备一些图标的图,用ps或者用创客贴都欧克 建图片的文件夹和首页的编辑

  8. GoldenGate 12.3 MA架构介绍系列(5) - 静默安装

    软件下载地址 http://www.oracle.com/technetwork/middleware/goldengate/downloads/index.html 下载基于MicroService ...

  9. 输出UTF-8-BOM格式的文件

    File localDir = new File(localPath); if(!localDir.exists()){ localDir.mkdirs(); } File file = new Fi ...

  10. php 排列组合函数(无重复组合，可重复组合【全排列组合】)

    <?php /** * 无重复排列組合 * @Author MAX * @DateTime 2018-09-07T16:28:40+0800 * @param Array $arr 需要排列組合 ...