实现轮播效果
Posted 成长中的小牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现轮播效果相关的知识，希望对你有一定的参考价值。
<div class="wrap"> <div id="slide"> <ul class="list"> <li><a href="#"><img src="Style/Images/1.png" ></a></li> <li><a href="#"><img src="Style/Images/2.png" ></a></li> <li><a href="#"><img src="Style/Images/3.png" ></a></li> <li><a href="#"><img src="Style/Images/4.png" ></a></li> <li><a href="#"><img src="Style/Images/5.png" ></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
*{
vertical-align: baselinebaseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {width:100%; font: 12px/1.5 Microsoft YaHei, SimSun, Verdana, Geneva, sans-serif;}
ol, ul {
list-style: none;
}
fieldset, img { border:0; vertical-align:top; }
a { color:#000; text-decoration:none; cursor:pointer; outline: none;}
a img, :link img, :visited img {
border:0px;
text-decoration: none;
vertical-align: middle;
}
/*reset end*/
/*样式根据需要更改 最好带上父元素#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(自行百度下载)
以上是关于实现轮播效果的主要内容，如果未能解决你的问题，请参考以下文章