<!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. git之摘抄

    vn中央集权, 统一服务器, 权限安全管理 git 分布式,代码仓库历史本地有,不受约束, 可以随意开分支.

  2. 千行代码入门Python

    这个是从网上找到的一份快速入门python的极简教程,大概一千行左右,个人觉得不错,特此收藏以备后用. # _*_ coding: utf-8 _*_ """类型和运算- ...

  3. IDEA循环依赖报错解决方案

    step1.查找循环依赖 step2.在IDEA菜单栏中打开Analyze->Analyze Module Dependencies...看到有的模块被红色的标出来了,此时右边显示了循环依赖,那 ...

  4. 1、Kafka介绍

    1.Kafka介绍 1)在流式计算中,Kafka一般用来缓存数据,Storm通过消费Kafka的数据进行计算. 2)Kafka是一个分布式消息队列. 3)Kafka对消息保存时根据Topic进行归类, ...

  5. Redis 分布式缓存 Java 框架

    为什么要在 Java 分布式应用程序中使用缓存? 在提高应用程序速度和性能上,每一毫秒都很重要.根据谷歌的一项研究,假如一个网站在3秒钟或更短时间内没有加载成功,会有 53% 的手机用户会离开. 缓存 ...

  6. Servlet运行原理以及生命周期

    一.Servlet生命周期: Servlet加载.实例化.初始化.服务.销毁. 1.初始化init(): 当服务启动时,Servlet被装入tomcat或者其他服务器容器时执行(服务器容器从启动到停止 ...

  7. Python3 tkinter基础 OptionMenu 将list导入下拉列表中

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. UVA11995 I Can Guess the Data Structure!

    思路 简单题,用栈,队列,优先队列直接模拟即可 代码 #include <cstdio> #include <algorithm> #include <cstring&g ...

  9. 线性回归（linear regression）

    基本形式 最小二乘法估计拟合参数 最小二乘法:基于均方误差最小化来进行模型求解的方法称为“最小二乘法”(least square method) 即(左边代表 $\mathbf{\omega }$ 和 ...

  10. HDU 2612 （2次BFS，有点小细节）

    Problem Description Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. L ...