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

发布网友 发布时间:2022-04-24 12:22

我来回答

3个回答

热心网友 时间:2022-04-20 11:07

大概的主程序

<div style="margin:auto; width: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:635px; height:360px; overflow: 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:635px; height:360px; overflow: 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:635px; height:360px; overflow: 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>

热心网友 时间:2022-04-20 12:25

这个是用JS或者是Jquery来实现。单独用html还实现不了,当然我这里说的html是指html 4

热心网友 时间:2022-04-20 15:51

用图片轮播,js或jq

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com