<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. yum安装的mysql5.7默认密码

    在linux下通过rpm包安装完成MySQL-community-server 5.7后, 需要以root权限的用户检查/var/log/mysqld.log文件查看自动生成的临时密码. 先查看: 1 ...

  2. MQ & RPC 消息队列与RPC的区别与使用场景

    MQ:  区别:面向数据.生产者与消费者.有缓冲节点.异步.系统级/模块级通信 选型:RabbitMQ.ActiveMQ/Apollo.ZeroMQ.memcacheQ.Redis.MSMQ.kafk ...

  3. 跟我一步一步写出MongoDB Web 可视化工具（二）

    前言 上篇讲了一些基础,主要注重的是查,包括建立数据库链接.获取数据库.获取表.列出数据库.列出表.列出索引.获取数据等. 本篇依然是基础,注重增改删,废话不多说,咱们开始. 进阶 创建一个数据库和一 ...

  4. 654. Maximum Binary Tree最大二叉树

    网址:https://leetcode.com/problems/maximum-binary-tree/ 参考: https://leetcode.com/problems/maximum-bina ...

  5. Asp.Net MVC+EF+三层架构

    架构图: 使用的数据库: 一张公司的员工信息表,测试数据 解决方案项目设计: 1.新建一个空白解决方案名称为Company 2.在该解决方案下,新建解决方案文件夹(UI,BLL,DAL,Model) ...

  6. OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用 问题处理

    OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用 问题处理如下: 解决方法一:更换连接方式 config 文件配置: <add name="MASTER_DB&q ...

  7. 转载（略有修改）：Windows 8的承载网络设置方法（w8 创建无线网络/ap）

    第一步.查看电脑是否支持网络共享 在命令提示符(打开方式看文章最后)中输入:netsh wlan show drivers,然后回车. 找到"支持的承载网络"一项,如果后面显示的是 ...

  8. java前的部分了解(计算机小白)

    一.加密 对称加密: des 3des AES rc4 (数据加密) 会话密钥 非对称加密(成对:公钥/私钥(一个加密一个解密)):RSA DSA 密钥交换 / 数字签名(用私钥加密摘要算法出的一串数 ...

  9. APP下载在微信无法打开 该如何处理

    大家是不是经常会遇到微信内点击链接或扫描二维码无法打开指定网页的问题?只要你使用微信转发分享,相信你就一定会遇到,那么打不开的原因很简单了,就是被微信拦截了.这个问题我们只需要实现从微信内直接跳出到外 ...

  10. VMProtect1.63分析

    教材上给出了一些说明,虽然是断断续续的.. ..之后通过单步,把断的地方都连起来了,也明白了VMP分析插件究竟做了些什么.. //表1,表2在最后. 加密之前的代码: INC ECX C3 RETN ...