效果图（将就一下）

 <!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. 将应用部署到Tomcat根目录的方法 去掉url里的项目名

    在"conf/Catalina/localhost"目录下增加新的文件"ROOT.xml"(注意大小写哦),文件内容如下: <?xml version=& ...

  2. Android学习八：获取网络图片

    看到QQ群里有个朋友说加载图片内存溢出的问题,所以就按照自己的想法试试的.但是按照他的方法,不知道为何没有发生内存溢出,不知道什么情况. 写这篇文章主要有三个目的: 1.多线程的学习 2.图片加载的学 ...

  3. 使用jQuery Autocomplete(自动完成)插件

    jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...

  4. 调试腾讯微博 win8 版 共享失败的问题

    我是社交控,喜欢分享内容.分享到 腾讯微博时总失败,心想不能就这么算了,要看看异常的细节. 在VS 2012里,我选择 Debug > Debug Installed App Package, ...

  5. mybatis实战教程(mybatis in action)之五：与spring3集成

    在这一系列文章中,前面讲到纯粹用mybatis 连接数据库,然后 进行增删改查,以及多表联合查询的的例子,但实际项目中,通常会用 spring 这个沾合剂来管理 datasource 等.充分利用sp ...

  6. Keepalive双主搭建配置

    Keepalive 双主搭建配置 keepalived保证双主数据库的可用性 环境说明 192.168.1.10  keepalive 主1 192.168.1.20  keepalive 主2 19 ...

  7. js预解析及特效

    预解析: // 作用域: // 域:空间.范围.区域…… // 作用:读.写 script 全局变量.全局函数 自上而下 函数 由里到外 {} 浏览器: “JS解析器” 1)“找一些东西” :var ...

  8. php入门part3

    php函数 php函数和JScript的函数大同小异,这里主要强调一下不同之处. 函数的定义:function函数名(形参类表){ 函数体 } 函数的调用:函数名(实参类表) 在php里函数可以先调用 ...

  9. http 301 和 302 的区别！

    1.什么是301转向?什么是301重定向? 301转向(或叫301重定向,301跳转)是当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header)中的状态码的一种, ...

  10. My Interface

    一.创建Myinterface接口 public interface Myinterface { static final String MyifName="我的接口"; stat ...