原生js图片全屏轮播切换左右按钮控制全屏图片切换代码



164 655 219



特效描述:原生js 全屏轮播切换 左右按钮控制 全屏图片切换,能够控制图片数量的全屏图片轮播代码,js特效

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript"  src="js/index.js"></script>

3. 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, "新宋体";}
</style>
<link  href="css/style.css" rel="stylesheet" type="text/css">	
<div class="focus" id="focus">
	<div id="focus_m" class="focus_m">
		<ul>
			<li style="display:block;background:url('images/1.jpg') 0px 50% no-repeat;"></li>
			<li style="display:none;background:url('images/2.jpg') 0px 50% no-repeat;"></li>
			<li style="display:none;background:url('images/3.jpg') 0px 50% no-repeat;"></li>
			<li style="display:none;background:url('images/4.jpg') 0px 50% no-repeat;"></li>
			<li style="display:none;background:url('images/5.jpg') 0px 50% no-repeat;" onClick="javascript:window.open('http://www.17sucai.com/');"></li> 
		</ul>
	</div>
	<a href="javascript:;" class="focus_l" id="focus_l" title="上一张"><b></b><span></span></a>
	<a href="javascript:;" class="focus_r" id="focus_r" title="下一张"><b></b><span></span></a>
</div>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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