效果图（将就一下）

 <!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. JS在路径中传中文参数

    需要用 encodeURI('中文');处理一下.

  2. 瞎BB

    今天家里停电了,什么都没干,又开始胡思乱想了.或许有点时候真的应该沉迷一些东西. 小时候其实挺喜欢数学的,考试都是90分,100分,我喜欢思考钻研不懂的题目,花很多时间,所以有的时候会跳过课堂的东西, ...

  3. git初学习体会

    github:项目版本控制器 git和传统的版本控制器相比,最大的一点是,界面简单,给与非线性开发模式的强有力的支持,完全分布式等. 对于完全分布式的实现,我的理解是这个样子的.这多少要涉及到一点它的 ...

  4. iOS NSTimer使用详解 开启、关闭、移除

    定时器定时器详解ios定时器关闭定时器NSTimer 一,要使用一个定时器首先要定义一个定时器: @property (strong, nonatomic) NSTimer *myTimer;//定时 ...

  5. 基站查询接口，基站查询API

    查询接口为商用,用于软件开发,非开发用户用不上.(说明:接口不能进行手机定位) 如需申请key,请联系QQ 2258172309. 1.移动联通基站查询接口 请求示例:http://www.cellm ...

  6. Python range() xrange()

    range 前面小节已经说明了,range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列. xrange用法与 range 完全 ...

  7. 扩展JQuery和JS的方法

    //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            var aClass = function(){} //1 定义这个类的静态方法            aC ...

  8. [2016.08.09]文本替换专家 v5.2

    软件名称:文本替换专家最新版本:v5.2软件授权:共享软件发布日期:2016.01.18文件大小:650KB操作系统:XP/2003/Win7/Win2008开发人员:胡洪祥版权所有:胡洪祥

  9. ajax-向服务器发送请求

    ajax-向服务器发送请求 1.将请求发送到服务器,使用XMLHttpRequest对象的 open() 和 send() 方法.     xmlhttp. open(method,url,async ...

  10. correlation filters in object tracking2

    http://www.cnblogs.com/hanhuili/p/4281077.html Correlation Filter in Visual Tracking系列二:Fast Visual ...