图片切换效果

时间 2019-12-08 标签图片切换效果
<!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={dede:global.cfg_soft_lang/}" />
<title>{dede:global.cfg_webname/}</title>
<meta name="description" content="{dede:global.cfg_description/}" />
<meta name="keywords" content="{dede:global.cfg_keywords/}" />
<link href="images/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="images/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="images/jquery.jslides.js"></script>
<style>
.ssdiv{
    height:200px;
    width:500px;  position:relative;

}
.ssdiv div{ transition:all 0.5s;
    position:absolute;
    width:131px;
    opacity:0.5;
    border:solid 1px #ccc;
}
.ssd1{    margin-left:0px;}
.ssd2{    margin-left:10px;}
.ssd3{    margin-left:20px;}
.ssd4{    margin-left:30px;}
.ssdiv div.ssd5{    margin-left:40px; z-index:5;opacity:1;}
.ssd6{    margin-left:50px; z-index:4}
.ssd7{    margin-left:60px; z-index:3}
.ssd8{    margin-left:70px; z-index:2}    
.ssd9{    margin-left:80px; z-index:1}    
    
</style>
</head>
<body>
<div class="ss">
<div class="ssdiv">
<div class="ssd1"><img src="images/z1.jpg" width="131" height="61" /></div>
<div class="ssd2"><img src="images/z2.jpg" width="131" height="61" /></div>
<div class="ssd3"><img src="images/z3.jpg" width="131" height="61" /></div>
<div class="ssd4"><img src="images/z4.jpg" width="131" height="61" /></div>
<div class="ssd5"><img src="images/z5.jpg" width="131" height="61" /></div>
<div class="ssd6"><img src="images/z6.jpg" width="131" height="61" /></div>
<div class="ssd7"><img src="images/z7.jpg" width="131" height="61" /></div>
</div>
</div>
<input type="button" id="btz" value="zzzzzzzzzzzz" /><input type="button" id="bty" value="yyyyyyyyyyyyyyyyyyyy" />
<script>

$(function() {
    var timer = '';
/*    $('.ssdiv').mouseover(function() {       
        clearInterval(timer);
    }).mouseleave(function() {
        timer = setInterval(btn_right, 1000);
    });*/
    
    var arr = ['ssd1', 'ssd2', 'ssd3', 'ssd4', 'ssd5', 'ssd6', 'ssd7'];
    var index = 0;

    //timer = setInterval(btn_right,1000);
    $("#btz").on("click",function(){
        btn_left();
        })
    $("#bty").on("click",function(){
        btn_right();
        })
        
        
    function btn_left(){if(index > 0){index--}else{index=6}
    console.log(index)

        gai();        
    }
    function btn_right(){    if(index < 6){index++}else{index=0}    console.log(index);
        gai();    console.log("y");    
    }
    function gai(){ var arr = ['ssd1', 'ssd2', 'ssd3', 'ssd4', 'ssd5', 'ssd6', 'ssd7'];
    
    var newarr=arr.splice(0,index);
    console.log( newarr);  
    arr = $.merge(arr, newarr);

    $('.ssdiv div').each(function(i, e) {
         $(e).removeClass().addClass(arr[i]);
    })     
    }

    
})

</script>
<!-- /footer -->

</body>
</html>