首页 新闻 会员 周边

求一个Jquery图片轮播的例子？

0
悬赏园豆：20 [已解决问题] 解决于 2016-08-09 08:35

网上找了几个大多不喜欢，有几个的还不好用。

左右轮播，点选按键是圆形，在中间最好，有这几个就好

谁说不可以重名的主页 谁说不可以重名 | 初学一级 | 园豆：15
提问于：2016-07-26 09:07
< >
分享
最佳答案
0

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>jquery轮播效果图 - by RiccioZhang</title>  
  6. <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>  
  7. <style type="text/css">  
  8.     * {  
  9.         padding: 0px;  
  10.         margin: 0px;  
  11.     }  
  12.     a {  
  13.         text-decoration: none;  
  14.     }  
  15.     ul {  
  16.         list-style: outside none none;  
  17.     }  
  18.     .slider, .slider-panel img, .slider-extra {  
  19.         width: 650px;  
  20.         height: 413px;  
  21.     }  
  22.     .slider {  
  23.         text-align: center;  
  24.         margin: 30px auto;  
  25.         position: relative;  
  26.     }  
  27.     .slider-panel, .slider-nav, .slider-pre, .slider-next {  
  28.         position: absolute;  
  29.         z-index: 8;  
  30.     }  
  31.     .slider-panel {  
  32.         position: absolute;  
  33.     }  
  34.     .slider-panel img {  
  35.         border: none;  
  36.     }  
  37.     .slider-extra {  
  38.         position: relative;  
  39.     }  
  40.     .slider-nav {  
  41.         margin-left: -51px;  
  42.         position: absolute;  
  43.         left: 50%;  
  44.         bottom: 4px;  
  45.     }  
  46.     .slider-nav li {  
  47.         background: #3e3e3e;  
  48.         border-radius: 50%;  
  49.         color: #fff;  
  50.         cursor: pointer;  
  51.         margin: 0 2px;  
  52.         overflow: hidden;  
  53.         text-align: center;  
  54.         display: inline-block;  
  55.         height: 18px;  
  56.         line-height: 18px;  
  57.         width: 18px;  
  58.     }  
  59.     .slider-nav .slider-item-selected {  
  60.         background: blue;  
  61.     }  
  62.     .slider-page a{  
  63.         background: rgba(0, 0, 0, 0.2);  
  64.         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);  
  65.         color: #fff;  
  66.         text-align: center;  
  67.         display: block;  
  68.         font-family: "simsun";  
  69.         font-size: 22px;  
  70.         width: 28px;  
  71.         height: 62px;  
  72.         line-height: 62px;  
  73.         margin-top: -31px;  
  74.         position: absolute;  
  75.         top: 50%;  
  76.     }  
  77.     .slider-page a:HOVER {  
  78.         background: rgba(0, 0, 0, 0.4);  
  79.         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
  80.     }  
  81.     .slider-next {  
  82.         left: 100%;  
  83.         margin-left: -28px;  
  84.     }  
  85. </style>  
  86. <script type="text/javascript">  
  87.     $(document).ready(function() {  
  88.         var length,  
  89.             currentIndex = 0,  
  90.             interval,  
  91.             hasStarted = false, //是否已经开始轮播  
  92.             t = 3000; //轮播时间间隔  
  93.         length = $('.slider-panel').length;  
  94.           
  95.         //将除了第一张图片隐藏  
  96.         $('.slider-panel:not(:first)').hide();  
  97.         //将第一个slider-item设为激活状态  
  98.         $('.slider-item:first').addClass('slider-item-selected');  
  99.         //隐藏向前、向后翻按钮  
  100.         $('.slider-page').hide();  
  101.           
  102.         //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动  
  103.         $('.slider-panel, .slider-pre, .slider-next').hover(function() {  
  104.             stop();  
  105.             $('.slider-page').show();  
  106.         }, function() {  
  107.             $('.slider-page').hide();  
  108.             start();  
  109.         });  
  110.           
  111.         $('.slider-item').hover(function(e) {  
  112.             stop();  
  113.             var preIndex = $(".slider-item").filter(".slider-item-selected").index();  
  114.             currentIndex = $(this).index();  
  115.             play(preIndex, currentIndex);  
  116.         }, function() {  
  117.             start();  
  118.         });  
  119.           
  120.         $('.slider-pre').unbind('click');  
  121.         $('.slider-pre').bind('click', function() {  
  122.             pre();  
  123.         });  
  124.         $('.slider-next').unbind('click');  
  125.         $('.slider-next').bind('click', function() {  
  126.             next();  
  127.         });  
  128.           
  129.         /**  
  130.          * 向前翻页  
  131.          */  
  132.         function pre() {  
  133.             var preIndex = currentIndex;  
  134.             currentIndex = (--currentIndex + length) % length;  
  135.             play(preIndex, currentIndex);  
  136.         }  
  137.         /**  
  138.          * 向后翻页  
  139.          */  
  140.         function next() {  
  141.             var preIndex = currentIndex;  
  142.             currentIndex = ++currentIndex % length;  
  143.             play(preIndex, currentIndex);  
  144.         }  
  145.         /**  
  146.          * 从preIndex页翻到currentIndex页  
  147.          * preIndex 整数，翻页的起始页  
  148.          * currentIndex 整数，翻到的那页  
  149.          */  
  150.         function play(preIndex, currentIndex) {  
  151.             $('.slider-panel').eq(preIndex).fadeOut(500)  
  152.                 .parent().children().eq(currentIndex).fadeIn(1000);  
  153.             $('.slider-item').removeClass('slider-item-selected');  
  154.             $('.slider-item').eq(currentIndex).addClass('slider-item-selected');  
  155.         }  
  156.           
  157.         /**  
  158.          * 开始轮播  
  159.          */  
  160.         function start() {  
  161.             if(!hasStarted) {  
  162.                 hasStarted = true;  
  163.                 interval = setInterval(next, t);  
  164.             }  
  165.         }  
  166.         /**  
  167.          * 停止轮播  
  168.          */  
  169.         function stop() {  
  170.             clearInterval(interval);  
  171.             hasStarted = false;  
  172.         }  
  173.           
  174.         //开始轮播  
  175.         start();  
  176.     });  
  177. </script>  
  178. </head>  
  179. <body>  
  180.     <div class="slider">  
  181.         <ul class="slider-main">  
  182.             <li class="slider-panel">  
  183.                 <a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>  
  184.             </li>  
  185.             <li class="slider-panel">  
  186.                 <a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>  
  187.             </li>  
  188.             <li class="slider-panel">  
  189.                 <a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>  
  190.             </li>  
  191.             <li class="slider-panel">  
  192.                 <a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>  
  193.             </li>  
  194.         </ul>  
  195.         <div class="slider-extra">  
  196.             <ul class="slider-nav">  
  197.                 <li class="slider-item">1</li>  
  198.                 <li class="slider-item">2</li>  
  199.                 <li class="slider-item">3</li>  
  200.                 <li class="slider-item">4</li>  
  201.             </ul>  
  202.             <div class="slider-page">  
  203.                 <a class="slider-pre" href="javascript:;;"><</a>  
  204.                 <a class="slider-next" href="javascript:;;">></a>  
  205.             </div>  
  206.         </div>  
  207.     </div>  
  208. </body>  
  209. </html>  

 

