<!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. sql 身份证计算年龄和性别

    IdentityNumber 是身份证号 年龄: ,), GETDATE()) / 365.25) as '推荐人年龄', 15位的身份证计算年龄: case when b.IdentityNumbe ...

  2. Applet程序组件与AJAX技术

    Applet 定义 Applet是一种运行于Web客户端环境下的Java程序组件. 工作原理 Applet以代码的形式嵌入Web页面中,用标签<applet></applet> ...

  3. C++找不出来的bug

    1.在函数中给指针赋值时候要极其注意: 新生成的指针要么是new出来的,要么是全局的,要么是传参过来的... 就是要切记在函数局部生成一个新指针,这样的话,出了这个函数,局部的新指针所具体代表的值就被 ...

  4. C#中抽象类和接口的区别与使用

    一.抽象类: 抽象类是特殊的类,只是不能被实例化:除此以外,具有类的其他特性:重要的是抽象类可以包括抽象方法,这是普通类所不能的.抽象方法只能声明于抽象类中,且不包含任何实现,派生类必须覆盖它们.另外 ...

  5. openvpn 初步使用

    服务端:Centos 7.2 openvpn 2.4.3 客户端:Windows 10 安装包 openvpn的官网在国内访问不了,服务端通过yum安装,客户端在第三方网站下载的 一般的国内源应该都包 ...

  6. openwrt修改hosts

    不同于标准linux主机,openwrt使用dnsmasq来管理dns和dhcp. 修改dnsmasq的配置文件 vi /etc/config/dhcp 在config dnsmasq这组下面添加 l ...

  7. [LspTrace]ReadAccConfig returns false! QT

    当qt运行出现以下信息时 [LspTrace]ReadAccConfig returns false! [LspTrace]FindMatchingProvider: inInfo is one of ...

  8. JS(JavaScript）的初了解5（更新中···）

    1.函数 关键词function 首先,我们先复习一下前面的知识: var 是JS的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. var可以在内存模块提前(JS代码执行前)完 ...

  9. Flutter - BottomNavigationBar底部导航栏切换后，状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  10. RPM 包的构建 - SPEC 基础知识

    spec 文件 制作 rpm 软件包并不是一件复杂的工作,其中的关键在于编写软件包的 spec 描述文件. 要想制作一个 rpm 软件包就必须写一个软件包描述文件 spec.这个文件中包含了软件包的诸 ...