?
<!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>
<body>
<div id="content">
? <div id="bigImg">
??? <div class="bigContent">
?? <img id="bImg" src="images/big_3.jpg" />
?</div>
?<div class="btnContent">
?? <input id="btn1" type="button" value=" 上一张 " />
?? <input id="btn2" type="button" value="自动播放" />
?? <input id="btn3" type="button" value=" 下一张 " />
?</div>
? </div>
? <div id="smallImgs">
???? <a class="lBtn" href="javascript:void(0)"><</a>
? <div id="smallContent">
??????? <ul class="smallUl">
?????? <li><img src="images/small_0.jpg" bigSrc="images/big_0.jpg" /></li>
??? <li><img src="images/small_1.jpg" bigSrc="images/big_1.jpg" /></li>
??? <li><img src="images/small_2.jpg" bigSrc="images/big_2.jpg" /></li>
??? <li><img class="active" src="images/small_3.jpg" bigSrc="images/big_3.jpg" /></li>
??? <li><img src="images/small_4.jpg" bigSrc="images/big_4.jpg" /></li>
??? <li><img src="images/small_5.jpg" bigSrc="images/big_5.jpg" /></li>
??? <li><img src="images/small_6.jpg" bigSrc="images/big_6.jpg" /></li>
??? <li><img src="images/small_7.jpg" bigSrc="images/big_7.jpg" /></li>
???? </ul>
? </div>
? <a class="rBtn" href="javascript:void(0)">></a>
? </div>
</div>
<script>
/*
* 一个综合图片展示效果
* ie6,7,8，ff，opera中测试通过；
* ******made by keimon*********
* ********2013-01-30********
*/
$(function(){
?? var timer;
?? var html = $('.smallUl').html()
?? var i = $('.smallUl img').index($('.smallUl img.active')[0]);? //注意此处不要遗忘[0]；
?? var sWidth = $('.smallUl li').eq(0).outerWidth(true);
?? var sLen = $('.smallUl li').length;
??
?? //自动播放图片；
?? function leftOneImg(){
?? leftImg()
?? timer = setTimeout(function(){leftOneImg()},2000);
?? }
?? //点击自动播放图片按钮；?
?? $('#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>