Javascript 使用插件将所有背景图像的不透明度设置为0_Javascript_Jquery_Html_Css

Javascript 使用插件将所有背景图像的不透明度设置为0

javascript jquery html css

Javascript 使用插件将所有背景图像的不透明度设置为0,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在使用这个jQuery幻灯片插件时遇到了逻辑问题。我不想设置图像的高度，因为有些图像被拉伸得太长了。但如果图像高度未设置，且图像较短，则可以看到其后面的其他图像。下面是代码的样子： html js 我尝试在css中添加不透明度到最后一个活动项，但没有成功。是否可以切换背景图像和透明胶片，而不会使代码太混乱？试试这个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

我在使用这个jQuery幻灯片插件时遇到了逻辑问题。我不想设置图像的高度，因为有些图像被拉伸得太长了。但如果图像高度未设置，且图像较短，则可以看到其后面的其他图像。下面是代码的样子：

html

我尝试在css中添加不透明度到最后一个活动项，但没有成功。是否可以切换背景图像和透明胶片，而不会使代码太混乱？

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#slideshow1{
  position:relative;
  height:768px;
  width:1024px;
  float:left;
}
#slideshow1 img{
  position:absolute;
  top:0;
  left:0;
  width:300px;
  //height:450px;
  z-index:8;
  opacity: 0.0;
}
#slideshow1 img.active{
  z-index:10;
  opacity: 1.0;
}
#slideshow1 img.last-active{
  z-index:9;
  opacity: 0.0;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function slideSwitch() {

$('img').css('display','none');
var $active = $('#slideshow1 IMG.active');

if ( $active.length == 0 ){ 
    $active = $('#slideshow1 IMG:last');
}

var $next;
if ($active.next().length){
    $next = $active.next();
}else{
    $next = $('#slideshow1 IMG:first');
}

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .css('display','block')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
  setInterval( "slideSwitch()", 3000 );
});
</script>
</head>

<body>
<div id="slideshow1">
    <img src="img/gallery1.jpg" class="active"/>
    <img src="img/gallery2.jpg"/>
    <img src="img/gallery3.jpg"/>
    <img src="img/gallery4.jpg"/>
    <img src="img/gallery5.jpg"/>
</div>
</body>
</html>


无标题文件
#幻灯片1{
位置：相对位置；
高度：768px；
宽度：1024px；
浮动：左；
}
#幻灯片1 img{
位置：绝对位置；
排名：0；
左：0；
宽度：300px；
//高度：450px；
z指数：8；
不透明度：0.0；
}
#幻灯片显示1 img.active{
z指数：10；
不透明度：1.0；
}
#幻灯片显示1 img.last-active{
z指数：9；
不透明度：0.0；
}
函数滑动开关（）{
$（'img'）.css（'display'，'none'）；
var$active=$（“#slideshow1 IMG.active”）；
如果（$active.length==0）{
$active=$（“#幻灯片放映1 IMG:last”）；
}
var$next；
如果（$active.next（）.length）{
$next=$active.next（）；
}否则{
$next=$（“#幻灯片放映1 IMG:first”）；
}
$active.addClass（'last-active'）；
$next.css（{opacity:0.0}）
.addClass（“活动”）
.css（'显示'，'块'）
.animate（{opacity:1.0}，1000，function（））{
$active.removeClass（'active last active'）；
});
}
$（函数（）{
设置间隔（“滑动开关（）”，3000）；
});

即兴版本这将为您提供适当的过渡

function slideSwitch() {

$('img').css('opacity','0');
var $active = $('#slideshow1 IMG.active');
$active.css('opacity','1');

if ( $active.length == 0 ){ 
    $active = $('#slideshow1 IMG:last');
}

var $next;
if ($active.next().length){
    $next = $active.next();
}else{
    $next = $('#slideshow1 IMG:first');
}

$active.addClass('last-active');
$active.animate({opacity: 0.0}, 1000);
$next.css({opacity: 0.0})
    .addClass('active')
    .css('display','block')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });

}

$(function() {
  setInterval( "slideSwitch()", 3000 );
});

是否尝试将可见性设置为隐藏？显示：无？我应该把它放在哪里？不，是能见度。这不会显示元素，但该元素仍将占用空间，而将显示更改为“无”将使其表现为该元素不存在。是否希望-->YES@TusharGupta工作正常！谢谢如果你愿意的话，把它作为答案贴出来，这样我就可以接受了。

function slideSwitch() {
var $active = $('#slideshow1 IMG.active');

if ( $active.length == 0 ){ 
    $active = $('#slideshow1 IMG:last');
}

var $next;
if ($active.next().length){
    $next = $active.next();
}else{
    $next = $('#slideshow1 IMG:first');
}

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
  setInterval( "slideSwitch()", 3000 );
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#slideshow1{
  position:relative;
  height:768px;
  width:1024px;
  float:left;
}
#slideshow1 img{
  position:absolute;
  top:0;
  left:0;
  width:300px;
  //height:450px;
  z-index:8;
  opacity: 0.0;
}
#slideshow1 img.active{
  z-index:10;
  opacity: 1.0;
}
#slideshow1 img.last-active{
  z-index:9;
  opacity: 0.0;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function slideSwitch() {

$('img').css('display','none');
var $active = $('#slideshow1 IMG.active');

if ( $active.length == 0 ){ 
    $active = $('#slideshow1 IMG:last');
}

var $next;
if ($active.next().length){
    $next = $active.next();
}else{
    $next = $('#slideshow1 IMG:first');
}

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .css('display','block')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
  setInterval( "slideSwitch()", 3000 );
});
</script>
</head>

<body>
<div id="slideshow1">
    <img src="img/gallery1.jpg" class="active"/>
    <img src="img/gallery2.jpg"/>
    <img src="img/gallery3.jpg"/>
    <img src="img/gallery4.jpg"/>
    <img src="img/gallery5.jpg"/>
</div>
</body>
</html>

function slideSwitch() {
    var $active = $('#slideshow1 IMG.active');

    if ($active.length == 0) {
        $active = $('#slideshow1 IMG:last');
    }

    var $next;
    if ($active.next().length) {
        $next = $active.next();
    } else {
        $next = $('#slideshow1 IMG:first');
    }

    $active.addClass('last-active');
    $('#slideshow1 img').css('opacity','0.0'); //added this code

    $next.css({
        opacity: 0.0
    })
        .addClass('active')
        .animate({
        opacity: 1.0
    }, 1000, function () {
        $active.removeClass('active last-active');
    });
}

$(function () {
    setInterval(slideSwitch, 3000);
});

function slideSwitch() {

$('img').css('opacity','0');
var $active = $('#slideshow1 IMG.active');
$active.css('opacity','1');

if ( $active.length == 0 ){ 
    $active = $('#slideshow1 IMG:last');
}

var $next;
if ($active.next().length){
    $next = $active.next();
}else{
    $next = $('#slideshow1 IMG:first');
}

$active.addClass('last-active');
$active.animate({opacity: 0.0}, 1000);
$next.css({opacity: 0.0})
    .addClass('active')
    .css('display','block')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });

}

$(function() {
  setInterval( "slideSwitch()", 3000 );
});