Android 轮播字母 android实现轮播图

[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);
}