jquery制作左右按钮控制焦点图片满屏滚动



163 651 218



特效描述:jquery 左右按钮控制 焦点图 满屏滚动,jquery图片滚动效果,制作一个非常大气简洁的banner焦点图满屏左右滚动切换效果,点击左右两侧按钮控制图片满屏滚动切换。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif , "宋体";}
/* foucs */
#foucs{background:#000;height:528px;overflow:hidden;position:relative;}
#foucs div.main{display:none;cursor:pointer}
#foucs .element{display:none;position:absolute;}
#foucs .navi{display:block;width:80px;height:80px;line-height:99em;overflow:hidden;background:url(images/arrow-btn.png) no-repeat;top:200px;}
#foucs .left{left:0;background-position:0 0;}
#foucs .left:hover{background-position:0 -80px;}
#foucs .right{right:0;background-position:-80px 0;}
#foucs .right:hover{background-position:-80px -80px;}
</style>
<div id="foucs">
	<div class="element pict"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/00.jpg" width="996" height="528" alt="香车美女墙纸" /></a></div>
	<div class="element pict"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/01.jpg" width="996" height="528" alt="香车美女墙纸" /></a></div>
	<div class="element pict main"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/02.jpg" width="996" height="528" alt="香车美女墙纸" /></a></div>
	<div class="element pict"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/03.jpg" width="996" height="528" alt="香车美女墙纸" /></a></div>
	<div class="element pict"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/04.jpg" width="996" height="528" alt="香车美女墙纸" /></a></div>
	<div class="element pict"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/05.jpg" width="996" height="528" alt="香车美女墙纸" /></a></div>
	<a href="javascript:void(0);" class="element navi left">向左</a>
	<a href="javascript:void(0);" class="element navi right">向右</a>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动流动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 全屏焦点图 全屏切换 切换按钮 宽屏全屏满屏 form表单 焦点图幻灯片 图片全屏 图片滚动 图片切换 图片轮播 自动滚动图片轮播 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到