<!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. AngularJS的过滤器$filter

    过滤器(filter)主要用于数据的格式上,通过某个规则,把值处理后返回结果.例如获得数据集,可排序后再返回. ng内置的共有九种过滤器: currency 货币 使用currency可以将数字格式化 ...

  2. File Transfer

    本博客的代码的思想和图片参考:好大学慕课浙江大学陈越老师.何钦铭老师的<数据结构> 代码的测试工具PTA File Transfer 1 Question 2 Explain First, ...

  3. Lambda表达式效率问题

    原文 http://www.importnew.com/17262.html 有许许多多关于 Java 8 中流效率的讨论,但根据 Alex Zhitnitsky 的测试结果显示:坚持使用传统的 Ja ...

  4. Java中遍历Map的常用方法

    以下方法适用于任何map实现(HashMap, TreeMap, LinkedHashMap, Hashtable, 等等): 方式一(推荐): // 推荐 // 在for-each循环中使用entr ...

  5. 基于Struts2的SpringMVC入门

    1.SpringMVC概述 (1)SpringMVC为表现层提供基础的基于MVC设计理念的优秀Web框架, (2)SpringMVC通过一套mvc的注解,让POJO成为处理请求的控制器,而无需任何接口 ...

  6. RocketMQ与Kafka对比

    转自:https://github.com/alibaba/RocketMQ/wiki/rmq_vs_kafka 淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用MySQL作为消息存 ...

  7. oracle AWR性能监控报告生成方法

    目前相当一部分公司会用到oracle,在做性能测试的时候,对数据库的监控很重要,那么这里先介绍下如何生成oracle自带的awr监控报告,而具体报告的内容分析会放在后续的博客中 oracle性能分析入 ...

  8. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  9. Oracle的substr函数

    一.Substr函数 substr(目标字符串,开始位置,长度) 注意:这里第三个参数:长度,相当于物理中的标量,没有方向性,所以不能用负值.虽然不报错,但是选择不出任何值出来(欢迎指正) 开始位置可 ...

  10. three.js粒子效果（分别基于CPU&GPU实现）

    前段时间做了一个基于CPU和GPU对比的粒子效果丢在学习WebGL的群里,技术上没有多作讲解,有同学反馈看不太懂GPU版本,干脆开一篇文章,重点讲解基于GPU开发的版本. 一.概况 废话不多说,先丢上 ...