<!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>
<title>CSS+jQuery打造的多种过渡方式带缩略图的图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv= " content-type " content= " text/html;charset=gb2312 ">
<!--把下面代码加到<head>与</head>之间-->
<style type= " text/css ">
body{font-size:12px;font-family:Tahoma,Geneva,sans-serif;padding:0px;margin:0px;}
#container{width:660px;margin:0px auto;text-align:center;}
#gallery{padding:30px;background:#e1eef5;}
#descriptions{position:relative;height:50px;background:#EEE;width:640px;padding:10px;overflow:hidden;}
#descriptions .ad-image-description{position:absolute;}
#descriptions .ad-image-description .ad-description-title{display:block;}
p,p a{font-size:12px;color# 666;}
</style>
<link rel= " stylesheet " type= " text/css " href= " http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.css ">
<script type= " text/javascript " src= " http://www.csrcode.cn/imagesforcode/201207/jquery.min.js "></script>
<script type= " text/javascript " src= " http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.js "></script>
<script type= " text/javascript ">
$(function() {
var galleries = $( ' .ad-gallery ').adGallery();
$( ' #switch-effect ').change(
function() {
galleries[ 0].settings.effect = $( this).val();
return false;
}
);
$( ' #toggle-slideshow ').click(
function() {
galleries[ 0].slideshow.toggle();
return false;
}
);
$( ' #toggle-description ').click(
function() {
if(!galleries[ 0].settings.description_wrapper) {
galleries[ 0].settings.description_wrapper = $( ' #descriptions ');
} else {
galleries[ 0].settings.description_wrapper = false;
}
return false;
}
);
});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id= " container ">
<div style= " margin:0 auto 5px auto;width:728px;clear:both; "></div>
<div id= " gallery " class= " ad-gallery ">
<div class= " ad-image-wrapper "></div>
<div class= " ad-controls "></div>
<div class= " ad-nav ">
<div class= " ad-thumbs ">
<ul class= " ad-thumb-list ">
<li><a href= " http://www.csrcode.cn/images/1.jpg "><img src= " http://www.csrcode.cn/images/s1.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/2.jpg "><img src= " http://www.csrcode.cn/images/s2.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/3.jpg "><img src= " http://www.csrcode.cn/images/s3.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/4.jpg "><img src= " http://www.csrcode.cn/images/s4.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/5.jpg "><img src= " http://www.csrcode.cn/images/s5.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/6.jpg "><img src= " http://www.csrcode.cn/images/s6.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/7.jpg "><img src= " http://www.csrcode.cn/images/s7.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/8.jpg "><img src= " http://www.csrcode.cn/images/s8.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/9.jpg "><img src= " http://www.csrcode.cn/images/s9.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/10.jpg "><img src= " http://www.csrcode.cn/images/s10.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
</ul>
</div>
</div>
</div>
<p>
不同幻灯过渡效果演示: < select id= " switch-effect ">
<option value= " slide-hori ">Slide horizontal</option>
<option value= " slide-vert ">Slide vertical</option>
<option value= " resize ">Shrink/grow</option>
<option value= " fade ">Fade</option>
<option value= "">None</option>
</ select>
<a href= " # " id= " toggle-slideshow ">切换幻灯效果</a> | <a href= " # " id= " toggle-description ">切换幻灯图片标题显示效果</a>
</p>
</div>
</body>
</html>
<br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href= " http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.css ">jquery.ad-gallery.css</a>、<a href= " http://www.csrcode.cn/imagesforcode/201207/jquery.min.js ">jquery.min.js</a>、<a href= " http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.js ">jquery.ad-gallery.js</a><hr><p align= " center "><font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<title>CSS+jQuery打造的多种过渡方式带缩略图的图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv= " content-type " content= " text/html;charset=gb2312 ">
<!--把下面代码加到<head>与</head>之间-->
<style type= " text/css ">
body{font-size:12px;font-family:Tahoma,Geneva,sans-serif;padding:0px;margin:0px;}
#container{width:660px;margin:0px auto;text-align:center;}
#gallery{padding:30px;background:#e1eef5;}
#descriptions{position:relative;height:50px;background:#EEE;width:640px;padding:10px;overflow:hidden;}
#descriptions .ad-image-description{position:absolute;}
#descriptions .ad-image-description .ad-description-title{display:block;}
p,p a{font-size:12px;color# 666;}
</style>
<link rel= " stylesheet " type= " text/css " href= " http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.css ">
<script type= " text/javascript " src= " http://www.csrcode.cn/imagesforcode/201207/jquery.min.js "></script>
<script type= " text/javascript " src= " http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.js "></script>
<script type= " text/javascript ">
$(function() {
var galleries = $( ' .ad-gallery ').adGallery();
$( ' #switch-effect ').change(
function() {
galleries[ 0].settings.effect = $( this).val();
return false;
}
);
$( ' #toggle-slideshow ').click(
function() {
galleries[ 0].slideshow.toggle();
return false;
}
);
$( ' #toggle-description ').click(
function() {
if(!galleries[ 0].settings.description_wrapper) {
galleries[ 0].settings.description_wrapper = $( ' #descriptions ');
} else {
galleries[ 0].settings.description_wrapper = false;
}
return false;
}
);
});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id= " container ">
<div style= " margin:0 auto 5px auto;width:728px;clear:both; "></div>
<div id= " gallery " class= " ad-gallery ">
<div class= " ad-image-wrapper "></div>
<div class= " ad-controls "></div>
<div class= " ad-nav ">
<div class= " ad-thumbs ">
<ul class= " ad-thumb-list ">
<li><a href= " http://www.csrcode.cn/images/1.jpg "><img src= " http://www.csrcode.cn/images/s1.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/2.jpg "><img src= " http://www.csrcode.cn/images/s2.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/3.jpg "><img src= " http://www.csrcode.cn/images/s3.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/4.jpg "><img src= " http://www.csrcode.cn/images/s4.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/5.jpg "><img src= " http://www.csrcode.cn/images/s5.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/6.jpg "><img src= " http://www.csrcode.cn/images/s6.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/7.jpg "><img src= " http://www.csrcode.cn/images/s7.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/8.jpg "><img src= " http://www.csrcode.cn/images/s8.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/9.jpg "><img src= " http://www.csrcode.cn/images/s9.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
<li><a href= " http://www.csrcode.cn/images/10.jpg "><img src= " http://www.csrcode.cn/images/s10.jpg " class= " image0 " width= " 90px " height= " 60px "></a></li>
</ul>
</div>
</div>
</div>
<p>
不同幻灯过渡效果演示: < select id= " switch-effect ">
<option value= " slide-hori ">Slide horizontal</option>
<option value= " slide-vert ">Slide vertical</option>
<option value= " resize ">Shrink/grow</option>
<option value= " fade ">Fade</option>
<option value= "">None</option>
</ select>
<a href= " # " id= " toggle-slideshow ">切换幻灯效果</a> | <a href= " # " id= " toggle-description ">切换幻灯图片标题显示效果</a>
</p>
</div>
</body>
</html>
<br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href= " http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.css ">jquery.ad-gallery.css</a>、<a href= " http://www.csrcode.cn/imagesforcode/201207/jquery.min.js ">jquery.min.js</a>、<a href= " http://www.csrcode.cn/imagesforcode/201207/jquery.ad-gallery.js ">jquery.ad-gallery.js</a><hr><p align= " center "><font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
