<!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. python 全局变量的import机制

    在之前学习python设计模式(工厂模式实践篇),希望使用全局变量代替c++的宏完成服务自动注册功能时,遇到过一个问题,全局变量的定义和使用放在同一个可执行脚本中的问题.先把有问题的代码晒一下: IS ...

  2. 学习使用scrapy itemspipeline过程

    开始非常不理解from https://www.jianshu.com/p/18ec820fe706 找到了一个比较完整的借鉴,然后编写自己的煎蛋pipeline 首先在items里创建 image_ ...

  3. Solr复杂条件查询

    solr复杂查询条件查询(排序.过滤.高亮) 简单案例: package cn.kingdee; import java.util.List; import java.util.Map; import ...

  4. /* * 有五个学生，每个学生有3门课的成绩，从键盘输入以上数据 *（包括学生号，姓名，三门课成绩），计算出平均成绩， *将原有的数据和计算出的平均分数存放在磁盘文件"stud"中。 */

    1.Student类:类中有五个变量,分别是学号,姓名,三门成绩 package test3; public class Student { private int num; private Stri ...

  5. hiho一下 第168周

    题目1 : 扩展二进制数 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 我们都知道二进制数的每一位可以是0或1.有一天小Hi突发奇想:如果允许使用数字2会发生什么事情? ...

  6. 【题解】Luogu P5071 [Ynoi2015]此时此刻的光辉

    众所周知lxl是个毒瘤,Ynoi道道都是神仙题,题面好评 原题传送门 一看这题没有修改操作就知道这是莫队题(我也只会莫队) 我博客里对莫队的简单介绍 一个数N可以分解成\(p_1^{c_1}p_2^{ ...

  7. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  8. Python3 tkinter基础 Menu Frame 创建右键菜单

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

  9. Java的程序执行过程与编译原理

    百度云:https://pan.baidu.com/s/16FVPI8PSqk5O8qufljCNHg 提取码:a2vr 一,文字步骤 1.编写源代码 2.进入cmd 3.输入javac将文件编译转换 ...

  10. oracle常用的数据字典查询语句

    select * from all_source where owner='user_name' and type = 'PROCEDURE' and upper(text) like upper(' ...