三格图片轮播

来源：互联网发布：linux alias 文件编辑：程序博客网时间：2024/04/29 10:06
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- saved from url=(0045)http://demo.jq22.com/jquery-hdp-141207213530/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>首页</title><style>* {margin: 0;padding: 0;list-style-type: none;}a,img {border: 0;}.friend {height: 160px;margin: 0 auto;overflow: hidden;width: 480px;}.mr_frbox {height: 130px;padding: 24px 0px 0px;}.mr_frBtnL {cursor: pointer;display: inline;float: left;height: 46px;width: 32px;}.mr_frUl {float: left;height: 130px;width: 130px;margin-left: 5px;}.mr_frBtnR {float: right;cursor: pointer;width: 32px;}.next {border: 0px;height: 134px;background: transparent url(images/bbs_sprite.png) no-repeat -48px -1000px;}.next:hover {border: 0px;height: 134px;background: transparent url(images/bbs_sprite.png) no-repeat -48px -1138px;}.nextStop:hover {border: 0px;height: 134px;background: transparent url(images/bbs_sprite.png) no-repeat -48px -866px;}.nextStop {border: 0px;height: 134px;background: transparent url(images/bbs_sprite.png) no-repeat -48px -866px;}.prev {border: 0px;height: 134px;background: transparent url(images/bbs_sprite.png) no-repeat -1px -1000px;}.prev:hover {border: 0px;height: 134px;background: transparent url(images/bbs_sprite.png) no-repeat -1px -1138px;}.prevStop:hover {border: 0px;height: 134px;background: transparent url(images/bbs_sprite.png) no-repeat -1px -866px;}.prevStop {border: 0px;height: 134px;background: transparent url(images/bbs_sprite.png) no-repeat -1px -866px;}.tempWrap {overflow: hidden;position: relative;width: 380px}.mr_fu {width: 3600px;position: relative;overflow: hidden;padding: 0px;margin: 0px;left: -1200px;}</style><!-- slide --><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/jquery.SuperSlide2.js"></script></head><body><div class="friend"><div class="mr_frbox"><span class="mr_frBtnL prev"> </span><div class="mr_frUl"><div class="tempWrap"><ul id="mr_fu"><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i2.jpg"></li><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i3.jpg"></li><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i4.jpg"></li><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i.jpg"></li><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i2.jpg"></li><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i3.jpg"></li><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i4.jpg"></li><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i.jpg"></li></ul></div></div><span class="mr_frBtnR next"> </span></div></div><div class="friend"><div class="mr_frbox"><span class="mr_frBtnL prev"> </span><div class="mr_frUl"><div class="tempWrap"><ul id="mr_fu"><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i2.jpg"></li><li style="float: left; width: 130px;"><img style="width: 130px; height: 130px;" src="images/i3.jpg"></li></ul></div></div><span class="mr_frBtnR next"> </span></div></div><script type="text/javascript">$(document).ready(function() {/* 图片滚动效果 */$(".mr_frbox").slide({titCell: "",mainCell: ".mr_frUl ul",autoPage: true,effect: "leftLoop",autoPlay: false,pnLoop:false,vis: 3});});</script></body></html>
0 0