.destination{ border: #666 solid 1px; box-shadow:-1px 1px 5px 0px #333; width:800px; height:460px; border-radius:10px; top:1px; left:95px; position:relative; } .destination ul{ margin:1px; padding:0
} .destination ul li{ list-style:none; display:block; float:left; width:260px; height:150px; margin: 2px; margin-left:4px; } .destination .left_right .right{ width:28px; height:68px; position:absolute; top:177px; left:796px; } .destination .current{ display:block; animation:danru 4s linear infinite; -webkit-animation:danru 4s linear alternate ; } /* 图像透明度 - Hover 效果 */ .destination ul li a img:hover{ opacity:0.5; filter:alpha(opacity=50);/* 针对 IE8 以及更早的版本 */ } .destination .other{ display:none; } @keyframes danru{ 0% {opacity:0.00;left:0px; top:0px;} 25% {opacity:0.25;left:50px; top:0px;} 50% {opacity:0.50;left:100px; top:0px;} 75% {opacity:0.75;left:150px; top:0px;} 100% {opacity:1.0; left:200px; top:0px;} } @-webkit-keyframes danru{ 0% {opacity:0.00;left:0px; top:0px;} 25% {opacity:0.25;left:50px; top:0px;} 50% {opacity:0.50;left:100px; top:0px;} 75% {opacity:0.75;left:150px; top:0px;} 100% {opacity:1.0; left:200px; top:0px;} } .destination .left_right .left{ width:28px; height:68px; position:absolute; top:177px; left:-32px; } .pagination{ border-radius:100px; position:absolute; margin-top:-10px; margin-left:448px; } .pagination ul li a:hover{ z-index: 2; color: #fff; background-color: #428bca; border-color: #428bca; } .pagination ul li a .actived { z-index: 2; color: #fff; background-color: #428bca; border-color: #428bca; } .pagination .actived { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca; } .blue_lines{ border-top: 2px #1473eb solid; margin-top: 5px; margin-bottom: 10px; clear: both; }
-----------------------------------
<!-- 目的地连接 --> <div class="destination" id="destination" > <!-- 循环开始 class="other" id="ul_id_2 --> <?php $i=1;$j=1;?> <?php foreach($link as $val): ?> <?php if($i==1){?> <ul id="ul_id_<?php echo $j; ?>" class="current"> <?php $j++;?> <?php } ?> <?php if($i==0){?> </ul> <ul id="ul_id_<?php echo $j; ?>" class="other"> <?php $j++;?> <?php } ?> <li> <a href=""><img src="{$root}<?php echo $val['_input_text_destination_photos']; ?>" height="163" class="image" ></a> </li> <?php $i+=1; ?> <?php endforeach; ?> </ul> <!-- 循环结束 --> <ul class='left_right'> <li class="left" > <a href="javascript:;" id="left"><img src="img/images/left.png" class="image" ></a> </li> <li class="right"> <a href="javascript:;" id="right"><img src="img/images/right.png" class="image" ></a> </li> </ul> </div> <div id="pagination" class="pagination pagination-mini"> <ul id="ul_page"> </ul> </div>
-----------------------------------
<script type="text/javascript">$(function(){ //获取div 所有ul的个数 var ullist=$("#destination ul ").length; //获取所有的ul个数 但要除去一个 var uls=ullist-1; //创建一个ul for(var i=0;i<uls;i++){ //如果是第一页则默认 当前li的背景颜色 if(i==0){ var li="<li id='id_"+(i+1)+"' ><a id='a_id_"+(i+1)+"' href='javascript:;' class='actived'>" + (i + 1) + "</a></li>"; $("#ul_page").append(li); }else{ var li="<li id='id_"+(i+1)+"' > <a id='a_id_"+(i+1)+"' href='javascript:;' class=''>" + (i + 1) + "</a></li>"; $("#ul_page").append(li); } } //点击分页 $("#ul_page li").bind("click", function(){ //获取当前的分页的li的id var id=$(this).attr("id"); var a_id="a_"+id; //修改当前li的样式 $("#"+a_id).removeClass(); $("#"+a_id).addClass("actived"); //修改当前ul的样式 var ul_id="ul_"+id; $("#"+ul_id).removeClass(); $("#"+ul_id).addClass("current"); //循环修改其他的样式 for(var i=1;i<=uls;i++){ //修改分页 li的样式 var ids="a_id_"+i; if(ids!=a_id){ $("#"+ids).removeClass(); } //修改ul的样式 var ul_id_other="ul_id_"+i; if(ul_id_other!=ul_id){ $("#"+ul_id_other).removeClass(); $("#"+ul_id_other).addClass("other"); } } }); //点击左边的显示 $("#left").bind('click',function(){ //获取当前页 id var current_page=$(".actived").attr("id"); //字符串截取最后一个数字 a_id_4 var last_index=current_page.lastIndexOf('_'); //字符串截取获得当前页 var current_index=current_page.substring(last_index+1,current_page.length); //判断他是否为第一页 if(current_index!=="1"){ current_index--; left_right_click(uls,current_index); } }); //点击右边的显示 $("#right").bind('click',function(){ //获取当前页 var current_page=$(".actived").attr("id"); var last_index=current_page.lastIndexOf('_'); //字符串截取获得当前页 var current_index=current_page.substring(last_index+1,current_page.length); //判断他是否为第一页 if(parseInt(current_index)!=parseInt(uls)){ current_index++; left_right_click(uls,current_index); } }); function left_right_click(uls,current_index){ var a_id="a_id_"+current_index; //修改当前li的样式 $("#"+a_id).removeClass(); $("#"+a_id).addClass("actived"); //修改当前ul的样式 var ul_id="ul_id_"+current_index; $("#"+ul_id).removeClass(); $("#"+ul_id).addClass("current"); // $("#"+ul_id).fadeToggle(2000); //循环修改其他的样式 for(var i=1;i<=uls;i++){ //修改分页 li的样式 var ids="a_id_"+i; if(ids!=a_id){ $("#"+ids).removeClass(); } //修改ul的样式 var ul_id_other="ul_id_"+i; if(ul_id_other!=ul_id){ $("#"+ul_id_other).removeClass(); $("#"+ul_id_other).addClass("other"); } } }});</script>
转载于:https://www.cnblogs.com/hgj123/p/3679759.html
