【分享】使用原生JS实现的一个经典轮播图导航栏效果
本帖最后由 向善的灯 于 2018-10-13 12:54 编辑总共的实现代码也就300行吧，主要用到的技术有html,css,js等。
最终的效果图如上，主要的知识点包括：JavaScript定时器，CSS布局（这块是核心，做的好不好看就在这块了）
GItHub源码：
如果觉得还不错的各位亲们，欢迎给个Star哈，你的支持就是我前进的动力！
https://github.com/xiugangzhang/vip.github.io/blob/master/index.html
首先来看下主文件：这块是index.html，这里是把js代码和HTML代码写在了一块，基本上在相关的代码位置上都写上了注释，方便大家学习交流：
其他的几个发布在吾爱的项目：
【分享】试试我开发的这个【超级马里奥游戏】，看下自己能不能撑过30秒
https://www.52pojie.cn/thread-804616-1-1.html
(出处: 吾爱破解论坛)
【分享】苏拉卡尔塔（Surakarta）游戏项目及源码分享（欢迎体验试玩）
https://www.52pojie.cn/thread-803871-1-1.html
(出处: 吾爱破解论坛)
使用HTML5 canvas开发的一个中国象棋游戏
https://www.52pojie.cn/thread-803372-1-1.html
(出处: 吾爱破解论坛)
{:301_997:}{:301_973:}{:301_1003:}
如果觉得不错也麻烦大家给个star支持一下哈，毕竟码代码也不容易哈。
GitHub：https://github.com/xiugangzhang
以上就是自己在过去一段时间里分享的一些项目了，因为开发一个不错的项目也不容易哈，也就在这里积点人气，给个star支持一些，有什么问题和建议也欢迎大家吐槽哈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./index.css">
<script src="./xframe-min-1.0.js"></script>
</head>
<body>
<!--main start-->
<div class="main">
<div class="w">
<div class="main-slider" style="width: 1210px">
<div class="main-item">
<a class="first" href="#">
</a>
<a class="current" href="#">
<span class="current-title">陈翔六点半铁头无敌</span><span class="current-content">铁头传人战江湖</span>
</a>
<a href="#">
<span>狄仁杰之四大天王</span><span>韩庚郑恺战前任</span>
</a>
<a href="#">
<span>前任3再见前任</span><span>靓汤高空徒手扒飞机</span>
</a>
<a href="#">
<span>碟中谍神秘国度</span><span>佛魔大战一触即发</span>
</a>
<a href="#">
<span>降魔武僧</span><span>赵文卓洪金宝抗倭</span>
</a>
<a href="#">
<span>荡寇风云</span><span>赵文卓洪金宝抗倭</span>
</a>
<a href="#">
<span>家有喜事</span><span>家有喜事删减片段曝光</span>
</a>
<a href="#">
<span>唐人街探案2</span><span>王宝强爆笑破案</span>
</a>
<a class="last" href="#">
</a>
</div>
<!--这是一个空盒子-->
<a href="javascript:void(0);" class="arrow-l"><</a>
<a href="javascript:void(0);" class="arrow-r">></a>
</div>
</div>
</div>
<!--main end-->
<script>
//首页轮播图效果开始------------------------------------------------------------------------------------------
/**
* 使用面向对象的方式封装这个轮播图效果
*/
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 + ')').css('background-size', '100%');
// IE兼容
$('.main-slider').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' + 'src=' + this.imgs + ',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.className = '';
a.className = '';
} else if (a && a.length === 3) {
if (this.className === 'current') {
this.className = '';
}
a.className = '';
a.className = '';
}
});
// 把当前的设置为样式 index = 0, 则切换为第0个li标签
var current = lis;
current.className = 'current';
if (current && current.childNodes && current.childNodes.length === 4) {
// chrome
current.childNodes.className = 'current-title';
current.childNodes.className = 'current-content';
} else if (current && current.childNodes && current.childNodes.length === 3) {
//IE
current.childNodes.className = 'current-title';
current.childNodes.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.className = '';
a.className = '';
} else if (a && a.length === 3) {
if (this.className === 'current') {
this.className = '';
}
a.className = '';
a.className = '';
}
});
// 把当前的设置为样式
if (this.childNodes && this.childNodes.length === 4) {
// 谷歌浏览器 W3C
var current = this.childNodes;
this.className = 'current';
current.className = 'current-title';
current.className = 'current-content';
//原始的实现可以通过父节点的所有孩子节点变遍历的方式来判断，srcNode.parentNode.childNodes === 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.className = 'current-title';
current.className = 'current-content';
//原始的实现可以通过父节点的所有孩子节点变遍历的方式来判断，srcNode.parentNode.childNodes === 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 + ')').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 + ')').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 + ')').css('background-size', '100%');
$('.main-slider').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' + 'src=' + self.imgs + ',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);
}
</script>
</body>
</html>
下面的这个是index.css文件，主要是样式布局文件：
@charset "UTF-8";
.main-item a, .main-slider ul li {
width: 250px;
color: #000;
font: 400 14px/37px 'Microsoft YaHei'
}
.arrow-l, .arrow-r, .main-item a {
display: block;
text-align: center
}
.main {
padding-top: 90px
}
.main-slider {
cursor: pointer;
height: 420px;
background-size: 100%;
margin-top: 15px;
position: relative;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=5);
-webkit-box-reflect: below -122px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(white))
}
.main-item, .main-slider ul {
position: absolute;
right: 70px
}
.main-item a {
height: 42px;
background-color: rgba(211, 201, 191, .8)
}
.main-slider .first {
width: 250px;
height: 25px;
background: -webkit-linear-gradient(rgba(211, 201, 191, .5), rgba(211, 201, 191, .8));
background: -moz-linear-gradient(top, rgba(211, 201, 191, .5) 100%, rgba(211, 201, 191, .8) 0);
background: -o-linear-gradient(top, rgba(211, 201, 191, .5) 100%, rgba(211, 201, 191, .8) 0);
background: -ms-linear-gradient(rgba(211, 201, 191, .5), rgba(211, 201, 191, .8))
}
.main-slider .last {
width: 250px;
height: 25px;
background: -webkit-linear-gradient(rgba(211, 201, 191, .8), rgba(211, 201, 191, .5));
background: -moz-linear-gradient(top, rgba(211, 201, 191, .8) 0, rgba(211, 201, 191, .5) 100%);
background: -o-linear-gradient(top, rgba(211, 201, 191, .8) 0, rgba(211, 201, 191, .5) 100%);
background: -ms-linear-gradient(rgba(211, 201, 191, .8), rgba(211, 201, 191, .5))
}
.main-slider ul li {
height: 42px;
background-color: rgba(211, 201, 191, .8);
text-align: center
}
.main-slider ul li:not(.first,.last) {
background-color: #F7F7F8;
cursor: pointer
}
.main-slider ul:hover {
cursor: pointer
}
.arrow {
position: relative;
height: 200px;
background-color: #1da1f2
}
.arrow-l, .arrow-r {
position: absolute;
top: 50%;
margin-top: -31px;
width: 28px;
height: 62px;
font: 400 22px/62px '宋体';
background: rgba(0, 0, 0, .3);
color: #fff
}
.arrow a:hover {
color: #fff;
background: rgba(0, 0, 0, .6)
}
.arrow-r {
right: 320px
}
.arrow-l {
left: 0
}
.main-slider .current {
background-color: #F7F8F8;
height: 76px;
position: relative
}
.main-slider .current-title {
height: 30px;
font: 700 24px/30px '黑体';
color: #FF6428;
float: left;
position: absolute;
top: 10px;
left: 10px
}
.main-slider .current-content {
float: left;
position: absolute;
bottom: 10px;
left: 15px
}
.movies {
margin-top: 15px
}
.movies-type {
float: left;
width: 100%;
margin-top: 22px
}
.movies-type h1 {
font: 700 24px/55px 'Microsoft YaHei';
margin-bottom: 10px;
border-left: 5px solid #ff8b20;
padding-left: 15px
}
.movies-type ul li {
float: left;
width: 107px;
height: 40px;
background-color: #ff8b20;
margin-right: 5px;
font: 400 18px/40px 'Microsoft YaHei';
text-align: center;
color: #fff
}
.movies-type ul li:hover {
cursor: pointer;
background-color: #ffbd23
}
.animes-content, .movies-content, .tvs-content, .tvshows-content {
margin-top: 16px;
padding-left: 10px;
float: left;
text-align: center;
position: relative
}
.animes-content ul, .movies-content ul, .tvs-content ul, .tvshows-content ul {
display: table;
text-align: center
}
.animes-content, .tvs-content, .tvshows-content {
display: none
}
.animes-content ul li, .movies-content ul li, .tvs-content ul li, .tvshows-content ul li {
float: left;
width: 195px;
height: 374px;
text-align: center;
color: #fff;
background-color: #F8F8F8;
margin-right: 10px;
margin-top: 12px;
padding: 0 14px
}
.movies-img, .movies-img img {
height: 262px;
width: 195px;
float: left
}
.movies-img {
display: block;
font: 400 18px/262px 'Microsoft YaHei';
color: #fff;
cursor: pointer;
z-index: 1
}
.movies-img img {
border-radius: 10px
}
.movies-info {
margin-top: 1px;
height: 56px;
width: 195px;
background-color: #FEFEFE;
float: left;
color: #000
}
.movies-info .movies-contentname {
display: block;
height: 28px;
line-height: 28px;
width: 195px;
background-color: #fff;
font: 16px 'Microsoft YaHei'
}
.movies-info .movie-desc {
float: left;
display: block;
height: 28px;
width: 195px;
line-height: 28px;
font-size: 13px;
color: #999
}
.movie-top {
position: relative
}
.movie-vip {
float: left;
position: absolute;
width: 32px;
height: 20px;
background-color: #FC3F4C;
top: 4px;
right: 4px;
color: #fff;
font: 400 15px/20px 'Microsoft YaHei';
border-radius: 4px;
text-align: center;
cursor: pointer
}
.movie-num, .movie-score {
position: absolute;
background-color: rgba(0, 0, 0, .7);
text-align: center;
cursor: pointer
}
.movies-page ul li, .movies-play {
float: left;
border: 1px solid #2fa4e7
}
.movie-num {
width: 100px;
height: 20px;
left: 0;
bottom: -244px;
color: #FC3F4C;
line-height: 20px
}
.movie-score {
right: 10px;
bottom: -248px;
width: 38px;
height: 30px;
color: #FF5F33;
font: 14px/30px 'Microsoft YaHei';
transform: scale(1, 1.2);
-ms-transform: scale(1, 1.2);
-webkit-transform: scale(1, 1.2);
-moz-transform: scale(1, 1.2);
-o-transform: scale(1, 1.2)
}
.score-strong {
font-Size: 24px
}
.movies-play {
display: block;
font: 400 18px/40px 'Microsoft YaHei';
height: 40px;
line-height: 40px;
width: 195px;
color: #000;
cursor: pointer
}
.movies-play:hover {
background-color: #2fa4e7
}
.movies-page {
margin-top: 70px;
float: left;
position: relative
}
.movies-page ul {
position: absolute;
margin-left: -172px;
left: 50%
}
.movies-page ul li {
margin-left: -1px;
font: 400 14px/34px 'Microsoft YaHei';
height: 34px;
width: 68px;
background-color: #FEFEFE;
text-align: center
}
.movies-page ul li:hover {
background-color: #CCC;
cursor: pointer
}
使用方法：
我这里的css文件是放在css文件夹下面
里面会用到一个xframe.js文件，就相当于是一个JQuery文件，大家下载之后改为对应的名字就行，然后放在js 文件夹下面
后面就是一个index.html 文件了， 基本上将上面需要的依赖包放在同一个文件夹下面就可以运行了。
主要还是前端的一些知识，如果还有其他什么问题的，也欢迎一起交流哈。
自己来顶一个，不能就这么沉了！ 样式有问题 懒得弄 风二中 发表于 2018-10-5 22:08
样式有问题 懒得弄
感谢支持！ 都没人来支持一下吗{:301_973:} 做后端的表示只会js clovemevv 发表于 2018-10-14 10:53
做后端的表示只会js
感谢支持,请问你是做node方向的吗？ 萌新看的一脸蒙圈，，， 还可以继续优化下，努力 我来学习学习了
页:
[1]