您的位置:首页 - jQuery
jquery图片上下自动或箭头控制滚动
先体验效果:http://keleyi.com/keleyi/phtml/image/5.htm

以下是源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片上下箭头滚动切换-柯乐义</title><base target="_blank" />
<meta name="description" content="jquery全屏焦点图片滚动,图片上下滚动通过设置上下按钮来控制图片上下滚动,支持图片暂停和轮播的焦点图片滚动。柯乐义" />
<link href="5/fullfoucs.keleyi.com.css" rel="stylesheet" />
<script src="http://keleyi.com/keleyi/pmedia/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="http://keleyi.com/keleyi/phtml/image/5/jquery.fullfoucs.keleyi.com.js" type="text/javascript"></script>
</head>
<body>
<div class="frame_keleyi_com">
<div class="scroll_keleyi_com">
<div id="flash_control">
<div class="flash-control-wrp">
<a class="icon-up"><i></i></a>
<a class="icon-play"><i></i></a>
<a class="icon-pause"><i></i></a>
<a class="icon-down"><i></i></a>
</div>
</div>
<ol id="index_ex_slide" class="flash">
<li class="default"><a href="http://keleyi.com/a/bjac/532bedbffca1affa.htm" title="单行文字间歇向上滚动,放上光标就停,移开继续滚动"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" alt="keleyi.com" /></a></li>
<li><a href="http://keleyi.com/dev/453467666cab56d0.htm" title="jquery图片轮播切换"><img src="http://keleyi.com/keleyi/phtml/image/img/viper_1.jpg" alt="keleyi.com" /></a></li>
<li><a href="http://keleyi.com/a/bjac/141932b419e08101.htm" title="jquery使用ColorBox弹出图片组浏览层"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" alt="keleyi.com" /></a></li>
<li><a href="http://keleyi.com/a/bjac/gucmqug3.htm" title="原文"><img src="http://keleyi.com/keleyi/phtml/image/img/viper_corner.jpg" alt="keleyi.com" /></a></li>
</ol>
</div>
</div>
<script type="text/javascript">
$.fullFoucs({
direction: 'down'
});
</script>


<div style="background-color:Red; width:100%;height:150px;">欢迎</div>
<div style="background-color:Yellow; width:100%;height:150px;">hi</div>
<div style="background-color:Silver; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Blue; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Olive; width:100%;height:150px;">柯乐义 返回顶部</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http://keleyi.com/a/bjac/3n8d6g5f.htm">jstree树形菜单</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Orange; width:100%;height:150px;">完整代码</div>
</body>
</html>
本站导航
相关文章
柯乐义 Copyright© keleyi.com