jquery轮播图片（无插件简单版）

轮播图（第三版）[2016-2-26]

工作中用的，改写了半透明蒙版，可以兼容ie7

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

//轮播图 start

var lunBo = {

    boxObj: null,

    imgsObj: null,

    index: 0,

    timer: 2500,

    Init:function(boxObj,imgsObj) {

        lunBo.boxObj = boxObj;

        lunBo.imgsObj = imgsObj;

        //加事件（鼠标悬停时停止播放，鼠标移出时开始自动播放）

        boxObj.hover(

            function () {

                clearInterval(handid);                    //----------清空定时器

                $('.lunbo-button-prev').show();

                $('.lunbo-button-next').show();

            },

            function () {

                handid = setInterval(lunBo.Next, lunBo.timer);    //----------添加计时器

                $('.lunbo-button-prev').hide();

                $('.lunbo-button-next').hide();

            }

        );

        //设定dot按钮组

        var btnBox = $('.pagination');

        var len = lunBo.imgsObj.length;

        for(var i=0;i<len;i++){

            btnBox.append($('<span class="pagination-bullet"></span>'));

        }

        btnBox.find('.pagination-bullet').bind('mouseover',function(){

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

            lunBo.Goto(lunBo.index);

        });

        //设定向左、向右按钮

        $('.lunbo-button-prev').click(function(){

            lunBo.Prev();

        });

        $('.lunbo-button-next').click(function(){

            lunBo.Next();

        });

        lunBo.Goto(0);//初始化，显示第一张

        handid = setInterval(lunBo.Next, lunBo.timer);        //----------添加计时器(开始播放)

    },

    Prev:function() {//上一张

        lunBo.index--;

        if (lunBo.index < 0) {lunBo.index = lunBo.imgsObj.length-1;}

        lunBo.Goto(lunBo.index);

    },

    Next:function() {//下一张

        lunBo.index++;

        if (lunBo.index == lunBo.imgsObj.length) {lunBo.index = 0;}

        lunBo.Goto(lunBo.index);

    },

    Goto:function(idx) {

        lunBo.index = idx;

        lunBo.imgsObj.eq(idx).fadeIn(300).siblings().hide();

        //lunBo.imgsObj.eq(idx).fadeIn(300);

        //console.log(idx);

        $('.pagination-bullet').eq(idx).addClass('active').siblings().removeClass('active');

    }

};

lunBo.Init($('.media-container'),$('.lunbo-slide'));

//轮播图 end

});

</script>

<style type="text/css">

ul,li,p{padding:0;margin:0;}

img{border:none;}

