基于jQuery实现滚动切换效果

这篇文章主要为大家详细介绍了基于jQuery实现滚动切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

仿锋利的Jquery案例做的一个滚动切换效果，供大家参考，具体内容如下

效果如下图:

前台HTML代码如下:

   滚动图   热播电视剧
  ●
●
●

RollControl.css代码如下:

 body { margin: 0px; padding: 0px; } #view_menu { width: 600px; height: 30px; line-height: 30px; cursor: default; } #view_menu_title { float: left; font-family: 'Microsoft YaHei'; width: 150px; text-align: center; } #view_menu_trends { float: left; line-height: 30px; color: #99CC99; font-size: 10px; } .currentTrends { color: #009933; } #view_menu_trends ul { list-style: none; margin: 0px; padding: 0px; } #view_menu_trends ul li { text-align: center; float: left; width: 15px; } #view_menu_control { float: left; width: 100px; height: 30px; text-align: center; } #view_menu_control img { width: 25px; height: 25px; line-height: 30px; cursor: pointer; } #view_content { width: 548px; height: 178px; position: relative; overflow: hidden; border: 1px solid #CCCCCC; } #view_content_fixed { position: absolute; width: 2500px; } #view_content_fixed img { cursor: pointer; } #view_content ul { margin: 0px; position: absolute; padding: 0px; } #view_content ul li { margin: 0px; padding: 0px; float: left; padding: 8px; list-style: none; display: inline; }

.view_content_fixed下的SPAN标签是为了加标题的

效果图如下: