<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. servletsza

    servlet本身不能独立运行,需要在一个web应用中运行,而web应用是部署在tomcat上的 所以一个servlet开发需要以下几个步骤: ①创建web应用项目 ②编写servlet代码 ③部署到 ...

  2. 微信小程序-列表渲染多层嵌套循环

    微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...

  3. 接前一篇：new select option保存搜索条件

    WD_SELECT_OPTIONS_20新加了很多好玩的东西,尤其是里面的保存搜索条件和使用保存的搜索条件.因为这个比较想WEB UI,所以兴趣比较高一点,WEB UI里是把参数拼成XML存起来的,我 ...

  4. 合并两个 Lambda 表达式

    概述 在开发工作中,有些时候需要对一些增删改查进行封装(用 Lambda 表达式来筛选数据),但是又有一部分条件总是相同的,对于相同的部分可以直接写到方法里,而不同的部分作为参数传进去. 定义扩展方法 ...

  5. div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pac ...

  6. IO多路复用版FTP

    需求: 实现文件上传及下载功能 支持多连接并发传文件 使用select or selectors 流程图 import socket import pickle import sys import t ...

  7. 梳理：python—同一个类中的方法调用

    为什么突然在此提到这个梳理问题呢? 因为在自己实践综合练习学过的知识时,突然觉得有些知识点的运用总是不成功,于是翻过课本进行回顾,总是觉得是对的,可是当再进一步思考“既然是对的,为什么在程序中总是不成 ...

  8. spark优化整理

  9. [BZOJ1596]电话网络

    Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...

  10. UML之领域建模

    一 定义:领域建模是对领域内的概念类或现实世界中对象的可视化表示.又称概念模型.领域对象模型.分析对象模型.它专注于分析问题领域本身,发掘重要的业务领域概念,并建立业务领域概念之间的关系.业务对象模型 ...