转载注明出处！！！

转载注明出处！！！

转载注明出处！！！

图片轮播demo，弄清楚过程其实是一个很简单的东西，看网上都没有什么实质性的代码，就自己把过程捋了一遍实现了。

这次因为随手写的，所以没有做什么通用性的修改，纯粹想到哪写到哪，大神们别说我就好了。

思路就是显示一张图片，其他图片隐藏掉，很简单吧。。。

由于用到了我博客里面的IcoMoon字体图标，还用到了bootscript的栅格系统用来居中（纯属多余）可以自己看下

废话不多说，直接上代码，还是一样的，注释很清楚了。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

     <link rel="stylesheet" type="text/css" href="font/style.css">

     <title>Document</title>

 <style>

 img{

     width: 700px;

     height:450px;

     position: absolute;

 }

 .my_center{

     text-align:center;

 }

 .none{

     display: none;

 }

 ul{

     padding: 0px;

 }

 li

 {

     list-style-type: none;

 }

 .box{

     position: relative;

     width: 700px;

     height:450px;

     margin: 0 auto;

 }

 .left{

     left: 0px;

 }

 .right{

     right: 0px;

 }

 .pic_button{

     position: absolute;

     top: 0px;

     bottom: 0px;

     margin: auto 0;

     width: 40px;

     height: 60px;

     display: none;

     opacity: 0.3;

     background-color: #888888;

     border: 0px;

     outline-style:none;

     z-index: 100;

 }

 .lineList{

     display: none;

     position: absolute;

     left: 0px;

     right: 0px;

     bottom: 10px;

     margin: 0 auto;

     z-index:100;

 }

 span{

     color :#CCCCCC;

 }

 .lineList li{

     display: inline;

     margin: 5px;

 </style>

 <script type="text/javascript" src = "./js/jquery.js"></script>

 </head>

 <body class= "scrollbar">

     <div class = "row">

         <div class = "col-md-12 my_center">

             <div id = "box" class = "box">

                 <button id = "Previous" class = "left pic_button">

                     <span class="glyphicon glyphicon-chevron-left"></span>

                 </button>

                 <ul>

                     <li>

                         <img class = "none" src="./img/1.jpg">

                     </li>

                     <li>

                         <img class = "none" src="./img/2.jpg">

                     </li>

                     <li>

                         <img class = "none" src="./img/3.jpg">

                     </li>

                     <li>

                         <img class = "none" src="./img/4.jpg">

                     </li>

                     <li>

                         <img class = "none" src="./img/5.jpg">

                     </li>

                     <li>

                         <img class = "none" src="./img/6.jpg">

                     </li>

                     <li>

                         <img class = "none" src="./img/7.jpg">

                     </li>

                     <li>

                         <img class = "none" src="./img/8.jpg">

                     </li>

                 </ul>

                 <button id = "next" class = "right pic_button">

                     <span class="glyphicon glyphicon-chevron-right"></span>

                 </button>

             </div>

         </div>

     </div>

 </body>

 </html>

 <script>

     $(function(){

         //初始化

         var img_index = 0;

         var img = $("#box img");

         var img_len = img.length;

         img.eq(0).show();

         var id;

         //开启定时器，设置轮播时间

         id = setInterval(show_abs,1000);

         //轮播函数

         function show_abs(isPrevious){

             //设置默认值是为了在不点击按钮的时候自动轮播

             //这里为什么这么写？你试试用普通的写法就知道了。

             var isNext = arguments[0] ? true : arguments[0];

             //为什么判断是isPrevious而不是isNext，你试试就知道了。

             var next = isPrevious?-1:1;

             img.eq(img_index).fadeOut(1000);

             img_index += next;

             //判断范围

             if(img_index == img_len)

                 img_index = 0;

             if(img_index == -1)

                 img_index = img_len-1;

             img.eq(img_index).fadeIn(1000);

             $(".lineList li").eq(img_index).find("span").prop('class','icon-radio-checked');

             $(".lineList li").eq(img_index).siblings().find("span").prop('class','icon-radio-unchecked');

         }

         //鼠标悬停的时候暂停轮播，并显示相关组件

         $("#box").hover(function(){

             $(".lineList").fadeIn(500);

             $(".pic_button").fadeIn(500);

             clearInterval(id);

         },function(){

             $(".lineList").fadeOut(500);

             $(".pic_button").fadeOut(500);

             id = setInterval(show_abs,1000);

         });

         $("#Previous").on('click',function(){

             show_abs(true);

         });

         $("#next").on('click',function(){

             show_abs(false);

         });

         //插入一行索引

         var lineList = '<ul  class = "lineList">';

         for(var i = 0; i < img_len; i++)

         {

             lineList += "<li><span class = 'icon-radio-unchecked'></span></li>";

         }

         lineList += '</ul>';

         $("#box").append(lineList);

         //初始化索引显示

         $(".lineList li").eq(0).find("span").prop('class','icon-radio-checked');

         $(".lineList li").each(function(i){

             $(this).click(function(){

                 //点击以后的效果

                 $(this).find("span").prop('class','icon-radio-checked');

                 $(this).siblings().find("span").prop('class','icon-radio-unchecked');

                 //点击以后图片的切换

                 if(i != img_index)

                 {

                     img.eq(img_index).fadeOut(1000);

                     img.eq(i).fadeIn(1000);

                     img_index=i;

                 }

             });

         });

     });

 </script>

jquery 图片轮播demo实现的更多相关文章

  1. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

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

  4. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  5. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  6. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  7. 面板支持单个，多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  8. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  9. jQuery 图片轮播的代码分离

    以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...

随机推荐

  1. 嵌入式linux下如何尽快播放开机音乐

    今天在考虑如何尽快启动一个应用程序,播个开机音乐什么的. 最开始的启动流程是这样的,bootloader 启动kernel,kernel跑完挂载文件系统, 然后会执行/init,而这个init 是指向 ...

  2. JDBC的连接和操作

    package Test; import java.sql.*; public class Test21 { public static void main(String[] args) { Conn ...

  3. C# 定时器 Timers.Timer Forms.Timer

    1.定义在System.Windows.Forms里 Windows.Forms里面的定时器比较简单,只要把工具箱中的Timer控件拖到窗体上,然后设置一下事件和间隔时间等属性就可以了 //启动定时器 ...

  4. 使用Dotfuscator 进行.Net代码混淆 代码加密的方法

    混淆代码能在一定程度上放置代码被盗用,保护我们的知识产权 1.打开vs2012,选择工具-〉Dotfuscator Software Services 2.选择你需要混淆的DLL 文件,可以多选择 3 ...

  5. windows上面捕获声卡数据

    转自:http://shanewfx.github.io/blog/2013/08/14/caprure-audio-on-windows/ 前一段时间接到一个任务,需要采集到声卡的输出信号,以便与麦 ...

  6. Android中Intent的用法总结

    Intent只在Android中特有,我把它比作一种运载工具,就像飞机一样,会把一些人带到某个地方,而且如果需要的话,还可以找到机上有哪些人员(数据),这就需要另外一些设备来支持(如:Bundle), ...

  7. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. 开发必备的Windows小技巧

    在Windows中我们经常会遇到各种小问题,而这些小问题又确实在影响着工作效率,如果能解决这些小问题,那么就能在一定程度上提高工作效率,保证心情愉悦.今天我就来分享一下几个自认为比较有用的小技巧. 保 ...

  9. python实现grep

    import sys import os import re def usage(): print "[Usage]: python grep.py filename grepString. ...

  10. QParserGenerator的文法文件介绍

    在沉默了数月之后,博主心血来潮想继续介绍QParserGenerator,在这里我们将不再继续介绍任何有关于LALR(1)的算法(那东西只会把你的脑子变成一团浆糊),让我们来看一下QParserGen ...