<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>

//css样式
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
background: #222;
}

.flash {
width: 760px;
height: 300px;
background: #1f1f1f;
margin: 100px auto 0;
border-radius: 20px;
box-shadow: 0 0 6px 1px #fff;
padding: 20px;
}

.flash .content {
width: 760px;
height: 300px;
/* overflow:hidden;*/
position: relative;
}

.flash .content .con {
width: 760px;
height: 300px;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
display: none;
}

.flash .content .con:nth-child(1) {
background: url(img/bg1.jpg);
display: block;
}

.flash .content .con:nth-child(2) {
background: rgb(230, 108, 87);
}

.flash .content .con:nth-child(3) {
background: rgb(32, 47, 61);
}

.flash .content .con:nth-child(4) {
background: url(img/bg2.jpg);
}

.flash .content .con img {
position: absolute;
}

.flash .content .con img.f-1-1 {
left: -340px;
top: 80px;
opacity: 0;
}

.flash .content .con img.f-1-2 {
left: -340px;
top: 150px;
opacity: 0;
}

.flash .content .con img.f-1-3 {
left: 760px;
top: 0px;
opacity: 0;
}

.flash .content .con img.f-2-1 {
left: 20px;
top: 170px;
opacity: 0;
}

.flash .content .con img.f-2-2 {
left: 20px;
top: 300px;
opacity: 0;
}

.flash .content .con img.f-2-3 {
left: 420px;
top: 300px;
opacity: 0;
}

.flash .content .con img.f-3-1 {
left: 200px;
top: 120px;
opacity: 0;
}

.flash .content .con img.f-3-2 {
left: 320px;
top: 300px;
opacity: 0;
}

.flash .content .con img.f-3-3 {
left: -110px;
top: 0px;
opacity: 0;
}

.flash .content .con img.f-4-1 {
left: 80px;
top: 300px;
opacity: 0;
}

.flash .content .con img.f-4-2 {
left: 340px;
top: 80px;
opacity: 0;
}

.flash .content .con img.f-4-3 {
left: 340px;
top: 220px;
opacity: 0;
}

.flash .btn {
position: absolute;
top: 50%;
margin-top: -28px;
}

.flash .left {
left: 0;
}

.flash .right {
right: 0;
}
</style>
</head>

<body>

//html
<div class="flash">
 <div class="content">
 div class="con">
<img class="f-1-1" src="img/flash1.png" />
<img class="f-1-2" src="img/flash12.png" />
<img class="f-1-3" src="img/flash13.png" />
</div>
<div class="con">
<img class="f-2-1" src="img/flash2.png" />
<img class="f-2-2" src="img/flash22.png" />
<img class="f-2-3" src="img/flash23.png" />
</div>
<div class="con">
<img class="f-3-1" src="img/flash3.png" />
<img class="f-3-2" src="img/flash32.png" />
<img class="f-3-3" src="img/flash33.png" />
</div>
<div class="con">
<img class="f-4-1" src="img/flash4.png" />
<img class="f-4-2" src="img/flash42.png" />
<img class="f-4-3" src="img/flash43.png" />
</div>
<img class="btn left" src="img/left.png" />
<img class="btn right" src="img/right.png" />
</div>
</div>
</body>

//js
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

var _index = 0; //序列号
var arrCss = []; //存放样式
var Class=[]; //存放类名
var timer=null;
Css();
auto();
// move();
function auto() {
$('.flash .content .con').eq(_index).find('img').removeAttr('style');
$('.flash .content .con').eq(_index).find(Class[0]).animate(arrCss[0], 1000, function() {
$('.flash .content .con').eq(_index).find(Class[1]).animate(arrCss[1], 1000, function() {
$('.flash .content .con').eq(_index).find(Class[2]).animate(arrCss[2], 1000)
})
});
}

//判断对应样式 根据序列号
function Css() {
$('.flash .content .con').eq(_index).fadeIn().siblings('.con').fadeOut();
if(_index == 0) {
Class=['.f-1-1','.f-1-2','.f-1-3'];
arrCss = [{'left': '20px','opacity':1},{'left': '20px','opacity':1},{'left': '315px','opacity':1}]
}else if(_index==1){
Class=['.f-2-1','.f-2-2','.f-2-3'];
arrCss = [{'top': '50px','opacity':1},{'top': '160px','opacity':1},{'top': '0px','opacity':1}]
}else if(_index==2){
Class=['.f-3-1','.f-3-2','.f-3-3'];
arrCss = [{'left': '320px','opacity':1},{'top': '200px','opacity':1},{'opacity':1}]
}else if(_index==3){
Class=['.f-4-1','.f-4-2','.f-4-3'];
arrCss = [{'top': '0px','opacity':1},{'opacity':1},{'top': '220px','opacity':1}]
}
}

