综合图片展示效果

最新推荐文章于 2024-08-31 14:18:35 发布

iteye_6992

最新推荐文章于 2024-08-31 14:18:35 发布

阅读量125

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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>

iteye_6992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
综合图片展示效果

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;m
复制链接

扫一扫

专栏目录