通过jQuery实现轮播效果
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="Pic.1.0.js" type="text/javascript"></script>
<script>
$('#slide').MdsSlideFade({
pageNum: true, time: '3000'
});
</script>
;
(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: '', //可能的值(毫秒)
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 = il(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">'+Text+'</a>'); var btntotop = und(init._height/2-this.$ele.children('a.sBtn').height()/2);
this.$ele.children('a.sBtn').css({
position: 'absolute',
top: btntotop+'px'
});
if (Class!=''||init.prevClass!='') {
this.$ele.children('a.sBtn').eq(0).addClass(init.prevClass).next('a.sBtn').Class);
}
};
//==========
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) {
js实现轮播图最简代码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.{
color: red;
background: #000;
}
image(⾃⾏百度下载)
发表评论