function move(){
_index++;
if(_index>3){_index=0};
Css()
auto();
}
$('.left').click(function() {
_index++;
if(_index>3){_index=0};
Css()
auto();
});
$('.right').click(function() {
_index--;
if(_index<0){_index=3};
Css()
auto();
});
timer=setInterval(move,8000)
</script>

</html>

仿flash轮播的更多相关文章

  1. FLASH轮播广告 在谷歌浏览器中不显示的解决办法（FLash轮播放广告在谷歌浏览器中无法显示处理方法）

    在用PHPWEB模板的时候,碰到首页有一个FLASH轮播广告,在IE浏览器下可以正常显示播放,在谷歌浏览器中却显示不了,解决办法如下: 欢迎转载:http://blog.csdn.net/aminfo ...

  2. （转）如何将ecshop首页主广告位的flash轮播替换为js轮播

    转之--http://www.ecshoptemplate.com/article-1710.html 这个ecshop很常见,因为现在比起flash难以修改,js更加符合人们的使用习惯,而默认ecs ...

  3. 原生JS实现轮播+学前端的感受（防止走火入魔）

    插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以 ...

  4. 常见的仿Flash图片轮播效果

    现在基本在很多网站上都能看到轮播效果,虽然有点烂大街的赶脚,但是这个效果确实很好看,很时尚,今天分享下代码相对较少的轮播框架,望采纳 . ①向左滑动: 思路: 将几个图片用分别用几个 li 包住,并且 ...

  5. 仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...

  6. 仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图

    仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...

  7. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  8. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  9. 仿主题广告轮播js

    function SlideShow(c) { var a = document.getElementById("slide"); var f = document.getElem ...

随机推荐

  1. Hadoop - 操作练习之单机配置 - Hadoop2.8.0/Ubuntu16.04

    系统版本 anliven@Ubuntu1604:~$ uname -a Linux Ubuntu1604 4.8.0-36-generic #36~16.04.1-Ubuntu SMP Sun Feb ...

  2. 初学Log4Net

    1.Log4Net是什么?       Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等)   2.Appender      Appende ...

  3. Windows7下安装IIS

    1.点击开始→控制面板,然后再点击程序,勿点击卸载程序,否则到不了目标系统界面. 2.然后在程序和功能下面,点击打开和关闭windows功能. 3.进入Windows功能窗口,然后看到internet ...

  4. C#基础知识-函数的定义和调用（五）

    函数也可以称为方法,可以很方便的把一些行为封装到函数里面,当调用这一函数时会把函数块里面的代码按照顺序执行,方法可以有多种形式,有无参数,有无返回值等. 1. 函数的定义   函数定义的基本格式: s ...

  5. Spring Boot Dubbo applications.properties 配置清单

    摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 与其纠结,不如行动学习.Innovate ,And out execute ! 』 本文 ...

  6. NUMBER_GET_NEXT 获取编号 遇到关于按年度编号的问题

    最近给财务做了一个平台,在系统创建一些特殊类型的合同,需要生成合同编号:财务要求 合同类型+公司代码 +年+三位流水号, eg:CP6008-2017001 SNRO 子对象数据元素就是 公司代码 不 ...

  7. git学习笔记之一

    Git是比较优秀的分布式版本管理工具,这次学习了git的基本命令,现在作一些归纳总结,已备复习之用. Git 认识 Git 直接用hash值记录提交的修改文件的快照,本地操作无需联网 Git 有三种状 ...

  8. Mybatis的mapper文件引起模块划分的思考

    起因:项目中将公用的代码抽离到单独一个项目 cms-common.jar (注:公用的代码不只是工具类代码,包含service和dao等) 构建:每次构建项目 cms.war 的时候,需要引入cms- ...

  9. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  10. 单元测试（Spring）

    单元测试是指对软件中的最小可测试单元进行的检查和验证,是软件开发过程中要进行的最低级别的测试活动,软件的独立单元将在与程序的其他部分相隔离的情况下进行测试. 单元测试好处:提高代码质量(实现功能.逻辑 ...