收获园豆：20
wa-kaka | 菜鸟二级 |园豆：272 | 2016-07-28 16:10
其他回答(5)
0

有固定插件吧？jQuery.slider？

顾晓北 | 园豆：10844 (专家六级) | 2016-07-26 09:09

 最好不用插件

支持(0) 反对(0) 谁说不可以重名 | 园豆：15 (初学一级) | 2016-07-26 09:18

@谁说不可以重名: 那你就自己写吧。。。

支持(0) 反对(0) 顾晓北 | 园豆：10844 (专家六级) | 2016-07-26 09:18
0

把slider的源码拿出来喽。

长蘑菇星人 | 园豆：1832 (小虾三级) | 2016-07-26 09:19
0

http://www.yneduyun.cn/cloud/

AnonymouL | 园豆：1769 (小虾三级) | 2016-07-26 13:03
0

 恩 加我qq  81264756 发你一个jQuery和原声js的

 

小精灵儿Pawn | 园豆：470 (菜鸟二级) | 2016-07-26 20:55
0

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>项目实战</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand logo"><img src="img/logo.png" alt="瓢城企训网"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li> </ul> </div> </div> </nav> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active" style="background:#223240"> <img src="img/slide1.png" alt="第一张"> </div> <div class="item" style="background:#F5E4DC;"> <img src="img/slide2.png" alt="第二张"> </div> <div class="item" style="background:#DE2A2D;"> <img src="img/slide3.png" alt="第三张"> </div> </div> <a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a> <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(function () { //轮播自动播放 $('#myCarousel').carousel({ //自动4秒播放 interval : 4000, }); //设置垂直居中 $('.carousel-control').css('line-height', $('.carousel-inner img').height() + 'px'); $(window).resize(function () { var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height(); $('.carousel-control').css('line-height', $height + 'px'); }); }); </script> </body> </html>

寨♂冇嚸ル壞 | 园豆：186 (初学一级) | 2016-07-28 15:57
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。