本文实例介绍了javascript实现图片左右切换效果的详细代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

JS图片左右切换效果

*{

margin:0;

padding:0;

}

.images-scroll{

border:1px solid #CCC;

margin:100px auto;

width:300px;

height:200px;

position:relative;

}

.images-scroll ul{

list-style:none;

}

.images-scroll li{

float:left;

display:none;

}

.images-scroll .active{

display:block;

}

.images-scroll a{

}

.images-scroll img{

width:300px;

height:200px;

border:none;

}

.images-scroll .left-scroll{

position:absolute;

top:40%;

left:-40px;

opacity:0;

background:url("images/bg_direction_nav.png");

background-repeat:no-repeat;

background-position:0px 0px;

height:27px;

width:27px;

cursor:pointer;

}

.images-scroll .right-scroll{

position:absolute;

top:40%;

opacity:0;

right:-40px;

background:url("images/bg_direction_nav.png");

background-repeat:no-repeat;

background-position:-30px 0px;

height:27px;

cursor:pointer;

width:27px;

}

.images-scroll .right-scroll:hover{

background-color:transparent;

}

$("#images-scroll").mouseover(function(){

$("#left-scroll").animate({left: '10px',opacity:'1',},400);

$("#right-scroll").animate({right: '10px',opacity:'1',},400);

})

$("#images-scroll").mouseleave(function(){

$("#left-scroll").animate({left: '-40px',opacity:'0',},400);

$("#right-scroll").animate({right: '-40px',opacity:'0',},400);

})

imgScroll=setInterval("runScroll()",3000);

var last_idx=$("#images-scroll ul li").index($("#images-scroll ul li:last"));

function runScroll(){

var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]);

$("#images-scroll li").eq(idx).removeClass("active").hide();

idx+=1;

if(idx%(last_idx+1)==0){

idx=0;

}

$("#images-scroll li").eq(idx).addClass("active").show();

}

$("#left-scroll").click(function(){

var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]);

$("#images-scroll li").eq(idx).removeClass("active").hide();

idx-=1;

if(idx==-1){

idx=last_idx;

}

$("#images-scroll li").eq(idx).addClass("active").show();

})

$("#right-scroll").click(function(){

runScroll();

})

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。