HTML

<div class="wrap">
<div id="slide">
<ul class="list">
<li><a href="#"><img src="Style/Images/1.png" alt=""></a></li>
<li><a href="#"><img src="Style/Images/2.png" alt=""></a></li>
<li><a href="#"><img src="Style/Images/3.png" alt=""></a></li>
<li><a href="#"><img src="Style/Images/4.png" alt=""></a></li>
<li><a href="#"><img src="Style/Images/5.png" alt=""></a></li>
</ul>
</div>
</div>

js(需要引入jQuery库)

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/Mds.onePic.1.0.js" type="text/javascript"></script>
<script>
$('#slide').MdsSlideFade({
pageNum: true, time: '3000'
});
</script>

Mds.onePic.1.0.js

;(function($,window,document,undefined){
var Inits = function(ele,opts){
this.$ele = ele,
this.defaults = {
_width: 600, //设置图轮播图大小
_height: 400,
page: 'page', //是否启用导航图标,有值时启用,值为导航图标列表的样式类,为空时不启用导航列表
btn: true, //是否启用上下一页按钮,true为启用,false或者空为不启用。如果启用,请在下面的四个属性中赋值,为按钮添加样式类和按钮文字
nextClass: 'next', //下一张 按钮样式类
prevClass: 'prev', //上一张 按钮样式类
nextText: '下一张',
prevText: '上一张',
fade: 'normal', //图片切换速度 可能的值slow/normal/fast/毫秒(比如 1500)
time: '', //可能的值(毫秒)1000\2000...
pageNum: false, //是否启用数字做轮播导航 true为启用,false不启用
pagelocat: true //轮播导航图标是否要居中 true/fasle 默认为居中
},
this.init = $.extend({}, this.defaults, opts);
}
Inits.prototype = {
slideFade: function(){
var ul = this.$ele.children('ul.list');
var li = ul.children('li');
li.eq(0).show().siblings('li').hide();
var init = this.init;
//slide
this.$ele.css({
position: 'relative',
width: init._width+'px',
height: init._height+'px',
margin: '0 auto'
});
li.css({
position: 'absolute',
left: 0,
width: init._width+'px',
height: init._height+'px'
});
li.find('img').css({
width: '100%',
height: '100%'
});
//page==buiding
if (init.page!=''&&init.page!=undefined) {
this.$ele.append('<ul class="'+init.page+'"></ul>');
// buiding-page
for (var i = 0; i < li.length; i++) {
if (init.pageNum==true) {
$('.'+init.page).append('<li>'+(i+1)+'</li>');
}else if(init.pageNum==false){
$('.'+init.page).append('<li> </li>');
}
};
var page = $('.'+init.page);
var pageli = page.children('li');
pageli.css('float', 'left');
var pageliw = Math.ceil(pageli.outerWidth(true)+0.05)*pageli.length;
var pagetoleft = init._width/2-pageliw/2;
pageli.eq(0).addClass('on');
page.css({
position: 'absolute',
width: pageliw+'px'
});
if (init.pagelocat==true) {
page.css('left', pagetoleft+'px');
};
};
//btn==buiding
if (init.btn==true) {
this.$ele.append('<a href="javascript:;" class="sBtn">'+init.prevText+'</a><a href="javascript:;" class="sBtn">'+init.nextText+'</a>');
var btntotop = Math.round(init._height/2-this.$ele.children('a.sBtn').height()/2);
this.$ele.children('a.sBtn').css({
position: 'absolute',
top: btntotop+'px'
});
if (init.nextClass!=''||init.prevClass!='') {
this.$ele.children('a.sBtn').eq(0).addClass(init.prevClass).next('a.sBtn').addClass(init.nextClass);
}
};
//==========
var i = 0;
var next = function(fade){
li.eq(i).fadeOut(fade).next().fadeIn(fade);
page.children('li').eq(i).removeClass('on').next().addClass('on');
i++;
if (i>li.length-1) {
i=0;
li.eq(i).fadeIn(fade);
page.children('li').eq(i).addClass('on');
}
};
var prev = function(fade){
console.log(li.length); if (i==0) {
i=li.length-1;
li.eq(0).fadeOut(fade);
li.eq(i).fadeIn(fade);
page.children('li').eq(0).removeClass('on');
page.children('li').eq(i).addClass('on');
}else{
li.eq(i).fadeOut(fade).prev().fadeIn(fade);
page.children('li').eq(i).removeClass('on').prev().addClass('on');
i--;
}
}
//下一张
$('.next').click(function(event) {
next(init.fade);
});
//上一张
$('.prev').click(function(event) {
prev(init.fade);
});
// 是否自动轮播
if (init.time!=''&&init.time!=undefined) {
var timeRun = setInterval(next,init.time);
//鼠标经过图片
li.each(function(index, el) {
$(this).mouseover(function(event) {
clearInterval(timeRun);
}).mouseout(function(event) {
timeRun = setInterval(next,init.time);
});
});
};
if (init.page!=''&&init.page!=undefined) {
//点击导航图标
pageli.each(function(index, el) {
$(this).click(function(event) {
console.log(index);
i=index;
console.log(i);
li.eq(i).fadeIn(init.fade).siblings('li').fadeOut(init.fade);
page.children('li').eq(i).addClass('on').siblings('li').removeClass('on');
});
});
};
}//slideFade end
}
// 插件中调用
$.fn.MdsSlideFade = function(opts){
var inits = new Inits(this,opts);
return inits.slideFade();
} })(jQuery, window, document);

