HTML网页设计中可自切换的动态图片框如何制作?

HTML网页设计中可自切换的动态图片框如何制作?,第1张

大概的主程序

<div style="margin:autowidth:635px">

<div class="FocusPic">

<div class="FP_arr_left" id="FS_arr_left_01"></div>

<div class="FP_arr_right" id="FS_arr_right_01"></div>

<div class="FP_NumList" id="FS_numList_01"></div>

<div class="FP_cont" id="FS_Cont_01">

<div class="FP_pic">

<div style="width:635pxheight:360pxoverflow: hidden"><a href="#" target="_blank"><img src="#" galleryImg="no" alt="" width="635"/></a></div>

<div class="FP_tit_bg"></div>

<div class="FP_tit_txt"><a href="#" target="_blank">示例1</a></div>

<div class="FP_tit_ico"></div>

</div>

<div class="FP_pic">

<div style="width:635pxheight:360pxoverflow: hidden"><a href="#" target="_blank"><img src="#" galleryImg="no" alt="" width="635"/></a></div>

<div class="FP_tit_bg"></div>

<div class="FP_tit_txt"><a href="#" target="_blank">示例2</a></div>

<div class="FP_tit_ico"></div>

</div>

<div class="FP_pic">

<div style="width:635pxheight:360pxoverflow: hidden"><a href="#" target="_blank"><img src="#" galleryImg="no" alt="" width="635"/></a></div>

<div class="FP_tit_bg"></div>

<div class="FP_tit_txt"><a href="#" target="_blank">示例3</a></div>

<div class="FP_tit_ico"></div>

</div>

<script language="javascript" type="text/javascript">

var focusScroll_01 = new ScrollPic()

focusScroll_01.scrollContId = "FS_Cont_01"//内容容器IDfocusScroll_01.arrLeftId = "FS_arr_left_01"//左箭头IDfocusScroll_01.arrRightId = "FS_arr_right_01"//右箭头IDfocusScroll_01.dotListId = "FS_numList_01"//点列表IDfocusScroll_01.dotClassName = "dot_list"//点classNamefocusScroll_01.dotOnClassName= "dot_list selected"//当前点classNamefocusScroll_01.listType= ""//列表类型(number:数字,其它为空)focusScroll_01.listEvent = "onmouseover"//切换事件focusScroll_01.frameWidth = 635//显示框宽度focusScroll_01.pageWidth = 635//翻页宽度focusScroll_01.upright= false//垂直滚动focusScroll_01.speed = 20//移动速度(单位毫秒,越小越快)focusScroll_01.space = 20//每次移动像素(单位px,越大越快)focusScroll_01.autoPlay = true//自动播放focusScroll_01.autoPlayTime = 3//自动播放间隔时间(秒)focusScroll_01.initialize()//初始化</script>

向右的箭头

arrow-right{ width: 0height: 0border-top: 17px dashed transparentborder-bottom: 17px dashed transparentborder-left: 15px solid #777font-sie: 0}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7453073.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-05
下一篇 2023-04-05

发表评论

登录后才能评论

评论列表(0条)

保存