效果图（将就一下）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>木马轮播图</title>

     <link rel="stylesheet" type="text/css" href="css/css.css">

     <script src="node_modules/jquery/dist/jquery.js"></script>

     <script src="js/js.js" type="text/javascript"></script>

 </head>

 <body>

     <div class="box">

         <ul>

             <li><img src="data:images/iceberg_1x.jpg" alt=""></li>

             <li><img src="data:images/igloo-800_1x.jpg" alt=""></li>

             <li><img src="data:images/landscape-test-1_1x.jpg" alt=""></li>

             <li><img src="data:images/space_1x.jpg" alt=""></li>

             <li><img src="data:images/trees_1x.jpg" alt=""></li>

         </ul>

         <div class="control">

             <a href="javascript:;" class="prev"><</a>

             <a href="javascript:;" class="next">></a>

         </div>

     </div>

 </body>

 </html>

html代码

 *{

     margin:;

     padding:;

 }

 img{

     border:;

     vertical-align: top;

 }

 ol, ul ,li{list-style: none;}

 a{

     text-decoration:none;

 }

 .box{

     width:800px;

     height:400px;

     margin:50px auto;

     position: relative;

 }

 .control{

     position: relative;

     z-index:;

     display: none;

 }

 .prev{

     position:absolute;

     top: 165px;

     left:;

     font-size: 50px;

     line-height: 70px;

     opacity: 0.3px;

     color:#333;

     width:70px;

     height:70px;

     text-align: center;

 }

 .next{

     position:absolute;

     top: 165px;

     width:70px;

     left:730px;

     height:70px;

     line-height: 70px;

     color:#333;

     font-size:50px;

     text-align: center;

 }

 .box li{

     position:absolute;

 }

 .box li img{

     width:100%

 }

css代码

 /*

 * @Author: Marte

 * @Date:   2016-09-13 23:45:53

 * @Last Modified by:   Marte

 * @Last Modified time: 2016-09-14 00:37:15

 */

 'use strict';

 jQuery(document).ready(function($) {

     //控制左右按钮的出现

     $('.box').hover(function() {

         $('.control').show();

         clearInterval(timer)

     }, function() {

         clearInterval(timer);

         timer =setInterval(function(){

             move(true);

         },1000);

         $('.control').hide();

     });

     //定时器

     var timer =setInterval(function(){

         move(true);

     },1000)

     //左右按钮的点击事件

     var flag =true;  //节流事件

     $('.prev').on('click', function(event) {

         if (flag==true) {

             move(false);

             flag = false;

         };

     });

     $('.next').on('click', function(event) {

         if (flag==true) {

              move(true);

              flag = false;

         };

     });

     //数组内容

     var arr= [

         {

             width:'300px',

             opacity:0.3,

             top:0,

             left:'100px',

             zIndex:2

         },

         {

             width:'300px',

             opacity:0.6,

             top:'70px',

             left:0,

             zIndex:3

         },

         {

             width:'400px',

             opacity:1,

             top:'100px',

             left:'200px',

             zIndex:4

         },

         {

             width:'300px',

             opacity:0.6,

             top:'70px',

             left:'500px',

             zIndex:3

         },

         {

             width:'300px',

             opacity:0.3,

             top:0,

             left:'400px',

             zIndex:2

         }

     ];

     //运动的函数

     function move(obj){

         if (obj) {

             //删除数组最后一个添加到数组最前面

             arr.unshift(arr.pop());

         }else{

             //删除数组第一个加到数组最后面

             arr.push(arr.shift());

         }

         $.each(arr, function(index, val) {

             $('.box li').eq(index).css('zIndex',arr[index].zIndex).stop().animate({

                 top: val.top,

                 left: val.left,

                 opacity:val.opacity,

                 width:val.width

             },300,function(){

                 flag= true;

             });

         });

     }

     // 一开始执行

     move(true)

 });

js代码

效果图

木马轮播图代码Jq的更多相关文章

  1. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  2. [Web] 通用轮播图代码示例

    首先是准备好的几张图片, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/ ...

  3. JD轮播图代码

    <!DOCTYPE html>   <html>   <head>   <title>jd网站的轮播图效果</title>   <me ...

  4. 原生Js写轮播图代码

    html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...

  5. js 轮播图代码

    js代码 (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index //从第几 ...

  6. 轮播图适应代码jQ

    (function(){ var i = 0; var time ; $('.page-size').html('1'); var obj = $('.xst-scroll>li'); var ...

  7. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  8. ⒃bootstrap组件 轮播图 基础案例

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

  9. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

随机推荐

  1. kali linux 安装nvidia

    开始安装之前需要说明一下几点: 1.安装闭源显卡驱动有一定风险,比如黑屏或者无法进入图形界面什么的.如果您很害怕折腾,而且不在Linux系统中玩开源游戏(比如Nexuiz)或看高清电影,默认的nouv ...

  2. CocoaPods创建私有pods

    由于项目需求,需要把项目的不同模块拆分出来即 组件化 ,一开始想做成多target模式,后来换成私有pods CocoaPods的安装和使用,网上很多,自行搜索即可. 听说可以基于svn创建pod私有 ...

  3. (转) Awesome Deep Learning

    Awesome Deep Learning  Table of Contents Free Online Books Courses Videos and Lectures Papers Tutori ...

  4. floyd算法

    求两个顶点间的最短距离,直觉是这样的问题可以用尝试和枚举的办法来求解,这显然可行,但是我们可以换个方式来看待这个问题,比如, 可以这样描述,“在给定的点集(编号为1~k,k=图中所有的顶点数量)中,i ...

  5. 【转】深入 Docker：容器和镜像

    在本专栏往期的 Flux7 系列教程 里,我们已经简单地探讨了 Docker 的基本操作.而在那篇教程中,我们一直是简单地将容器当成是"正在运行的镜像",并没有深入地区分镜像和容器 ...

  6. SQLAlchemy 几种查询方式总结

    转自:http://blog.csdn.net/shudaqi2010/article/details/51568219 几种常见sqlalchemy查询:#简单查询    print(session ...

  7. DSP中.gel文件的作用

    GEL是CCS提供的一种解释语言,使用该语言写出的GEL,函数具有两在功能,一是配置CCS工作环境,二是直接访问目标处理器DSP(包括DSP软/硬仿真器).用户可以使用GEL函数完成类似于宏操作的自动 ...

  8. [2014.01.27]WFsoft.wfLibrary.wfVerifyImage 1.8

    全新开发的验证码图片控件--WFsoft.wfLibrary.wfVerifyImage,使用简单,功能强大.     完全支持.net 2.0编写,对下一代操作系统平稳过渡.     同时支持.ne ...

  9. jersy服务，将图片发送另个服务器，再将异步返回

    今天在学习新项目时,遇到了jersy服务,完成,将图片发送到另一台服务器.下面介绍一下jersy服务的一个简单例子. 1.建立一个jersy一个java项目,先导入jersy服务相应的jar包 com ...

  10. C# WebBrowser HttpWebRequest Cookie 的结合运用。

    在WebBrowser下对网页进行操作其实是一件挺轻松的事情,他可以很方便实现自定义的网站访问习惯.而WebBrowser毕竟是对MS原生 控件的封装,当我们使用C#下的WebBrowser尤其是这样 ...