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

Posted 2023-04-25

类似hao123.com左侧的动态图片框，可能里面有数张图片，过数秒钟自动切换（切换的同时有淡化过渡特效），同时鼠标移动到图片的左侧和右侧都会出现左右箭头控制切换。

自己没能找到实例，网站源代码太多分析不明白，请教在自己网页中实现类似的效果的方法，谢谢！
也可参阅www.115.com首页背景图片的特效。

大概的主程序

<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> 参考技术A 这个是用JS或者是Jquery来实现。单独用html还实现不了，当然我这里说的html是指html 4 参考技术B 大概的主程序

<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> 参考技术C 用图片轮播，js或jq

在网页制作中，怎么把图片应用为动态HTML效果？当鼠标悬停时图片1换成图片2，要怎么设置？

具体操作

Dreamweaver中可以自动设置的
工具栏中 “插入”-“图片对象”-“鼠标经过图片”
如果是用CSS实现的话，可以在需要设置动态效果的标签中使用伪类:hover
具体怎么用，就看你对CSS的掌握程度了。
PS：该方法不适用于IE6，其他的可以。
再有就是用JavaScript来实现了。
对于初学者的话，直接用Dreamweaver来实现比较容易。
后面两种方法涉及到的东西比较多。 参考技术A 首先 要明确 你用的 是背景图 而不是 img插入的（插入的用js 不过你的问题我觉得应该是背景）

对于背景的话不用js

background:url(../images/imgchange.gif) no-repeat scroll 0 0 transparent; width:117px; height:57px; display:block
changeA:hover background-position:-117px

<a class="imgchange changeA"></a>

这应该能懂吧？ 还有就是 i6下 可能不兼容~~~ 参考技术B 百度搜索：js 鼠标经过 换图