这篇文章主要为大家详细介绍了射流研究…实现幻灯片轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现幻灯片轮播图的具体代码,供大家参考,具体内容如下
1.html
选取了五张图片放入差异中,然后是左右箭头,以及按钮,代码如下
!文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题轮播图/标题
链接href='./css/轮播图css' rel='stylesheet '
/头
身体
div id='box '
img src='./image/car-1.jpg '
img src='./image/car-2.jpg '
img src='./image/car-3.jpg '
img src='./image/car-4.jpg '
img src='./image/car-5.jpg '
div class='arrow '
a class=' left ' href=' javacript:void(0);'/a
a class=' right ' href=' javacript:void(0);'/a
/div
ul class='btn '
li class='on' slideIndex='1'1/li
li slideIndex='2'2/li
li slideIndex='3'3/li
li slideIndex='4'4/li
li slideIndex='5'5/li
/ul
/div
脚本src='./js/轮播图' js '
/脚本
/body
/html
2.css给div设置居中
将所有图片隐藏,设置箭头和小圆点的样式
代码如下
*{
边距:0;
填充:0;
文字-装饰:无;
列表样式:无;
}
#框{
宽度:800像素
高度:500像素
边距:50px自动0px
位置:相对;
}
#框图像{
宽度:800像素
高度:500像素
显示:无;
动画:淡化3s;
}
#方框。箭头{
宽度:800像素
高度:80px
位置:绝对;
top:50%;
边距-顶部:-40px;
}
#方框。箭头。左,右{
显示:内嵌-块;
行高:80px
宽度:50px
高度:80px
}
#方框。箭头。左:悬停{
背景:rgba(0,0,0,0.8);
}
#方框。箭头。右:悬停{
背景:rgba(0,0,0,0.8);
}
#方框。箭头。右{
文本对齐:右对齐;
位置:绝对;
右:0;
}
#方框。箭头一个{
字体大小:50px
颜色:# ffffff
}
#方框btn{
位置:绝对;
底部:10px
左:50%;
左边距:-98.47 px;
文本对齐:居中;
}
#方框100 . BTN李
文本对齐:居中;
保证金:0 5px
填充:10px
浮动:左;
背景:白色;
边界半径:20%;
光标:指针;
过渡:背景2s缓和;
}
#方框btn .在{
背景:# 000;
颜色:白色;
}
@关键帧淡化{
从{
不透明度:4;
}
到{
不透明度:1;
}
}
3.js部分
射流研究…设定让当前图片显示显示:块,其他图片隐藏显示:无;
射流研究…代码如下
window.onload=function () {
var left=文档。getelementsbyclassname(' left ')[0];
var right=文档。getelementsbyclassname(' right ')[0];
var BTN=文档。getelementsbyclassname(' BTN ')[0].getElementsByTagName(' Li ');
var box=文档。getelementbyid(' box ');
var滑动指数=1;
定义变量指数=1;
定义变量定时器;
//图片切换函数
放映幻灯片(幻灯片索引);
函数放映幻灯片(n) {
var slides=文档。getelementbyid(' box ').getElementsByTagName(' img ');
for(var I=0;伊斯利德斯。长度;i ){
幻灯片[I]。风格。display=' none
btn[i].类名=" ";
}
幻灯片[幻灯片索引-1]。风格。display=' block
幻灯片索引-1。"开"
}
//箭头切换
left.onclick=function () {
if(slideIndex1) {
幻灯片索引-;
放映幻灯片(幻灯片索引);
}否则{
滑动指数=5;
放映幻灯片(幻灯片索引);
}
}
right.onclick=function () {
if(slideIndex5) {
幻灯片索引
放映幻灯片(幻灯片索引);
}否则{
滑动指数=1;
放映幻灯片(幻灯片索引);
}
}
//btn切换
for(var I=0;长度)
btn[i].onclick=function () {
var myslideIndex=this。get属性(“幻灯片索引”);
//var myindex=parse int(this。get属性(' index ');
slideIndex=myslideIndex
放映幻灯片(幻灯片索引);
}
}
//自动播放
函数播放(){
timer=setInterval(function () {
没错。onclick();
},4000);
}
函数stop() {
间隙(定时器);
}
box.onmouseout=play
box.onmouseover=stop
play();
}
精彩专题分享:jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。