综合图片展示效果

来源：互联网发布：软件专业就业形势编辑：程序博客网时间：2024/04/28 02:57

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
body{
text-align:center;
}
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
#content{
margin:10px auto;
border:1px solid #999;
width:900px;
padding:15px;
}
#bigImg{
text-align:center;
}
#bImg{
width:500px;
height:350px;
}
#bigImg .btnContent{
padding:10px 0;
}
#btn2{
height:30px;
width:80px;
}
#smallImgs{
height:120px;
width:900px;
background-color:#CCC;
text-align:center;
position:relative;
}
.lBtn, .rBtn{
position:absolute;
font-size:24px;
font-weight:bold;
top:50px;
}
.lBtn{
left:10px;
}
.rBtn{
right:10px;
}
#smallContent{
width:840px;
height:90px;
margin-left:30px;
position:absolute;
top:20px;
overflow:hidden;
left:0;
}
#smallContent img{
border:3px solid #fff;
}
.smallUl{
position:absolute;
width:9999px;
left:0;
}
.smallUl li{
float:left;
margin-left:7px;
margin-right:7px;
}
#smallImgs .active{
border-color:#999;
}
</style>
</head>

//点击自动播放图片按钮；
$('#btn2').click(function(){
if($(this).val().indexOf('自动播放')!=-1){
$('.smallUl').html(html+html);
$('.smallUl').css('left',(3-i)*sWidth+'px');//获得开始自动播放时，使class=‘active’的img位于中间；
$(this).val('停止播放');
leftOneImg();
}else if($(this).val().indexOf('停止播放')!=-1){
$(this).val('自动播放');
clearTimeout(timer);
}
})

//图片向左移动一个
function leftImg(){
if(i==11){
i=2;
}
if(parseInt($('.smallUl').css('left'))==-sWidth*sLen){
$('.smallUl').css('left',0);
}
$('.smallUl li img').removeClass('active').eq(i+1).addClass('active'); //使被选中图片边框变灰；
var bigSrc = $('.smallUl li img').eq(i+1).attr('bigSrc'); //改变大图片的url
$('#bImg').attr('src',bigSrc);
$('.smallUl').animate({'left':'-='+sWidth+'px'},'slow'); //小图片的left属性减少sWidth
i++;
}

//图片向右移动一位
function rightImg(){
if(i==2){
i=10;
}
if(parseInt($('.smallUl').css('left'))==0){
$('.smallUl').css('left',-sWidth*sLen+'px');
}
$('.smallUl li img').removeClass('active').eq(i-1).addClass('active'); //使被选中图片边框变灰；
var bigSrc = $('.smallUl li img').eq(i-1).attr('bigSrc');//改变大图片的url
$('#bImg').attr('src',bigSrc);
$('.smallUl').animate({'left':'+='+sWidth+'px'},'slow'); //小图片的left属性增加sWidth
i--;
}
//点击下一张按钮；
$('#btn3').click(function(){
if($('#btn2').val().indexOf('自动播放')!=-1){
$('.smallUl').html(html+html);
$('.smallUl').css('left',(3-i)*sWidth+'px');//获得开始自动播放时，使class=‘active’的img位于中间;
leftImg();
}else{
return false;
}
})
//点击上一张按钮；
$('#btn1').click(function(){
if($('#btn2').val().indexOf('自动播放')!=-1){
if(i==3){
i=10;
}
$('.smallUl').html(html+html);
$('.smallUl').css('left',(3-i)*sWidth+'px');//获得开始自动播放时，使class=‘active’的img位于中间;
rightImg();
}else{
return false;
}
})

//向左移动7张图片；
function leftSevenImg(){
$('.smallUl').html(html);
var sWidth = $('.smallUl li').eq(0).outerWidth(true);
//var sLen = Math.ceil($('.smallUl li').length/7);
if(parseInt($('.smallUl').css('left'))>=0){
$('.smallUl').animate({'left':'-='+sWidth*7+'px'});
}
}

//向右移动7张图片；
function rightSevenImg(){
$('.smallUl').html(html);
var sWidth = $('.smallUl li').eq(0).outerWidth(true);
//var sLen = Math.ceil($('.smallUl li').length/7);
if(parseInt($('.smallUl').css('left'))<0){
$('.smallUl').animate({'left':'+='+sWidth*7+'px'});
}
}

//点击向左箭头
$('.lBtn').click(function(){
if($('#btn2').val().indexOf('自动播放')!=-1){
leftSevenImg();
}else{
return false;
}
})
//点击向右箭头
$('.rBtn').click(function(){
if($('#btn2').val().indexOf('自动播放')!=-1){
rightSevenImg();
}else{
return false;
}
})
})
</script>

</body>
</html>