先瞄一眼js轮播效果图
代码:
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; style>
*{填充:0;保证金:0;}
#内容{宽度:400 px;高度:500 px;保证金:10 px汽车;位置:相对;边界:1 px固体# 000;颜色:红色,字体大小:20 px;}
#,#{底部位置:绝对的,宽度:400 px;高度:30 px;行高:30 px; text-align:中心;字体大小:20 px;背景:# f1f1f1;}
#底{底:0;光标:指针;}
#底跨度{显示:inline-block;宽度:15 px;高度:15 px; border - radius: 15 px;背景:# 000;text-align:中心;行高:15 px;位置:相对;}
#底。活跃的{背景:# FFFF33;}
#底跨度div{位置:绝对的,宽度:110 px;高度:110 px;最高:-125 px;左:-46 px;显示:没有;}
#底跨度div:{内容:”后,位置:绝对的,左:49 px;底:-12 px; border-top: 7 px固体# fff;边境:5 px固体透明;边界底部:5 px固体透明;border-left: 5 px固体透明;}
#底跨度img{宽度:100 px;高度:100 px;边界:5 px固体# fff;}
#,#对{位置:绝对的,宽度:60 px;高度:60 px; border - radius: 60 px;行高:60 px;字体大小:60 px;背景:# FFFF66;粗细:大胆;text-align:中心;:50%;margin-top: -25 px;颜色:# fff;游标:指针;过滤器(不透明度:70);不透明度:0.7;}
#左:悬停,#:悬停{过滤器(不透明度:100);不透明度:1;}
#左{左:0 px;}
#吧{吧:0 px;}
# img{宽度:400 px;高度:500 px;}
& lt;/style>
& lt; script>
窗口。onload=function () {
var=$(“底部”),标题=$('标题'),
img=$ (img),左=$('左'),右=$('正确');
var aSpan=bottom.getElementsByTagName(“跨度”);
var aDiv=bottom.getElementsByTagName (div);
var arr=['图片一”,“图片二”,“图片三”,“图片四”);
var num=0;//初始化
picTab ();//点击下一张
正确的。onclick=function () {
如果(num===aDiv。全国矿工工会长度- 1)=1;
num + +;
picTab ();
}//点击上一张
离开了。onclick=function () {
如果(num===0) num=aDiv.length;
num -;
picTab ();
}
函数picTab () {
标题。innerHTML=arr (num);
img。src=" https://www.yisu.com/zixun/img/" + (num + 1) + . png”;
(var=0;我& lt;aSpan.length;我+ +){
aSpan[我]。className=";
}
aSpan (num)。className=盎钤尽?
}//鼠标移入移出显示缩略图
(var=0;我& lt;aSpan.length;我+ +){
aSpan[我]。指数=我;
aSpan[我]。onmouseover=function () {
aDiv this.index .style。显示=翱椤?
}
aSpan[我]。onmouseout=function () {
aDiv this.index .style。显示='没有';
}
aSpan[我]。onclick=function () {
num=this.index;
picTab ();
}
}
函数(id)美元{返回. getelementbyid (id);}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=澳谌荨痹?
& lt; div id="标题"祝辞带缩略图的轮播& lt;/div>
& lt; div id=白蟆弊４? lt; & lt;/div>
& lt; div id=罢贰钡淖４亲４? lt;/div>
& lt; div id=暗撞俊北?
& lt; span> & lt; div> & lt; img src=" https://www.yisu.com/zixun/img/1.png "/祝辞& lt;/div> & lt;/span>
& lt; span> & lt; div> & lt; img src=" https://www.yisu.com/zixun/img/2.png "/祝辞& lt;/div> & lt;/span>
& lt; span> & lt; div> & lt; img src=" https://www.yisu.com/zixun/img/3.png "/祝辞& lt;/div> & lt;/span>
& lt; span> & lt; div> & lt; img src=" https://www.yisu.com/zixun/img/4.png "/祝辞& lt;/div> & lt;/span>
& lt;/div>
& lt; img src=" id=癷mg/比;
& lt;/div>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
