實現輪播效果
阿新 • • 發佈：2017-05-11
fault num 設置圖 pro ren pos ont mouseout return
HTML
<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(自行百度下載)
實現輪播效果