效果图（将就一下）

 <!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. CocoaPods 抛出[!] Unable to satisfy the following requirements: 错误

    今天使用CocoaPods管理ReactiveCocoa,抛出以下错误 [!] Unable to satisfy the following requirements: - `ReactiveCoc ...

  2. Serializable unordered set

    Serializable unordered set 可序列化哈希set #include <boost/algorithm/string/predicate.hpp> #include ...

  3. mac电脑的使用

    1. control + command + a 截图 2. shift + command + g 前往 3.在 Mac OS X 中怎样获取当前文件夹的路径 原文网址:https://www.zh ...

  4. 怎样让SoapHttpClientProtocol不使用系统默认代理

    方法很简单,但找起来很难. 使用SoapHttpClientProtocol类的Proxy属性. 不能设空值,必须设一个新值. 赶脚底层在链接的时候会判断这个属性是不是null,如果null就会用默认 ...

  5. Linux GCC常用命令

    1简介 2简单编译 2.1预处理 2.2编译为汇编代码(Compilation) 2.3汇编(Assembly) 2.4连接(Linking) 3多个程序文件的编译 4检错 5库文件连接 5.1编译成 ...

  6. UICollectionView的使用

    感谢下面文章作者的无私奉献 基础用法: http://www.cnblogs.com/ios8/p/iOS-UICollectionView.html http://my.oschina.net/jo ...

  7. Laravel项目目录结构说明

    Laravel项目目录结构说明: |- vendor 目录包含你的 Composer 依赖模块及laravel框架. |- bootstrap 目录包含几个框架启动跟自动加载配置的文件. |- app ...

  8. <<redis设计和实现>>读书笔记

    redis如何实现主从同步的高效率?? 主从复制的同步有一个命令数据的同步文本,然后利用两个不同服务器的偏移量来进行进行同步,避免每次都是全部同步(并非会保存所有的命令数据,而是会有一个缓冲区(比如1 ...

  9. jsLoader、cssLoader、imageLoader

    //js文件加载 function jsLoader(url,callback){ var script = document.createElement("script"); s ...

  10. Linux下lampp详解 (转)

    重要文件解释: ProFTPD:一个Unix平台上或是类Unix平台上(如Linux, FreeBSD等)的FTP服务器程序,它是在自由软件基金会的版权声明(GPL)下开发.发布的免费软件,可以随意修 ...