本文实例为大家分享了JavaScript实现旋转木马轮播图的具体代码,供大家参考,具体内容如下
<强> html代码段
图片自己添加,或者使用本人的上传照片,拉到最下面即可看见
& lt; div类="包装" id=鞍啊北?
& lt; div类="幻灯片" id=盎玫破北?
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic1.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic2.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic3.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic4.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic5.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt;/ul>
& lt; div类="箭" id=凹贰北?
& lt; a href=" javascript:,“class="上一页" id=" arrLeft祝辞& lt;/a>
& lt; a href=" javascript:;”class=跋乱桓觥眎d=癮rrRight”祝辞& lt;/a>
& lt;/div>
& lt;/div>
& lt;/div>
<强> css代码段:
初始化重置
引用、身体、按钮、dd, dl, dt,自定义字段,形式,h2、h3, h4, h5,类推,h7,人力资源,输入,传说,li ol, p, pre, td,文本区域,th, ul {
保证金:0;
填充:0
｝
身体、按钮、输入、选择textarea {
字体:12 px/1.5“微软YaHei”,“微软雅黑”,SimSun,“宋体”,无衬线;
颜色:# 666;
｝
ol, ul {
list-style:没有;
｝
一个{
文字修饰:没有;
｝
自定义字段,img {
边界:0;
vertical-align:最高;
｝
一、输入、按钮、选择、textarea {
大纲:没有;
｝
一个按钮{
光标:指针;
｝
.wrap {
宽度:1200 px;
保证金:100 px的汽车;
｝
.slide {
身高:500 px;
位置:相对;
｝
李.slide {
位置:绝对的;
左:200 px;
上图:0;
｝
李.slide img {
宽度:100%;
｝
.arrow {
透明度:0;
位置:绝对的;
上图:50%;
z - index: 1000;
宽度:100%;
｝
.prev第二{
宽度:76 px;
身高:112 px;
位置:绝对的;
z - index: 99;
｝
.prev {
左:0;
背景:url(. ./图片/prev.png)不再重演;
｝
第二{
右:0;
背景图片:url(. ./图片/next.png);
}
<强> js代码段:
这个是封装好的的js代码,直接引用即可
函数动画(obj、json、fn) {
clearInterval (obj.timer);
obj。计时器=setInterval(函数(){
var=true标记;
在json (var k) {
如果(k===安煌该鞫取?{
var=getStyle领袖(obj, k) * 100;
var目标=json [k] * 100;
var=(目标-领袖)/10步;
一步=一步比;0 & # 63;Math.ceil(步骤):Math.floor(步骤);
领袖=领袖+步骤;
obj。风格[k]=领袖/100;
}else if (k===皕Index”) {
obj.style。zIndex=json [k];
其他}{
var领袖=方法(getStyle (obj, k)) | | 0;
var目标=json [k];
var=(目标-领袖)/10步;
一步=一步比;0 & # 63;Math.ceil(步骤):Math.floor(步骤);
领袖=领袖+步骤;
obj。风格[k]=领袖+“px”;
｝
如果(领袖!=目标){
国旗=false;
｝
｝
如果(国旗){
clearInterval (obj.timer);
如果(fn) {
fn ();
｝
｝
},15);
｝
函数getStyle (obj, attr) {
如果(window.getComputedStyle) {
返回窗口。getComputedStyle (obj, null) [attr);
其他}{
返回obj.currentStyle [attr);
｝
}
定义onload函数,获取每一个对象,设置鼠标经过事件,鼠标经过轮播图让箭头渐渐地显示鼠标离开渐渐消失,然后。设置图片位置(给对象赋值)
窗口。onload=function () {//警报(“外部的JS”);//找人
var包=. getelementbyid(“包装”);
var箭=. getelementbyid(“箭头”);
var arrLeft=. getelementbyid (“arrLeft”);
var arrRight=. getelementbyid (“arrRight”);
var滑=. getelementbyid(“幻灯片”);
var ul=slide.children [0];
var lis=ul.children;//所有图片//1。鼠标经过轮播图让箭头渐渐地显示鼠标离开渐渐消失
包装。onmouseover=function () {
“不透明度”动画(箭头,{:1});
}；
包装。onmouseout=function () {
动画(箭头,{“不透明度”:0});
}；//2 .设置图片位置
var配置=[
｛
“宽度”:400年,
“顶级”:20,
“左”:50,
“不透明度”:0.2,
“zIndex”: 2
},//0
｛
“宽度”:600年,
“顶级”:70年,
“左”:0,
“不透明度”:0.8,
“zIndex”: 3
},//1
｛
“宽度”:800年,
“顶级”:100年,
“左”:200年,
“不透明度”:1、
“zIndex”: 4
},//2
｛
宽度:600年,
上图:70年,
左:600年,
透明度:0.8,
zIndex: 3
},//3
｛
“宽度”:400年,
“顶级”:20,
“左”:750年,
“不透明度”:0.2,
“zIndex”: 2
}//4
];//其实就是一个配置单规定了每张图片的大小位置层级透明度//获取页面上所有的李让他们从当前的位置以动画的效果到指定的位置
函数分配(){
(var=0;我& lt;lis.length;我+ +){
动画(lis)[我],配置[我],函数(){
国旗=true;//动画执行完成后重新打开阀门
});
｝
｝
分配();//3 .点击箭头旋转//点击右箭头
arrRight。onclick=function () {
如果(国旗){
国旗=false;//关闭阀门//把开始的元素放到最后
config.push (config.shift ());
分配();
｝
}；//点击左箭头
arrLeft。onclick=function () {
如果(国旗){
国旗=false;//把最后的元素放到开始
config.unshift (config.pop ());
分配();
｝
}；//4 .添加节流阀
var国旗=true;//表示阀门是打开的
