JQuery 实现图片轮播
来源：互联网 发布：gsm是什么网络制式 编辑：程序博客网 时间：2024/06/07 02:20
<!DOCTYPE html><html> <head> <title>微冷的雨工作室</title> <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" type="text/css"></link> <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css"></link> <script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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: 1344px; height: 344px; } .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><script type="text/javascript">$(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 t = 3000; //轮播时间间隔 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> </head> <body> <!-- navbar-inverse：颜色反转 --> <nav class="navbar navbar-default navbar-fixed-top "> <!-- container-fluid:自适应浏览器宽度 container：居中样式 --> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <!-- 三行图标 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">微冷的雨工作室</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li> <li><a href="#">简介</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">干活分享<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">学术</a></li> <li><a href="#">图片</a></li> <li><a href="#">文章</a></li> <li role="separator" class="divider"></li> <li><a href="#">音乐</a></li> <li role="separator" class="divider"></li> <li><a href="#">日志</a></li> </ul> </li> <li><a href="#">本周活动</a></li> <li><a href="Y2161-0728.html">作业</a></li> <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav> <div class="slider"> <ul class="slider-main"> <li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img src="image/img01.png"></img></a> </li> <li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img src="image/img02.png"></img></a> </li> <li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img src="image/img03.png"></img></a> </li> </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> </ul> <div class="slider-page"> <a class="slider-pre" href="javascript:;;"><</a> <a class="slider-next" href="javascript:;;">></a> </div> </div> </div> <!-- tabs选项卡 --> <div class="container"> <hr/> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">学术</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">图片</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">文章</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">音乐</a></li> <li role="presentation"><a href="#rz" aria-controls="rz" role="tab" data-toggle="tab">日志</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div class="row"> <div class="col-md-7"> <img src="image/3.jpg" width="300px" height="300px"/></div> <div class="col-md-5"> 第一章</div> </div> </div> <div role="tabpanel" class="tab-pane" id="profile"> <div class="row"> <div class="col-md-7"> <img src="image/4.jpg" width="300px" height="300px"/></div> <div class="col-md-5"> 第2章</div> </div> </div> <div role="tabpanel" class="tab-pane" id="messages"> <div class="row"> <div class="col-md-7"> <img src="image/5.jpg" width="300px" height="300px"/></div> <div class="col-md-5"> 第3章</div> </div> </div> <div role="tabpanel" class="tab-pane" id="settings"> <div class="row"> <div class="col-md-7"> <img src="image/2.jpg" width="300px" height="300px"/></div> <div class="col-md-5"> 第4章</div> </div> </div> <div role="tabpanel" class="tab-pane" id="rz"> <div class="row"> <div class="col-md-7"> <img src="image/1.jpg" width="300px" height="300px"/></div> <div class="col-md-5"> 第5章</div> </div> </div> </div> <hr/> <footer> <p class="pull-right"><a href="#top">回到顶部</a></p> <p>©2016微冷的雨</p> </footer></div> <!-- 关于对话框 --> <div class="modal fade" id="about" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">关于</h4> </div> <div class="modal-body"> 微冷的雨致力于为IT世界贡献自己的一份微薄之力！！<br/> blogs地址：http://www.cnblogs.com <br/> 邮箱:yymqqc@126.com </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --> </div> </body></html> 0 0
- jQuery 实现图片轮播
- jquery 实现图片轮播
- jQuery --- 实现图片轮播
- jquery实现图片轮播
- jquery实现图片轮播
- jQuery 实现图片轮播
- JQuery 实现图片轮播
- Jquery实现图片轮播
- JQuery实现图片轮播效果
- Jquery 图片轮播实现原理总结
- JQuery实现图片轮播效果
- jQuery实现简单的图片轮播
- 使用Jquery实现图片轮播效果
- jQuery实现图片轮播效果
- jquery实现无缝图片轮播
- jquery实现图片轮播效果
- 使用jQuery实现图片轮播
- 用jquery实现图片轮播
- 两个div并列显示
- css实现三列浮动流式布局
- transition与animation的区别
- Visualizing and Understanding Convolutional Networks(ZF-Net)解读
- 百度：度度熊想去商场买一顶帽子，商场里有N顶帽...
- JQuery 实现图片轮播
- ecnu Problem #3233 N! //qduoj 阶乘问题
- DRML（2016-CVPR）重现过程记录---（7）问题定位_2
- uikit——UIView——layout定制
- jsonp跨域请求详解——从繁至简
- 多重部分和问题 多重背包&& Coins POJ
- js正则校验
- 68道Spring面试题和答案
- ES6入门学习笔记
