jQuery仿搜狐畅言网站全屏图片切换按钮控制幻灯片轮播切换



151 603 202



特效描述:jQuery 全屏图片切换 按钮控制 幻灯片轮播切换,全屏图片切换按钮控制幻灯片轮播切换

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css"/>

2. 引入JS

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

3. HTML代码

<div class="focus-bg">
	<div class="focus">
		<div id="carousel_container" class="con">
			<div class="pt pt_cur" style="display:block">
				<img src="images/f01.jpg" width="1000" height="506" alt=""/>
				<div class="link-wrap" style="margin:-420px 0 0 664px;">
					<span><a href="http://www.dijiuzhanzhang.com/" target="_blank"></a></span><em><a href="http://www.dijiuzhanzhang.com/"></a></em>
				</div>
			</div>
			<div class="pt">
				<img src="images/f02.jpg" width="1000" height="506" alt=""/>
				<div class="link-wrap" style="margin:-166px 0 0 664px;">
					<span><a href="http://www.dijiuzhanzhang.com/" target="_blank"></a></span><em><a href="http://www.dijiuzhanzhang.com/"></a></em>
				</div>
			</div>
			<div class="pt">
				<img src="images/f03.jpg" width="1000" height="506" alt=""/>
				<div class="link-wrap" style="margin:-136px 0 0 0;">
					<span><a href="http://www.dijiuzhanzhang.com/" target="_blank"></a></span><em><a href="http://www.dijiuzhanzhang.com/"></a></em>
				</div>
			</div>
			<div class="pt">
				<img src="images/f04.jpg" width="1000" height="506" alt=""/>
				<div class="link-wrap" style="margin:-430px 0 0 664px;">
					<span><a href="http://www.dijiuzhanzhang.com/" target="_blank"></a></span><em><a href="http://www.dijiuzhanzhang.com/"></a></em>
				</div>
			</div>
			<div class="pt">
				<img src="images/f05.jpg" width="1000" height="506" alt=""/>
				<div class="link-wrap" style="margin:-156px 0 0 664px;">
					<span><a href="http://www.dijiuzhanzhang.com/" target="_blank"></a></span><em><a href="http://www.dijiuzhanzhang.com/"></a></em>
				</div>
			</div>
		</div>
		<div class="btns">
			<a id="carousel_up" class="up uN" href="javascript:void(0)" onClick="carouselPrevious()"></a>
			<a id="carousel_down" class="down" href="javascript:void(0)" onClick="carouselNext()"></a>
		</div>
		<div class="autoS">
			<ul id="carousel_point">
				<li turn="1" class="libg"></li>
				<li turn="2"></li>
				<li turn="3"></li>
				<li turn="4"></li>
				<li turn="5"></li>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">
var carousel_taskId;
(function(){
	bindCarousel();
	carousel_taskId = setTimeout(carouselNext,4000);
})(jQuery)
</script>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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