<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. OSPFv3与OSPF的配置

    IPv6 路由-OSPFv3 实验目的 1.   掌握 OSPFv3 的配置方法 2.   掌握在帧中继环境下 OSPFv3 的配置方法 3.   掌握 OSPFv3 NSSA 的配置方法 4.   ...

  2. JCache只缓存部分字段

    项目中使用的JCache缓存实体,发现每次缓存时存进去了实体,取出的时候字段有些是空的. 具体环境为 Springboot v2.01 JCache(ehcache 3.4.0) jdk 1.8.0_ ...

  3. Curl实现ElasticSearch的增删改查

    一.添加数据(laravel必须安装Curl扩展) $data = [ 'username'=>"张三", 'sex'=>"女", 'age'=&g ...

  4. 2n字符

    有2n字符挨个排成一排,前n个是'1',后n个是'0'.如 11110000(此时2n=8),现在交换字符的位置,使之按照 10101010 的模式排列.而且要使字符移动的次数最少,编程计算最少的移动 ...

  5. git之我常用的命令

    撤销修改: git checkout -- file 撤销暂存区: git reset HEAD git reset HEAD file 撤销版本库:git reset --hard HEAD^回到上 ...

  6. bash: ./xxx 权限不够

    Linux环境下要运行C编译的一个可执行文件play,终端cd到当前目录后输入./play,提示  bash: ./xxx 权限不够 用sudo, 提示 sudo:./play: command no ...

  7. Python3 Tcp未发送/接收完数据即被RST处理办法

    一.背景说明 昨天一个同事让帮忙写个服务,用于接收并返回他那边提交过来的数据,以便其查看提交的数据及格式是否正确. 开始想用django写个接口,但写接口接口名称就得是定死的,他那边只能向这接口提交数 ...

  8. idea springboot jrebel hotreloaded

    http://127.0.0.1:8888/88414687-3b91-4286-89ba-2dc813b107ce

  9. linux 7.2安装扩展redis

    unzip phpredis-php7.zip cd phpredis-php7 /usr/local/php7./bin/phpize ./configure --with-php-config=/ ...

  10. 高通sdm845_la2.0源码编译及使用QFIL刷机

    一.下载源码 高通芯片代码下载地址:https://chipcode.qti.qualcomm.com/ . *_amss_standard_oem : 高通私有源码(*为sdm845-la--. * ...