ci框架的轮播图
来源:互联网 发布:linux查看所有用户名 编辑:程序博客网 时间:2024/06/15 01:53
<!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" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>轮播图</title> <script src="<?php echo base_url('Public').'/';?>jquery-1.9.1.min.js"></script> <style type="text/css"> * { padding: 0px; margin: 0px; } a { text-decoration: none; } ul { list-style: outside none none; } .slider, .slider-panel img, .slider-extra { width: 650px; height: 413px; } .slider { text-align: center; margin: 30px auto; position: relative; } .slider-panel, .slider-nav, .slider-pre, .slider-next { position: absolute; z-index: 8; } .slider-panel { position: absolute; } .slider-panel img { border: none; } .slider-extra { position: relative; } .slider-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px; } .slider-nav li { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-align: center; display: inline-block; height: 18px; line-height: 18px; width: 18px; } .slider-nav .slider-item-selected { background: blue; } .slider-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-align: center; display: block; font-family: "simsun"; font-size: 22px; width: 28px; height: 62px; line-height: 62px; margin-top: -31px; position: absolute; top: 50%; } .slider-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; } </style></head><body><div class="slider"> <ul class="slider-main"> <?php foreach($file as $item => $value):?> <li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"> <img src="<?php echo base_url('Public').'/';?><?php echo $value['img_log'];?>" alt="" width="800px;" height="500px;"/></a> </li> <?php endforeach; ?> </ul> <div class="slider-extra"> <ul class="slider-nav"> <li class="slider-item">1</li> <li class="slider-item">2</li> <li class="slider-item">3</li> <li class="slider-item">4</li> <li class="slider-item">5</li> </ul> <div class="slider-page"> <a class="slider-pre" href="javascript:;;"><</a> <a class="slider-next" href="javascript:;;">></a> </div> </div></div></body></html><script type="text/javascript"> $(document).ready(function() { $.ajax({ type: "POST", url: "<?php echo site_url('Index/img_time')?>", data: null,// dateType:"json", success: function(msg){ t=msg ;//轮播时间间隔 } });var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 length = $('.slider-panel').length; //将除了第一张图片隐藏 $('.slider-panel:not(:first)').hide(); //将第一个slider-item设为激活状态 $('.slider-item:first').addClass('slider-item-selected'); //隐藏向前、向后翻按钮 $('.slider-page').hide(); //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 $('.slider-panel, .slider-pre, .slider-next').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); }); $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() { next(); }); /** * 向前翻页 */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } /** * 向后翻页 */ function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } /** * 从preIndex页翻到currentIndex页 * preIndex 整数,翻页的起始页 * currentIndex 整数,翻到的那页 */ function play(preIndex, currentIndex) { $('.slider-panel').eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); } /** * 开始轮播 */ function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } /** * 停止轮播 */ function stop() { clearInterval(interval); hasStarted = false; } //开始轮播 start(); });</script>t=3000s;//轮播时间间隔
0 0
- ci框架的轮播图
- 【ci框架】谈CI框架的安全性
- CI框架的部署
- CI框架的分页
- CI框架的初次接触
- CI框架的一些笔记
- CodeIgniter(CI)框架的学习。。。
- CI框架的自动验证
- ci框架的发邮件
- 【ci框架】ci框架与smarty的整合
- 【ci框架】ci框架查询中join的使用
- CI(CodeIgniter)框架(二)之 CI框架的MVC
- 【ci框架】CI中site_url()和base_url()的区别
- CI框架(九)CI中site_url()和base_url()的区别
- ci框架
- CI框架
- CI框架
- 中国最权威的CI框架论坛
- 计算机视觉方向的一些顶级会议和期刊以及牛人
- java中的反射总结
- 使用hibernate 的hql进行查询表名无效问题
- 自己做一款简易的chrome扩展--清除页面广告
- poj_3274 Gold Balanced Lineup(数字哈希)
- ci框架的轮播图
- CGDB显示汇编代码
- Hibernate处理同名实体的方法(映射文件)
- 平衡二叉树
- cocos2dx学习之路----第十四篇(内存管理机制)
- php魔术方法__get和__set详解
- HDOJ 2057 A + B Again(水题,基础)
- js 中this陷阱
- LeetCode 40. Combination Sum II