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

js实现10屏带缩略图和标题的幻灯片轮播特效

发布时间:2015-08-29 15:40:33    您是第0位浏览者

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

js实现10屏带缩略图和标题的幻灯片轮播特效
<!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=gb2312" />    
<title>js实现10屏带缩略图和标题的幻灯片轮播特效</title>    
<LINK media=all href="css/css.css" type=text/css rel=stylesheet />    
<SCRIPT src="js/js.js" type=text/javascript></SCRIPT>    
</HEAD>    
<BODY>    
<DIV class=box>    
<DIV class=scrollimg2>    
<DIV id=SwitchBigPic>    
<DIV class=scrollimg2_bigimg id=showDiv_0 style="DISPLAY: block">    
<DIV><A href="http://www.jstxdm.com" ><IMG id=bigpic_0 src="images/img01.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_0 ></DIV>    
<A class=scrollimg2_txt id=title_0  href="http://www.jstxdm.com" >《倩女幽魂》经典魔幻武侠改编 古天乐、刘亦菲、余少群人鬼三角恋</A> </DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_1>    
<DIV><A href="http://www.jstxdm.com" ><IMG id=bigpic_1  src="images/img02.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_1></DIV>    
<A class=scrollimg2_txt id=title_1  href="http://www.jstxdm.com" >《夺帅》港产动作三级片 洪金宝、任达华、吴京血腥杀戮,万劫不复 </A></DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_2>    
<DIV><A  href="http://www.jstxdm.com" ><IMG id=bigpic_2 src="images/img03.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_2 ></DIV>    
<A class=scrollimg2_txt id=title_2 title=""  href="http://www.jstxdm.com" >北条司经典同名漫画作品改编 韩版&ldquo;道明寺&rdquo;打破冷酷形象搞笑出演</A> </DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_3>    
<DIV><A  href="http://www.jstxdm.com" ><IMG id=bigpic_3  src="images/img04.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_3 ></DIV>    
<A class=scrollimg2_txt id=title_3  href="http://www.jstxdm.com" >《家,N次方》80后视角看重组家庭 赵宝刚携手宋丹丹进入第3次婚姻 </A></DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_4>    
<DIV><A href="http://www.jstxdm.com" rel="external nofollow" ><IMG id=bigpic_4 src="images/img05.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_4 ></DIV>    
<A class=scrollimg2_txt id=title_4  href="http://www.jstxdm.com"  >动感夏日炫彩T恤全场29元</A> </DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_5>    
<DIV><A href="http://www.jstxdm.com" rel="external nofollow" ><IMG id=bigpic_5  src="images/img06.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_5 ></DIV>    
<A class=scrollimg2_txt id=title_5  href="#"  >好乐买李宁特卖场全场99元</A> </DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_6>    
<DIV><A href="http://www.jstxdm.com/" rel="external nofollow" ><IMG id=bigpic_6  src="images/img07.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_6 ></DIV>    
<A class=scrollimg2_txt id=title_6 href="#" >范冰冰:时尚网购 就上梦芭莎!注册即送100元</A> </DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_7>    
<DIV><A  href="http://www.jstxdm.com" ><IMG id=bigpic_7  src="images/img08.jpg" /><SPAN class=scrollimg2_hd>高清标识</SPAN></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_7></DIV>    
<A class=scrollimg2_txt id=title_7  href="http://www.jstxdm.com" >经典电影《魔鬼总动员》阿诺施瓦辛格、莎朗斯通主演科幻动作片</A> </DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_8>    
<DIV><A href="#" ><IMG id=bigpic_8 src="images/img09.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_8 ></DIV>    
<A class=scrollimg2_txt id=title_8 href="http://www.jstxdm.com" >《关云长》迅雷独家首发,高清大片至尊专享,看甄子丹姜文双雄交锋!</A> </DIV>    
<DIV class=scrollimg2_bigimg id=showDiv_9>    
<DIV><A href="http://www.jstxdm.com" ><IMG id=bigpic_9 src="images/img10.jpg" /></A></DIV>    
<DIV class=scrollimg2_bg id=title_bg_9 ></DIV>    
<A 
    
