<script>
var w = $(window).width();//获取窗口宽度
var h = $(window).height();//获取窗口高度
$(".box").width(w);//赋值给图片外包
$(".box").height(h);
function carousel(){
    var v1=$(".box .text");//消失的元素
    var v2;//要显示的元素
    if(v1.next().length==0){//如果循环到最后一张
        v2 = $(".box img").eq(0);//v2显示为第一张
    }else{
        v2 = v1.next();//否则显示下一张
    }
    v1.animate({opacity:"0"},2000,function(){
        v1.removeClass("text");//动画效果-消失
    });
    v2.animate({opacity:"1"},2000,function(){
        v2.addClass("text");//动画效果-显示
    });
}
</script>
<html>
　　<div class="box">
        <img src="img/amg_three.jpg" title="car" alt="图片未加载" class="text">
        <img src="img/carousel_two.jpg" title="car" alt="图片未加载">
        <img src="img/amg_four.jpg" title="car" alt="图片未加载">
        <img src="img/carousel_four.jpg" title="car" alt="图片未加载">
　　</div>
</html>

JQuery图片自适应窗口轮播图（淡入淡出效果）的更多相关文章

  1. 封装bt轮播图淡入淡出效果样式

    <!--BT轮播图-->    <div data-ride="carousel" class="carousel slide carousel_inn ...

  2. 首页大屏广告效果 jquery轮播图淡入淡出

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 原生js实现简单轮播的淡入淡出效果

    实现这种淡入淡出的轮播关键在于css的一种设置  首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起  达到这种效果  然后设置c3动画属性 transition:1s; ...

  4. 背景大图隔几秒切换（非轮播，淡入淡出）--变形金刚joy007 项目总结

    工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...

  5. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  7. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  8. 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）

    轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...

  9. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. yml配置文件读取出错 Exception in thread "main" while scanning for the next token found character '\t(TAB)'

    这几天在学习springboot的微服务项目,在配置文件方面也想尝试下新的yml配置,就想把原来项目properties写的文件转换成yml试一下(老项目是之前检出在了eclipse里面),结果写好了 ...

  2. mysql 压缩版配置

    1.解压之后可以将该文件夹改名,放到合适的位置,个人建议把文件夹改名为MySQL Server 5.6,放到C:\Program Files\MySQL路径中.当然你也可以放到自己想放的任意位置. 2 ...

  3. 模仿WC.exe的功能实现--node.js

    Github项目地址:https://github.com/102derLinmenmin/myWc WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要 ...

  4. 设置position（absolute,fixed）导致flex布局不生效

    个人解决办法:将要设置display:flex的dom外面在套一个div,并且设置宽度,就可以了.

  5. Druid（新版starter）在SpringBoot下的使用以及优点

    Druid是Java语言中最好的数据库连接池.Druid能够提供强大的监控和扩展功能.DruidDataSource支持的数据库:理论上说,支持所有有jdbc驱动的数据库.最近发现Druid在spri ...

  6. 【安全测试】如何利用短信验证码BUG浪费公司的钱

    一.背景 公司新产品体验,发现不少交互.UI.功能设计上的小问题.于是花了点时间随意挑了几个功能深入的玩了一下,顺手提了BUG.接口层,看了一下接口文档,简单测了一下接口,BUG其实还挺严重的,后面详 ...

  7. linux 查找指定进程并kill

    ps -ef | grep  php | grep -v 'grep' | awk '{print $2}'| xargs kill -9

  8. 1.2 JAVA多线程实现

    线程和进程 进程:是执行中一段程序, 进程是系统进行资源分配和调度的一个独立单位. 线程:比进程更小的能独立运行的基本单位,单个进程中执行中每个任务就是一个线程.线程是进程中执行运算的最小单位. Th ...

  9. OO第十二次作业

    规格设计的发展历史 随着计算机软硬件的发展,代码的复杂程度也在不短增加,随着计算机软件规模日渐庞大,结构化程序设计方法开始无法满足用户的需求,面向对象程序设计产生.面向对象程序设计是一场重大的革命,提 ...

  10. 实训任务01：安装Hadoop

    实训任务1:安装Hadoop 实训1 :为Hadoop集群增加一个节点 需示说明: 运行环境:操作系统:centos6.8 ,hadoop2.6.4 在实训指导中搭建了3个节点的hadoop集群,要求 ...