<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="<?=base_url().'public/jquery-1.7.2.min.js' ?>"></script>
<style>
*
{
margin: 0;padding: 0;
}
img
{
width: 400px; height: 260px;
}
li
{
list-style: none;
}
#box
{
border: 3px solid #000; width: 400px; height: 260px; margin-left: 20px; position: relative; overflow: hidden;
}
ul
{
height: 260px; width: 3000px;position: absolute;
}
ul li
{
float: left;
}
ol li
{
float: left;border: 1px solid red; padding: 6px 10px; margin-left: 10px;
}
#box ol
{
position: absolute; right: 20px;bottom: 20px;;
}
.
color_0
{
background-color: #fff;
}
</style>
</head>
<body>
<form action="<?=base_url().'index.php/Welcome/up_file' ?>" method="post" enctype="multipart/form-data">
上传图片
<input type="file" name="f">
<input type="submit" value="提交">
</form>
<br>
<br>
<div id="box">
<ul>
<?php foreach($file as $k=>$v){ ?>
<li><img src="<?=base_url().$v['tmp'] ?>"></li>
<?php } ?>
</ul>
<ol>
<?php foreach($file as $k=>$v){ ?>
<li class="color_<?=$k ?>"><a href="javascript:void(0)"><?=$k+1 ?></a></li>
<?php } ?>
</ol>
</div>
</body>
<script>
/*设置一个常量
*/
var time_img='';
var sum=0;
/*点击轮播事件处理
*/
$("#box ol li").click(function(){
var thi=$(this);
clearInterval(time_img);
sum=thi.index();
img(thi);
time_img=setInterval(img,1500);
})
/*页面加载自动轮播
*/
$(function(){
time_img=setInterval(img,1500);
})
/*轮播事件
*/
function img(thi='')
{
if(thi=='')
{
sum=sum+1;
if(sum>$('#box ol li').length-1){
sum=0;
}
thi=$("#box ol li").eq(sum);
}
thi.addClass('color_0').siblings().removeClass();
var num=thi.index()*-400;
$("#box ul").animate({left:num},'slow');
}
</script>
</html>