jQuery图像幻灯片上下滑动图片切换-20130627
[html5]
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";background:#2a0504;}/* acttabbox */.acttabbox{width:990px;height:300px;overflow:hidden;padding:4px;border:solid 1px #690501;background:#541410;margin:40px auto;}.tabcon{float:left;width:702px;height:300px;overflow:hidden;margin-right:-2px;} .tabcon li{width:702px;height:300px;}.tabcon li img{width:702px;height:300px;float:left}.tabnav{float:right;width:290px;}.tabnav li{float:left;position:relative;margin:-1px 0 0 0;height:99px;border:1px solid #000;overflow:hidden;}.tabnav .cur{border:1px solid #fff;z-index:9;}</style><div target="_blank"><img width="702" height="300" src="images/T1XXb8XjtXXXak1cjj-702-300.jpg" alt="jQuery图像幻灯片左右滑动图片切换-20130627" /></a></li><li><a href="http://www.17sucai.com/" target="_blank"><img width="702" height="300" src="images/T1MdL7Xg4cXXak1cjj-702-300.jpg" alt="jQuery图像幻灯片左右滑动图片切换-20130627" /></a></li><li><a href="http://www.17sucai.com/" target="_blank"><img width="702" height="300" src="images/T1STrHXlVqXXak1cjj-702-300.jpg" alt="jQuery图像幻灯片左右滑动图片切换-20130627" /></a></li></ul><ul target="_blank"><img width="288" height="99" src="images/T111L6Xe8gXXbCOp6D-288-99.jpg" alt="jQuery图像幻灯片左右滑动图片切换-20130627" /></a></li><li><a href="http://www.17sucai.com/" target="_blank"><img width="288" height="99" src="images/T1xYL6XX4gXXbCOp6D-288-99.jpg" alt="jQuery图像幻灯片左右滑动图片切换-20130627" /></a></li><li><a href="http://www.17sucai.com/" target="_blank"><img width="288" height="99" src="images/T1gd2NXd0cXXbCOp6D-288-99.jpg" alt="jQuery图像幻灯片左右滑动图片切换-20130627" /></a></li></ul> </div><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){ var index=0,len=$('.tabnav li').length,_timer=null; /*0 分页的数量 len里面放有tabnav里面所有的li的长度 还有超链接的打开方式*/function showTab(index){/*定义个方法里面放有index*/$('.tabnav li').eq(index).addClass('cur').siblings().removeClass('cur');/*右边有三个小容器 当鼠标移动到三个小容器的任意一个的时候会有一个白色外框的效果*/ $('.tabcon li').eq(index).stop(true,true).slideDown('slow').siblings().slideUp('slow');/*根据右边的三个小容器的不管是鼠标触及还是自动切换都那一个都在左边的大容器里面显示出相对的图片*/}function auto(){/*定于一个auto方法*/timer=setTimeout(function(){/*在timer里面附加一个setTimeout方法*/index=(index+1)%len;/*自动切换图片*/showTab(index);/*启动效果*/timer=setTimeout(arguments.callee,3500);/*在自动切换的时候的时间3.5秒*/},1000)/*切换大图所用的时间1秒*/}auto(); /*实现方法*/$('').mouseenter(function(){/*改变.tabnav li背景颜色*/var index=$(this).index(); /*鼠标触及以后显示出哪一张图片*/showTab(index); /*启动效果*/});$('.acttabbox').hover(function(){/*创建一个伪类*/clearTimeout(timer);/*是将timer放入整个运行的过程不放全部的运行时间就会变成1秒*/},function(){auto();/*启动效果*/});});</script></body></html>