动态生成幻灯片
.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>
