1、引入js
// JavaScript Document $(document).ready(function(e) { /***不需要自动滚动,去掉即可***/ time = window.setInterval(function(){ $('.og_next').click(); },5000); /***不需要自动滚动,去掉即可***/ linum = $('.mainlist li').length;//图片数量 w = linum * 205;//ul宽度 $('.piclist').css('width', w + 'px');//ul宽度 $('.swaplist').html($('.mainlist').html());//复制内容 $('.og_next').click(function(){ if($('.swaplist,.mainlist').is(':animated')){ $('.swaplist,.mainlist').stop(true,true); } if($('.mainlist li').length>5){//多于5张图片 ml = parseInt($('.mainlist').css('left'));//默认图片ul位置 sl = parseInt($('.swaplist').css('left'));//交换图片ul位置 if(ml<=0 && ml>w*-1){//默认图片显示时 $('.swaplist').css({left: '1025'});//交换图片放在显示区域右侧 $('.mainlist').animate({left: ml - 1025 + 'px'},'slow');//默认图片滚动 if(ml==(w-1025)*-1){//默认图片最后一屏时 $('.swaplist').animate({left: '0px'},'slow');//交换图片滚动 } }else{//交换图片显示时 $('.mainlist').css({left: '1025px'})//默认图片放在显示区域右 $('.swaplist').animate({left: sl - 1025 + 'px'},'slow');//交换图片滚动 if(sl==(w-1025)*-1){//交换图片最后一屏时 $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动 } } } }) $('.og_prev').click(function(){ if($('.swaplist,.mainlist').is(':animated')){ $('.swaplist,.mainlist').stop(true,true); } if($('.mainlist li').length>5){ ml = parseInt($('.mainlist').css('left')); sl = parseInt($('.swaplist').css('left')); if(ml<=0 && ml>w*-1){ $('.swaplist').css({left: w * -1 + 'px'}); $('.mainlist').animate({left: ml + 1025 + 'px'},'slow'); if(ml==0){ $('.swaplist').animate({left: (w - 1025) * -1 + 'px'},'slow'); } }else{ $('.mainlist').css({left: (w - 1025) * -1 + 'px'}); $('.swaplist').animate({left: sl + 1025 + 'px'},'slow'); if(sl==0){ $('.mainlist').animate({left: '0px'},'slow'); } } } }) }); $(document).ready(function(){ $('.og_prev,.og_next').hover(function(){ $(this).fadeTo('fast',1); },function(){ $(this).fadeTo('fast',0.7); }) })
2、css样式
/* CSS Document */ .box{ 1024px; margin:0 auto; position:relative; overflow:hidden; _height:100%;} .picbox{ 1024px; height:183px; overflow:hidden; position:relative;} .piclist{ height:183px;position:absolute; left:0; top:0;} .piclist li{ text-align: center; background: url("../images/vedio/list_bj.png") no-repeat; margin-right:6px; float:left; 199px; height: 183px; padding-top: 10px; } .piclist li img{ 180px; height: 101px;} .swaplist{ position:absolute; left:-6150px; top:0;} .og_prev,.og_next{ 30px; height:50px; background:url(../images/icon.png) no-repeat; background:url(../images/icon_ie6.png) no-repeat9; position:absolute; top:50px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;} .og_prev{ background-position:0 -60px; left:4px;} .og_next{ background-position:0 0; right:4px;} .vedio_btn{ text-align: center; margin-top: 13px;} .vedio_btn p{ display: inline-block; color:#fff; font-size: 14px; line-height: 35px; 179px; height: 35px; background: url("../images/vedio/list_btn.png") no-repeat; padding: 0; margin-bottom: 0;}
3、div标签
<div class="box"> <div class="picbox"> <ul class="piclist mainlist"> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> <li> <a href="#"> <img src="images/1.jpg" /> <div class="vedio_btn"> <p>部门名称部门名称部门</p> </div> </a> </li> </ul> <ul class="piclist swaplist"></ul> </div> <div class="og_prev"></div> <div class="og_next"></div> </div>
4、图片