【
<!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=utf-8" />
<title>jQuery自动向右滚动通栏图片列表特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{background-color: #666;}
#wrapper{margin-top: 50px;text-align:center;}
.overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); /*dim the background*/ text-align:center; display:none;}
#overlay_pic { margin:200px auto; width:400px; box-shadow: 10px 10px 5px #000;}
.jscarousal{width: 940px;height: 150px;background-color: #121212;border: solid 1px #7A7677;margin:0 auto;padding: 0;padding: 22px 8px 22px 8px;position: relative; /*overflow: hidden;*/}
.jscarousal .jscarousal-left, .jscarousal .jscarousal-right{float: left;width: 23px;height: 98px;background-color: #121212;color: White;position: relative;top: 12px;cursor: pointer;}
.jscarousal .jscarousal-left{background-image: url(
);background-repeat: no-repeat;background-position: left;}
.jscarousal .jscarousal-right{background-image: url(
);background-repeat: no-repeat;background-position: right;}
.jscarousal-contents{width: 890px;height: 160px;float: left;position: relative;overflow: hidden;}
.jscarousal-contents > div{position: absolute;width: 100%;height: 160px;}
.jscarousal-contents > div > div{float: left;margin-left: 8px;margin-right: 8px;}
.jscarousal-contents img{width: 160px;height: 120px;border: solid 1px #7A7677;}
.hidden{display: none;}
.visible{display: block;}
.thumbnail-active{filter: alpha(opacity=100);opacity: 1.0;cursor: pointer;}
.thumbnail-inactive{filter: alpha(opacity=60);opacity: 0.6;cursor: pointer;}
.thumbnail-text{color: #7A7677;font-weight: bold;text-align: left;display: block;padding: 10px 2px 2px 0px;}
</style>
</head>
<body>
<!-- 代码 begin -->
<div class="overlay"><img src="
" id="overlay_pic"></div>
<div id="wrapper">
<div id="jsCarousel">
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
</div>
<div id="demo-side-bar">
</div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://demo.lanrenzhijia.com/2014/pic1010/js/jscarousel.js"></script>
<script>
$(function(){
$('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) {
// 可在这里加入点击图片之后触发的效果
$("#overlay_pic").attr('src', src);
$(".overlay").show();
}, autoscroll: true });
$(".overlay").click(function(){
$(this).hide();
});
});
</script>
<!-- 代码 end -->
</body>
</html>
】
<!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=utf-8" />
<title>jQuery自动向右滚动通栏图片列表特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{background-color: #666;}
#wrapper{margin-top: 50px;text-align:center;}
.overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); /*dim the background*/ text-align:center; display:none;}
#overlay_pic { margin:200px auto; width:400px; box-shadow: 10px 10px 5px #000;}
.jscarousal{width: 940px;height: 150px;background-color: #121212;border: solid 1px #7A7677;margin:0 auto;padding: 0;padding: 22px 8px 22px 8px;position: relative; /*overflow: hidden;*/}
.jscarousal .jscarousal-left, .jscarousal .jscarousal-right{float: left;width: 23px;height: 98px;background-color: #121212;color: White;position: relative;top: 12px;cursor: pointer;}
.jscarousal .jscarousal-left{background-image: url(
);background-repeat: no-repeat;background-position: left;}
.jscarousal .jscarousal-right{background-image: url(
);background-repeat: no-repeat;background-position: right;}
.jscarousal-contents{width: 890px;height: 160px;float: left;position: relative;overflow: hidden;}
.jscarousal-contents > div{position: absolute;width: 100%;height: 160px;}
.jscarousal-contents > div > div{float: left;margin-left: 8px;margin-right: 8px;}
.jscarousal-contents img{width: 160px;height: 120px;border: solid 1px #7A7677;}
.hidden{display: none;}
.visible{display: block;}
.thumbnail-active{filter: alpha(opacity=100);opacity: 1.0;cursor: pointer;}
.thumbnail-inactive{filter: alpha(opacity=60);opacity: 0.6;cursor: pointer;}
.thumbnail-text{color: #7A7677;font-weight: bold;text-align: left;display: block;padding: 10px 2px 2px 0px;}
</style>
</head>
<body>
<!-- 代码 begin -->
<div class="overlay"><img src="
" id="overlay_pic"></div>
<div id="wrapper">
<div id="jsCarousel">
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img src="
" /><br />
<span class="thumbnail-text">Image Text</span></div>
</div>
<div id="demo-side-bar">
</div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://demo.lanrenzhijia.com/2014/pic1010/js/jscarousel.js"></script>
<script>
$(function(){
$('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) {
// 可在这里加入点击图片之后触发的效果
$("#overlay_pic").attr('src', src);
$(".overlay").show();
}, autoscroll: true });
$(".overlay").click(function(){
$(this).hide();
});
});
</script>
<!-- 代码 end -->
</body>
</html>
】