.mask-white50{background:#fff;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}

.mask-black50{background:#000;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}

.bg1{background:#003399;}

.media-container{position:relative;float:left;width:430px;height:230px;}

.media-container .lunbo-wrapper{position:relative;width:430px;height:230px;}

.media-container .lunbo-slide{display:none;position:absolute;width:430px;height:230px;}

.media-container .img1{width:430px;height:230px;}

.media-container .txtbox{position:absolute;left:0;right:0;bottom:0;height:40px;color:#fff;z-index:1;}

.media-container .txtbox .mask{position:absolute;left:0;top:0;right:0;bottom:0;}

.media-container .txtbox .p1{position:absolute;line-height:40px;height:40px;padding:0 1em;z-index:2;}

.media-container .pagination-mask{position:absolute;width:100px;height:40px;bottom:0;right:-100px;text-align:center;z-index:4;}

.media-container .pagination {position:absolute;width:100px;height:40px;bottom:0;right:-100px;text-align:center;z-index:5;}/*翻页小圆点*/

/*小圆点 active状态是不透明白点，默认状态是透明白点*/

.media-container .pagination .pagination-bullet {display:inline-block;width:18px;height:18px;border-radius:10px;background:#fff;margin-top:10px;

    opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    margin-right:10px;border:none;z-index:3;cursor:pointer;}

.media-container .pagination .active{background:#fff;opacity:1;filter:alpha(opacity=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

</style>

</head>

<body>

<!-- 首屏轮播图 start -->

<div class="media-container">

    <!-- 430x230 -->

    <div class="lunbo-wrapper">

        <div class="lunbo-slide">

            <a href="##" target="_blank"><img src="data:images/_rj33.png" alt="" class="img1"></a>

            <div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题111</p></div>

        </div>

        <div class="lunbo-slide">

            <a href="##" target="_blank"><img src="data:images/_rj34.png" alt="" class="img1"></a>

            <div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题222</p></div>

        </div>

        <div class="lunbo-slide">

            <a href="##" target="_blank"><img src="data:images/_rj35.png" alt="" class="img1"></a>

            <div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题333</p></div>

        </div>

    </div>

    <div class="pagination-mask bg1"></div>

    <div class="pagination"></div>

</div>

<!-- 首屏轮播图 end -->

轮播图（第二版）[2014-7-4]

对上文的代码做了些改进（代码风格更接近于我最近惯用的风格。）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<script type="text/javascript">

var LUNBO = {

    imgsObj: null,

    index: 0,

    timer: 1000,

    Init:function(imgsObj) {

        LUNBO.imgsObj = imgsObj;

        //加事件

        imgsObj.hover(

            function () {

                var idx=$(this).index();                //获得当前索引

                clearInterval(handid);                    //----------清空定时器(鼠标悬停时)

                LUNBO.Goto(idx);                            //----------点击后，跳转到第几张图

            },

            function () {

                handid = setInterval(LUNBO.Play, LUNBO.timer);    //----------添加计时器(鼠标移出时)

            }

        );

        LUNBO.Goto(0);//初始化，显示第一张

        handid = setInterval(LUNBO.Play, LUNBO.timer);        //----------添加计时器(开始播放)

    },

    Play:function() {//自动播放

        LUNBO.index++;

        if (LUNBO.index == LUNBO.imgsObj.length) {LUNBO.index = 0;}

        LUNBO.Goto(LUNBO.index);                                    //----------自动播放状态，跳转到第几张图

    },

    Goto:function(idx) {

        LUNBO.index = idx;

        LUNBO.imgsObj.eq(idx).siblings().hide();

        LUNBO.imgsObj.eq(idx).fadeIn(500);

    },

};

$(document).ready(function () {

    LUNBO.Init($(".box"));

});

</script>

<style type="text/css">

body,ul,li{margin:0;}

ul,li{list-style:none;}

#panel{position:relative;width:550px;height:170px;}

.box{position:absolute;left:0;top:0;width:100%;margin:0px;padding:0px;text-align:center;}

img{border:0;width:550px;height:170px;}

</style>

</head>

<body>

<h1>轮播图，无插件</h1>

<p>鼠标移到图片上，停止轮播。  鼠标移出，开始轮播</p>

    <div id="panel">

        <ul>

            <li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201311/powerswitch-cover-image.jpg"></a></li>

            <li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201311/http-break-point-upload.jpg"></a></li>

            <li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201309/requestAnimationFrame-tween.jpg"></a></li>

            <li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201308/anchor-cover.jpg"></a></li>

        </ul>

    </div>

</body>

</html>

第一版（已废弃） [2013-12-03]

鼠标移到按钮上，图片停止播放。鼠标移出按钮，图片开始自动播放。

靠imgCenter这个方法调用。将“图片列表对象”和"按钮列表对象"直接作为参数传进去。

(new imgsCenter( $(".imgbig"),$(".imgbtn") )).Init();

大图上面没做鼠标事件（需要的可以自己加hover事件）

 <!DOCTYPE html>

 <html>

 <head>

 <title></title>

 <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

 </head>

 <body>

 <script type="text/javascript">

 function imgsCenter(imgsObj,buttonsObj){

     var index = 0;                //当前图片序号

     var self = this;

     var handid;

     this.length = imgsObj.length;

     this.timer = 2000;

     //初始化

     this.Init = function(){

         //按钮加事件

         buttonsObj.hover(

             function () {

                 buttonsObj.removeClass("hover");

                 $(this).addClass("hover");

                 var idx=$(this).index();                //获得当前索引

                 clearInterval(handid);                    //----------清空定时器(鼠标悬停时)

                 self.Goto(idx);                            //----------点击后，跳转到第几张图

             },

             function () {

                 handid = setInterval(self.Play, self.timer);    //----------添加计时器(鼠标移出时)

             }

         );

         //初始化，显示第一张

         self.Goto(0);

         handid = setInterval(self.Play, self.timer);        //----------添加计时器(开始播放)

     }

     //跳转到第几张图

     this.Goto = function(idx){

         index = idx;

         imgsObj.eq(idx).siblings().hide();

         imgsObj.eq(idx).show();

         //imgsObj.eq(idx).siblings().fadeOut(200);

         //imgsObj.eq(idx).fadeIn(200);

         //当前图片显示，其余图片隐藏

         imgsObj.eq(index).siblings().hide();

         imgsObj.eq(index).show();

         //图片序号背景更换

         buttonsObj.eq(index).siblings().removeClass("hover");

         buttonsObj.eq(index).addClass("hover");

     }

     //自动播放

     this.Play = function () {

         index++;

         if (index == self.length) {index = 0;}

         self.Goto(index);                                    //----------自动播放状态，跳转到第几张图

     };

 }

 $(document).ready(function () {

     (new imgsCenter(  $(".imgbig"),$(".imgbtn") )).Init();

 });

 </script>

 <style type="text/css">

 ul{list-style:none;}

 .imgbtn{

     background: #FF70Ad;

     border:1px solid #000000;

     width:20px;

     height:16px;

     cursor:hand;

     float:left;

     margin:3px;

     padding:3px;

     text-align:center;

 }

 .hover{background: #FFFF00;}

 .imgbig{

     position:absolute;

     width:500px;

     height:170px;

     margin:0px;

     padding:0px;

     text-align:center;

     border:1px solid #ff9900;

 }

 #div1{

     position:relative;

     height:200px;

 }

 #divbtn{

     position:relative;

     left:0px;

     top:0px;

 }

 #divimg{

     position:relative;

     left:0px;

     top:30px;

 }

 </style>

 <!--整体容器-->

 <div id="div1">

     <!--序号-->

     <div id="divbtn">

         <ul>

             <li class="imgbtn">1</li>

             <li class="imgbtn">2</li>

             <li class="imgbtn">3</li>

             <li class="imgbtn">4</li>

         </ul>

     </div>

     <div id="divimg">

         <!--图片列表，除第一张显示外，其余隐藏-->

         <ul>

             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/powerswitch-cover-image.jpg"></li>

             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/http-break-point-upload.jpg"></li>

             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201309/requestAnimationFrame-tween.jpg"></li>

             <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201308/anchor-cover.jpg"></li>

         </ul>

     </div>

 </div>

 </body>

 </html>

jquery轮播图片（无插件简单版）的更多相关文章

简单html js css 轮播图片，不用jquery
这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...
自己写的一个jQuery轮播插件
大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...
分享一款简洁的jQuery轮播源码
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</titl ...
一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览代码地址:https://github.com/zsqosos/componen ...
轮播图片高效图片轮播，两个imageView实现
该轮播框架的优势: 文件少,代码简洁不依赖任何其他第三方库,耦合度低同时支持本地图片及网络图片可修改分页控件位置,显示或隐藏自定义分页控件的图片,就是这么个性自带图片缓存,一次加载,永久使用 ...
微信小程序轮播图组件 swiper，swiper-item及轮播图片自适应
官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...
[js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
APP动态加载轮播图片
如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...

随机推荐

django get post files请求知识点
GET: 我们在浏览器里直接键入地址回车,这种方式其实也是get方式提交了数据,如: http://localhost/login?user=123&pwd=123 就是把用户名123密码1 ...
Delphi实现树型结构
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
mysql编译安装（详细）(转载)
mysql编译安装(详细) 一.编译安装MySQL前的准备工作安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl 安装cmake,从 ...
django 数据模型中 null=True 和 blank=True 有什么区别
null: If True, Django will store empty values as NULL in the database. Default is False. 如果为True,空值将 ...
黄聪：AngularJS 动态加载控制器实例-ocLoazLazy
一.AngularJS动态加载控制器和视图实例路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...
linux上mongodb的安装与卸载
安装 1.下载安装包 wget http://fastdl.mongodb.org/linux/mongodb-linux-i686-1.8.2.tgz 下载完成后解压缩压缩包 tar zxf mon ...
SpringBoot集成RabbitMQ
官方说明:http://www.rabbitmq.com/getstarted.html 什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.MQ ...
IIS7.0 下使用Intelligencia.UrlRewriter时Session为空问题
背景新年伊始,本人的开发环境由Windows Server 2003 +IIS 6 升级成了 Windows Server 2008 +IIS 7,之后便着手参加新项目的开发.项目开发后期测试过程中 ...
bzoj5007: TCP协议
Description 在如今的网络中,TCP是一种被广泛使用的网络协议,它在传输层提供了可靠的通信服务.众所周知,网络是存在时延的,例如用户先后向服务器发送了两个指令op1和op2,并且希望服务器 ...
aspnet-api-versioning
https://github.com/Microsoft/aspnet-api-versioning