1 <!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 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 $imgLi=$('#img_box ul li');

             if($imgLi.length>0){

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

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

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

                 }

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

             };

             timer = setInterval(toRun,2000);

             function toRun(){

                 if($imgLi.length>1){

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

                         iNow = 0;

                     }

                     else{

                         iNow++;

                     }

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

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

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

                 }

             }

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

                 clearInterval(timer);

             }).mouseout(function(){

                 timer=setInterval(toRun,2000);

             });

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

                 //console.log($(this).html());

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

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

                 iNow = $(this).html()-1;

                 $('ul').stop().animate({top : -150 * 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>

             <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 轮播图，图片可调用，向左，自动+鼠标点击切换

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

  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. ionic3 slides轮播图手动滑动后无法自动播放问题

    我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...

  9. jq交叉轮播图变种【闪一下黑】

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

随机推荐

  1. jQuery-form实现文件分步上传

    分步上传:当你需要提交两个及以上的文件,在一个文件成功后再提交另一个文件,并且最后需要提交所有文件的地址组成的数据 HTML: <form id="uploadVideoForm&qu ...

  2. angular和vue还有jquery的区别

    angularjs简单介绍和特点 首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每 ...

  3. 删除本地git的远程分支和远程删除git服务器的分支

    在项目中使用git管理代码后,有些时候会创建很多不同名称的分支,以此区分各个分支代码功能. 而随着代码的合并,以前的分支就可能不再需要保存了,所以就要对没有用的分支进行删除,包括紧急回滚时从中抽取某一 ...

  4. 对比PG数据库结构是否一致的方法

    如果版本升级涉及数据库更新,测试时要对比旧版数据库更新后是否和全新安装的是否一致,但是数据库结构很复杂的时候对比就很麻烦,postgre可以使用以下方法对比:pg_dump.exe –h 数据库IP ...

  5. ★Pandas 零碎知识

    1 修改属性 1.1 修改1列的类型属性: df['总金额'] = pd.to_numeric(df['总金额']) #转变dataframe的1列为数值型 1.2 多列设为数值型:(使用DataFr ...

  6. FSMC_LCD

    1. TFT-LCD(Thin Film Transistor Liquid Crystal Display)[薄膜晶体管液晶显示器] 2. 液晶 物质在熔融状态或在溶液状态下虽然获得了液体物质的流动 ...

  7. Perl调用外部命令（其他脚本、系统命令）的方法和区别

    1. `command`; 使用反引号调用外部命令能够捕获其标准输出,并按行返回且每行结束处附带一个回车.反引号中的变量在编译时会被内插为其值.   2. open LIST "ls -l| ...

  8. vue--vConsole

    平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的. 这种情况下,可以选择使用alert弹出一些信息,但 ...

  9. pagex/y offsetx/y screenx/y clientx/y 用法及区别

    1  pagex/pagey:鼠标相对于整个页面的x/y坐标 注:整个页面的意思就是你整个页面的全部 例如:宽200px 高400px 那么pagex/y他们最大值就是它 2,offsetX/y与pa ...

  10. 使用echarts时option可以复用的方法

    其实复用option很简单,在所要展示的图形在其他需求大致一致时,即可写一个option然后设置不同的地方就好了,坐标轴.series等都可以设置,具体代码如下: var barLeft = echa ...