.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%10==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>
原文：http://www.cnblogs.com/hgj123/p/3679759.html