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上面没有图片,所以就不会轮播,需要手动重置下轮播 ...
随机推荐
- js copy数组 对象
js copy数组 slice concat 浅拷贝 copy 对象 Object.assign({},obj); es6 ie要用babel转 暴力copy 用JSON.parse(JSON. ...
- 关于Javascript闭包（Closure）
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...
- C++11--20分钟了解C++11 (下)
20分钟了解C++11 9 override关键字 (虚函数使用) * * 避免在派生类中意外地生成新函数 */ // C++ 03 class Dog { virtual void A(int); ...
- 峰Redis学习（2）Jedis 入门实例
参考博客:http://blog.java1234.com/blog/articles/314.html 第一节:使用Jedis 连接Redis 新建maven项目: pom.xml: <pro ...
- Java学习——Applet画8个同心圆
import java.awt.*; import java.applet.*; public class GUI3 extends Applet{ public void paint(Graphic ...
- 学习笔记之Python for Data Analysis
Python for Data Analysis, 2nd Edition https://www.safaribooksonline.com/library/view/python-for-data ...
- [转][Centos]一、了解关机
来自:https://blog.csdn.net/ronmy/article/details/79117390 Linux centos关机与重启命令详解与实战 Linux centos重启命令: 1 ...
- 类实例化对象可以访问静态(static)方法，但是不能访问静态属性。
类-> 访问->静态方法(类的方法)->可以 类 ->访问->普通方法(对象的方法)->不可以(虽然方法里不用$this关键字时,可以!但不支持这种写法) 类-&g ...
- 如何把RabbitMQ卸载干净
原文转载至:https://blog.csdn.net/w893932747/article/details/81018191 To uninstall RabbitMQ and Erlang fro ...
- bootstraptable学习(2)分页
1.分页需要配置一些参数 function init() { $('#bootstrapModel').bootstrapTable({ url: "../Listing.ashx" ...