<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

             }

             ul li {

                 list-style: none;

             }

             a{

                 text-decoration: none;

             }

             #banner{

                 width: 100%;

                 height: 300px;

                 overflow: hidden;

                 background: rgb(40, 40, 40 , .4);

             }

             #center{

                 width: 760px;

                 height: 300px;

                 margin: 0 auto;

                 position: relative;

             }

             #center ul {

                 width: 760px;

                 height: 300px;

             }

             #center ul li{

                 width: 760px;

                 height: 300px;

             }

             #center ul li a img{

                 width: 100%;

                 height: 100%;

                 display: block;

             }

             #center .btn{

                 display: none;

                 position: absolute;

                 width: 46px;

                 height: 70px;

                 top: 110px;

                 font-size: 30px;

                 color: #fff;

                 text-align: center;

                 line-height: 70px;

                 background: rgba( 0 , 0 , 0 , .4 );

                 font-weight: 600;

             }

             #center .btn:hover{

                  background: rgba( 0 , 0 , 0 , .8 );

             }

             #center .left{

                 left: 15px;

             }

             #center .right{

                 right: 15px;

             }

             #list{

                 width: 88px;

                 position: absolute;

                 bottom: 15px;

                 left: 50%;

                 margin-left: -44px;

                 background: rgba(0,0,0,.4);

                 border-radius: 20px;

                 padding: 2px 10px;

             }

             #list span{

                 display: inline-block;

                 width: 9px;

                 height: 9px;

                 border-radius: 50%;

                 border: 1px solid #fff;

                 cursor: pointer;

             }

             #list span.active{

                 background: #fff;

             }

         </style>

     </head>

     <body>

         <div id="banner">

             <div id="center">

                 <ul>

                     <li><a href="javascript:;"><img src="img/1.jpg"/></a></li>

                     <li><a href="javascript:;"><img src="img/2.jpg"/></a></li>

                     <li><a href="javascript:;"><img src="img/3.jpg"/></a></li>

                     <li><a href="javascript:;"><img src="img/4.jpg"/></a></li>

                     <li><a href="javascript:;"><img src="img/5.jpg"/></a></li>

                 </ul>

                 <a href="javascript:;" class="btn left">&lt;</a>

                 <a href="javascript:;" class="btn right">&gt;</a>

                 <div id="list">

                     <span class="active"></span>

                     <span></span>

                     <span></span>

                     <span></span>

                     <span></span>

                 </div>

             </div>

         </div>

         <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             var $banner = $('#banner');

             var $span = $('#list span');

             var $li = $('#center ul li');

             var $btn = $('#center .btn');

             var $right = $('#center .right');

             var $left = $('#center .left');

             var timer = null;

             var $index = 0;

             $banner.hover(function(){

                 $btn.fadeIn( 500 );

                 clearInterval(timer);

             },function(){

                 $btn.fadeOut( 500 );

                 timer = setInterval(rightC,2000);

             })

             $right.click(function(){

                 rightC();

             })

             $left.click(function(){

                 leftC();

             });

             timer = setInterval(rightC,2000);

             $span.mouseover(function(){

                 $index = $(this).index();

                 change();

             })

             function rightC(){

                 $index ++;

                 if($index>$span.size()-1){

                     $index = 0;

                 }

                 change();

             }

             function leftC(){

                 $index --;

                 if($index<0){

                     $index = $span.size()-1;

                 }

                 change();

             }

             function change(){

                 $span.eq($index).addClass('active').siblings().removeClass('active');

                 $li.eq($index).stop().fadeIn(500).siblings().stop().fadeOut(500);

             }

         </script>

     </body>

 </html>

jQuery实现图片伦播效果(淡入淡出+左右切换)的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. [转]jQuery实现图片轮播效果，jQuery实现焦点新闻

    本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...

  3. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  4. 使用JQuery实现图片轮播效果

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...

  5. 首页大屏广告效果 jquery轮播图淡入淡出

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 用CALayer实现淡入淡出的切换图片效果

    由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合 ...

  9. 封装bt轮播图淡入淡出效果样式

    <!--BT轮播图-->    <div data-ride="carousel" class="carousel slide carousel_inn ...

随机推荐

  1. STAF自动化测试框架

    STAF自动化测试框架介绍 http://baike.baidu.com/link?url=9oPZN3JntRakidI7xizqCbyGRISMvCKGfXHBB_WH7OAkKjAKZjq88q ...

  2. ODAC （V9.5.15) 学习笔记（二十一）数据复制

    用TVirtualTable在内存中缓存TOraQuery中的数据,主要应用场景是参照其他数据,需要将TOraQuery中的数据复制到TVirtualTable,由于没有类似于TClientDataS ...

  3. ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览

    //plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...

  4. react-native SyntaxError xxxxx/xx.js:Unexpected token (23:24)

    在运行react-native项目时提示 SyntaxError xxxxx/xx.js:Unexpected token (23:24) 我这边的问题原因:jsx语法错误,解决办法就是认真排查代码然 ...

  5. 解决Eclipse报errors running builder ‘javascript validator’ on project

    导入jquery的js到项目中,Eclipse每次检测到功能代码变化(保存动作触发)就报错: errors running builder ‘javascript validator’ on proj ...

  6. zepto - reduce

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce var ss ...

  7. JS文件放在头还是尾

    目前绝大部分的浏览器都是采取阻塞方式(Scripts Block Downloads)加载Javascript文件的:javascript在头部会阻止其他元素并行加载(css,图片,网页):这种机制的 ...

  8. Linux curl使用简单介绍

    在两台新搬迁的微信服务器上执行命令: curl -H "Content-Type: application/json" -d '{"partner_no":&q ...

  9. [转载]我们可以用SharePoint做什么

    前言 不知不觉作为一个SharePoint的开发人员若干年了,从SharePoint API开始学习,到了解SharePoint的结构,逐渐一点点了解sharepoint的体系:从SharePoint ...

  10. JS阻止鼠标滚动

    var scrollFunc=function(e){ e=e || window.event; if (e.stopPropagation) e.stopPropagation(); else e. ...