html中轮播把导航栏挡住了,【分享】使用原生JS实现的一个经典轮播图导航栏效果...

[JavaScript] 纯文本查看 复制代码

Title

陈翔六点半铁头无敌铁头传人战江湖

狄仁杰之四大天王韩庚郑恺战前任

前任3再见前任靓汤高空徒手扒飞机

碟中谍神秘国度佛魔大战一触即发

降魔武僧赵文卓洪金宝抗倭

荡寇风云赵文卓洪金宝抗倭

家有喜事家有喜事删减片段曝光

唐人街探案2王宝强爆笑破案

<

>

//首页轮播图效果开始------------------------------------------------------------------------------------------

/**

* 使用面向对象的方式封装这个轮播图效果

*/

function imgShow() {

}

/**

* 首页的电影效果轮播图效果实现

*/

imgShow.prototype = {

imgs: [], // 图片数组

num: -1, // 初始的图片下标

currentNumber: 0, // 当前展示的图片下表编号

elements: null, // 存储获取的DOM元素

/**

* 输入图片路径信息之后， 开启轮播图效果

* @param imgs

*/

start: function (imgs) {

this.init(imgs);

},

/**

* 输入参数初始化

* 事件处理模块初始化

* @param imgs

*/

init: function (imgs) {

// 初始化输入参数

this.initParas(imgs);

// 主程序入口

this.autoPlay();

// 事件初始化

this.initEvent();

},

/**

* 输入参数初始化

* @param imgs

*/

initParas: function (imgs) {

this.imgs = imgs;

// 初始化选择元素

this.elements = $('.main-item a');

// 初始化图片背景

$('.main-slider').css('background', 'url(' + this.imgs[0] + ')').css('background-size', '100%');

// IE 兼容

$('.main-slider').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' + 'src=' + this.imgs[0] + ',sizingMethod="scale")');

},

/**

* 事件处理初始化

*/

initEvent: function () {

this.mouseover();

this.click();

},

/**

* 自动移动项的实现(图片随项一起移动)

* @param index

*/

itemMove: function (index) {

// 移动之后，找到相应的li-item，改变他的样式

var lis = $('.main-item a');

if (lis === null) {

return;

}

lis.each(function () {

var a = this.childNodes;

if (a && a.length === 4) {

if (this.className === 'current') {

this.className = '';

}

a[1].className = '';

a[2].className = '';

} else if (a && a.length === 3) {

if (this.className === 'current') {

this.className = '';

}

a[0].className = '';

a[1].className = '';

}

});

// 把当前的设置为样式 index = 0, 则切换为第0个li标签

var current = lis[index + 1];

current.className = 'current';

if (current && current.childNodes && current.childNodes.length === 4) {

// chrome

current.childNodes[1].className = 'current-title';

current.childNodes[2].className = 'current-content';

} else if (current && current.childNodes && current.childNodes.length === 3) {

//IE

current.childNodes[0].className = 'current-title';

current.childNodes[1].className = 'current-content';

}

},

/**

* 鼠标移动事件处理模块

*/

mouseover: function () {

// 获取所有的li标签

var lis = this.elements;

var self = this;

lis.on('mouseover', function (e) {

if (this.className === 'first' || this.className === 'last') {

return;

}

lis.each(function () {

var a = this.childNodes;

if (a && a.length == 4) {

if (this.className === 'current') {

this.className = '';

}

a[1].className = '';

a[2].className = '';

} else if (a && a.length === 3) {

if (this.className === 'current') {

this.className = '';

}

a[0].className = '';

a[1].className = '';

}

});

// 把当前的设置为样式

if (this.childNodes && this.childNodes.length === 4) {

// 谷歌浏览器 W3C

var current = this.childNodes;

this.className = 'current';

current[1].className = 'current-title';

current[2].className = 'current-content';

// 原始的实现可以通过父节点的所有孩子节点变遍历的方式来判断，srcNode.parentNode.childNodes[index] === srcNode

// 设置完毕之后， 修改与之相对应的图片样式信息

$('.main-slider').css('background', 'url(' + self.imgs[$(this).index() - 1] + ')').css('background-size', '100%');

} else {

// IE 浏览器

var target = $.getTarget(e);

var current = target.childNodes;

target.className = 'current';

if (current && current.length === 3) {

current[0].className = 'current-title';

current[1].className = 'current-content';

// 原始的实现可以通过父节点的所有孩子节点变遍历的方式来判断，srcNode.parentNode.childNodes[index] === srcNode

// 设置完毕之后， 修改与之相对应的图片样式信息

$('.main-slider').css('background', 'url(' + self.imgs[$(target).index() - 1] + ')').css('background-size', '100%');

}

}

});

},

/**

* 鼠标单击事件处理模块

*/

click: function () {

var self = this;

$('.arrow-l').on('click', function (e) {

self.currentNumber--;

if (self.currentNumber < 0) {

self.currentNumber = self.imgs.length - 1;

}

$('.main-slider').css('background', 'url(' + self.imgs[self.currentNumber] + ')').css('background-size', '100%');

// 设置为自动移动标签项

self.itemMove(self.currentNumber);

self.num = self.currentNumber;

});

$('.arrow-r').on('click', function (e) {

self.currentNumber++;

if (self.currentNumber > self.imgs.length - 1) {

self.currentNumber = 0;

}

$('.main-slider').css('background', 'url(' + self.imgs[self.currentNumber] + ')').css('background-size', '100%');

// 设置为自动移动

self.itemMove(self.currentNumber);

self.num = self.currentNumber;

});

},

/***

* 轮播图自动播放的实现

*/

autoPlay: function () {

var self = this;

setInterval(function () {

self.num++;

$('.main-slider').css('background', 'url(' + self.imgs[self.num % 8] + ')').css('background-size', '100%');

$('.main-slider').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' + 'src=' + self.imgs[self.num % 8] + ',sizingMethod="scale")');

self.currentNumber = self.num % 8;

// 开始移动item项

self.itemMove(self.currentNumber);

}, 4000);

}

}

/**

* 轮播图效果的启动

* @param ev

*/

window.onload = function () {

// 图片数组初始化

var imgs = [

'../www/images/big0.jpg',

'../www/images/big1.jpg',

'../www/images/big2.jpg',

'../www/images/big3.jpg',

'../www/images/big4.jpg',

'../www/images/big5.jpg',

'../www/images/big6.jpg',

'../www/images/big7.jpg',

];

// 初始化参数，启动

var run = new imgShow(imgs);

run.start(imgs);

}