js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS广告代码 > JS幻灯片

jquery实现全屏图片左右滚动预览焦点图特效

发布时间:2015-08-27 00:18:58    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现全屏图片左右滚动预览焦点图特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>jquery实现全屏图片左右预览焦点图特效 - js特效代码网</title>    
<script type="text/javascript" src="js/jquery.js"></script>    
<script type="text/javascript" src="js/superslide.2.1.js"></script>    
<style type="text/css">		    
	*{margin:0;padding:0;list-style:none}    
	body{background:#fff;font:normal 12px/22px 宋体;width:100%}    
	img{border:0}    
	a{text-decoration:none;color:#333}    
	a:hover{color:#1974A1}    
	#footer{text-align:center}    
	.slider{width:100%;min-width:980px;height:335px;position:relative;overflow:hidden;background:#fff;text-align:center}    
	.slider .bd{width:980px;position:absolute;left:50%;margin-left:-490px}    
	.slider .bd li{width:980px;overflow:hidden}    
	.slider .bd li img{display:block;width:980px;height:335px}    
	.slider .tempWrap{overflow:visible !important}    
	.slider .tempWrap ul{margin-left:-980px !important}    
	.slider .hd{position:absolute;width:100%;left:0;z-index:1;height:8px;bottom:20px;text-align:center}    
	.slider .hd li{display:inline-block;*display:inline;zoom:1;width:8px;height:8px;line-height:99px;overflow:hidden;background:url(images/slider-btn.png) 0 -10px no-repeat;margin:0 5px;cursor:pointer;filter:alpha(opacity=60);opacity:0.6}    
	.slider .hd li.on{background-position:0 0;filter:alpha(opacity=100);opacity:1}    
	.slider .pnBtn{position:absolute;z-index:1;top:0;width:100%;height:335px;cursor:pointer}    
	.slider .prev{left:-50%;margin-left:-490px}    
	.slider .next{left:50%;margin-left:490px}    
	.slider .pnBtn .blackBg{display:block;position:absolute;left:0;top:0;width:100%;height:335px;background:#000;filter:alpha(opacity=50);opacity:0.5}    
	.slider .pnBtn .arrow{display:none;position:absolute;top:0;z-index:1;width:60px;height:335px}    
	.slider .pnBtn .arrow:hover{filter:alpha(opacity=60);opacity:0.6}    
	.slider .prev .arrow{right:0;background:url(images/slider-arrow.png) -120px 0 no-repeat}    
	.slider .next .arrow{left:0;background:url(images/slider-arrow.png) 0 0 no-repeat}    
</style>    
</head>    
<body>    
<div class="slider">    
<div class="bd">    
<ul>    
<li><a target="_blank" href="http://www.jstxdm.com"><img src="images/1.jpg" /></a></li>    
<li><a target="_blank" href="http://www.jstxdm.com"><img src="images/2.jpg" /></a></li>    
<li><a target="_blank" href="http://www.jstxdm.com"><img src="images/3.jpg" /></a></li>    
<li><a target="_blank" href="http://www.jstxdm.com"><img src="images/4.jpg" /></a></li>    
</ul>    
</div>    
<div class="hd">    
<ul>    
</ul>    
</div>    
<div class="pnBtn prev"> <span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a> </div>    
<div class="pnBtn next"> <span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a> </div>    
</div>    
<script type="text/javascript">    
jQuery(".slider .bd li").first().before( jQuery(".slider .bd li").last() );    
jQuery(".slider").hover(function(){ jQuery(this).find(".arrow").stop(true,true).fadeIn(300) },function(){ jQuery(this).find(".arrow").fadeOut(300) });				jQuery(".slider").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"leftLoop",autoPlay:true, vis:3,autoPage:true, trigger:"click"});    
</script>    
</body>    
</html>



焦点图特效 滚动预览

一款jQuery跨平台并且带触摸移动端焦点图特效

仿OPPO官方商城jquery焦点图特效

jquery仿淘宝新版首页焦点图特效

jQuery仿迅雷动漫左右滚动焦点图特效

jquery实现全屏图片左右滚动预览焦点图特效

jquery左右切换,带文字说明的焦点图特效

jquery竖向tab切换焦点图特效

JS仿腾讯娱乐图片频道满屏左右切换焦点图特效

jQuery实现可自动播放焦点图特效

js仿腾讯视频网站焦点图特效

jQuery仿2012QQ商城焦点图特效

jQuery仿百度统计可自动播放焦点图特效

jquery quake Slider一款集成多种超炫切换效果的焦点图特效

jquery仿2014南宁45届世锦赛首页焦点图特效

jquery纯色调支持缩略图和描述的焦点图特效

jquery仿暴风影音官方网站焦点图特效

jquery实现带按钮控制轮播焦点图特效

jquery实现带缩略图可触摸焦点图特效

jQuery大图多屏首页焦点图特效

jQuery实现五屏上下轮播焦点图特效