木马轮播图代码Jq
效果图（将就一下）
<!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的更多相关文章
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- [Web] 通用轮播图代码示例
首先是准备好的几张图片, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/ ...
- JD轮播图代码
<!DOCTYPE html> <html> <head> <title>jd网站的轮播图效果</title> <me ...
- 原生Js写轮播图代码
html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...
- js 轮播图代码
js代码 (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index //从第几 ...
- 轮播图适应代码jQ
(function(){ var i = 0; var time ; $('.page-size').html('1'); var obj = $('.xst-scroll>li'); var ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- ⒃bootstrap组件 轮播图 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画 function ...
随机推荐
- 在apache中设置访问目录后进入的默认页面为index.php
找到apache的配置文件httpd.conf后找到 DirectoryIndex index.html index.php 在其中添加index.php,
- 神一样的CSDN博客排名规则
本文转载于:http://blog.csdn.net/littletigerat/article/details/17448521 神一样的CSDN博客排名规则 一.引言 年. 马年CSDN博客,毫无 ...
- Javascript模式（第四章函数）------读书笔记
一 背景 js函数的两个特点:1 函数是第一类对象(first-class object):2 函数可以提供作用域 1 函数是对象: 1 函数可以在运行时动态创建,还可以在程序执行过程中创建 2 可以 ...
- Squid代理服务器
缓存代理概述:做为应用层的代理服务软件,squid主要提供缓存加速,应用层过滤控制的功能. 1.代理的工作机制 当客户机通过代理来请求web页面时,指定的代理服务器会先检查自己的缓存,如果缓存中已经有 ...
- 为模版设计师而生的Twig（下）-Twig使用指南
原文地址:http://my.oschina.net/veekit/blog/276800 12. 模板继承 Twig最强大的部分是模板继承.模板继承允许你建立一个基本的"骨架"模 ...
- 使用curl命令获取文件下载速度
使用curl可以下载网络内容,那如何获取curl下载时的下载速度呢,使用下面的命令即可: # curl -Lo /dev/null -skw "%{speed_download}\n&quo ...
- Netty系列之Netty百万级推送服务设计要点
1. 背景 1.1. 话题来源 最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...
- 关于SAP日期操作的几个函数
1.拆分年月---其实可以直接通过截取字符串的方法得到 CALL FUNCTION 'CACS_DATE_GET_YEAR_MONTH' EXPORTING I_DATE = SY-DATUM IMP ...
- PHPWord
PHPWord中文乱码 我在 使用PHPWord$section->addText(),输出中文是遇到乱码,PHPWord 中文乱码解决如下: 第一步:打开phpword/Section.php ...
- sql查询单个银行账号重复
非一单位多银行账号. 今天成都公司熊娇付款时候单位名称在弹出的网银补录变成1,从开户银行看都是正常的,只是在分子公司集团这边点击修改开户银行保存就提示错误“银行账号不能重复” select * fro ...