css

/*样式根据需要更改 最好带上父元素#slide,提高优先级 此处的next和prev为调用插件时设置的按钮属性nextClass/prevClass的值*/
#slide .prev{
left: -50px;
}
#slide .next{
right: -50px;
}
/*轮播导航图标样式,这里的ul.page的page为调用插件时设置的page属性的值,根据需要修改自己想要的样式效果*/
#slide ul.page{
bottom: -20px;
}
/*此处page原理同上 ,轮播导航图标非当前图标样式,*/
#slide ul.page li{
cursor: pointer;
color: #000;
width: 20px;
height: 20px;
background: #ccc;
text-align: center;
margin: 0 5px;
}
/* 此处page原理同上 ,on为当前图片的图标样式*/
#slide ul.page li.on{
color: red;
background: #000;
}

image(自行百度下载)

通过jQuery实现轮播效果的更多相关文章

  1. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

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

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

  3. css jquery 实现轮播效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

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

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

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

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

  7. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  8. 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  9. 用jQuery实现轮播图效果,js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

随机推荐

  1. 使用pyinstaller将Python打包为exe文件

    当我们完成一个Python项目或一个程序时,希望将Python的py文件打包成在Windows系统下直接可以运行的exe程序,那么pyInstaller就是一个很好的选择.pyInstaller可以将 ...

  2. jmeter4.0☞如何汉化(二)

    如何汉化jmeter打开jmeter,选择options_choose language_Chinese(simplified),如下图: 刚刚下载使用jmeter4.0的时候有点懵圈,英语实在是差劲 ...

  3. 孤荷凌寒自学python第七十六天开始写Python的第一个爬虫6

    孤荷凌寒自学python第七十六天开始写Python的第一个爬虫6 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 不过由于对python-docx模 ...

  4. bzoj1367 可并堆

    题面 参考:<左偏树的特点及运用--黄河源> 我们将这个数列划为很多个互不相交的区间,每一段区间内的 \(b\) 是相等的,即 \(b[l[i]]=b[l[i]+1]=...=b[r[i] ...

  5. pandas DataFrame的修改方法

    pandas DataFrame的增删查改总结系列文章: pandas DaFrame的创建方法 pandas DataFrame的查询方法 pandas DataFrame行或列的删除方法 pand ...

  6. Jenkins的pipeline脚本中获取git代码变更用户名和email

    // Get checkout output valuedef changeLogSets = checkout([$class: 'GitSCM', branches: [[name: '*/mas ...

  7. Android Studio环境解读

    一.使用IDE开发APP的流程 要熟悉一个新的IDE,可依次完成以下流程: 二.相关术语解析 Dalvik: Android特有的虚拟机,和JVM不同,Dalvik虚拟机非常适合在移动终端上使用! A ...

  8. identity方式

    identity方式      <generator class="identity"/>identity方式表示数据库的主键生成方式为采用数据库的主键生成机制,例如S ...

  9. json.dumps错误:'utf8' codec can't decode byte解决方案

    一次在使用json.dumps()过程中,出现错误提示: ERROR:"UnicodeDecodeError: 'utf8' codec can't decode byte 0xe1 in ...

  10. Java 无法初始化Connection的问题

    通过断点调试捕获错误消息:The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time ...