class=scrollimg2_txt id=title_9  href="http://www.jstxdm.com" >凯迪拉克SRX微电影II《66号公路》全版献映 </A></DIV>    
</DIV>    
<DIV></DIV>    
<DIV class=scrollimg2_tigger>    
<DIV class=scrollimg2_tigger_hoverbg id=bigHover></DIV>    
<UL>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_0 src="images/img01s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_1  src="images/img02s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_2 src="images/img03s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_3  src="images/img04s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_4 src="images/img05s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_5 src="images/img06s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_6 src="images/img07s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_7 src="images/img08s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_8 src="images/img09s.jpg" /></A> </LI>    
<LI><A href="http://www.jstxdm.com" ><IMG id=big_pic_nav_on_9 src="images/img10s.jpg" /></A> </LI>    
</UL>    
<UL class=scrollimg2_tigger_link>    
<LI><A id=big_pic_nav_0 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_1 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_2 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_3 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_4 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_5 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_6 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_7 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_8 title="" onclick=document.body.focus() href="http://www.jstxdm.com" ><IMG src="images/img_default.gif" /></A> </LI>    
<LI><A id=big_pic_nav_9 title="" onclick=document.body.focus() href="http://www.jstxdm.com/" ><IMG src="images/img_default.gif" /></A></LI>    
</UL>    
</DIV>    
</DIV>    
</DIV>    
<SCRIPT>    
 	var MovieRecom={	
    
 			step:(62+6),    
 			hover:"bigHover",       //hover    
 			bigpic:"SwitchBigPic",	//大图DIV之ID通用部分    
 			smallpic:"big_pic_nav",//小图之ID通用部分    
 			selectstyle:"currA",	//小图被选中之后的CSS    
 			pictxt:"",	//配套图片文字    
 			totalcount:10,				//图片数量    
 			autotimeintval:5000,    
 			objname:"MovieRecom",	//对象名称    
 			css:"display:none;position:absolute;left:0;top:0;width:694px;height:261px;overflow:hidden;" //css    
 		};    
 	BigNews.init(MovieRecom);    
</SCRIPT>    
</body>    
</html>



幻灯片 缩略图 轮播

js实现轮播幻灯片3D特效并且可以左右翻页

js实现10屏带缩略图和标题的幻灯片轮播特效

JS仿360旅游首页幻灯片效果代码

JS带图片标题自动播放的幻灯片特效

JS视差滑块幻灯片特效

jQuery自动播放淡入淡出的幻灯片特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿淘宝首页缓冲幻灯片特效

jquery实现4款自定义图片切换幻灯片js特效

jquery仿支付宝全屏图片幻灯片淡出淡进切换特效

jquery实现婚纱摄影网站宽屏图片幻灯片轮播切换特效

jquery实现 ChinaJoy2014专题幻灯片特效

jQuery幻灯片插件,按钮控制图片过渡特效

jquery仿百度百科2014新首页幻灯片特效

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效

jquery仿腾讯新闻网站带缩略图的幻灯片切换代码_js代码

jquery仿搜狐2014巴西世界杯专题幻灯片特效

jquery仿新浪2014成都车展幻灯片

jquery仿网易2014巴西世界杯专题幻灯片特效

jquery仿腾讯网新闻图片特效带缩略图的幻灯片切换特效

jquery带缩略图焦点滚动图特效代码

jquery仿UC浏览器网站带缩略图淡入淡出的banner特效

jquery仿海信官网带缩略图下拉导航菜单特效

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

jQuery带缩略图焦点图插件

jQuery实现左右布局带缩略图轮播图特效

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

jquery实现宽屏带缩略图焦点图

jquery实现带缩略图,按钮控制图片左右滑动切换特效

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效

jquery仿腾讯新闻网站带缩略图的幻灯片切换代码_js代码

jquery仿腾讯网新闻图片特效带缩略图的幻灯片切换特效

jQuery实现带缩略图广告特效代码

JQuery实现带缩略图的焦点图展示特效

jQuery实现门户网站带缩略图的图片相册特效代码

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码

jQuery带缩略图的全屏幻灯片图片切换特效代码

有缩略图5屏焦点图切换

有缩略图和文字描述的JS焦点图代码

四屏JS带缩略图和箭头的焦点图代码