最近要做一个 图片滚动的控制栏 ,在网上找了几个案例,觉得还不错,我把我从网上找的案例上传,供参考
这个是我最终做出来的效果,看这还不错,这要归功于美工啦
下面是页面内容
<body>
<div class="ui-layout-south">
<div id="wrapperMenu">
<div class="scroll_back">
<div id="sliderMenu">
<img class="scrollButtonsMenu leftMenu" src="./Image/SliderMenu/leftarrow.png">
<div style="overflow: hidden;" class="scrollMenu">
<div class="scrollContainer">
<div class="panelMenu cloumn-model" id="panel_1" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_ldhb.png" alt="picture" />
<h2>雷达回波</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_2" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_wxyt.png" alt="picture" />
<h2>卫星地图</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_3" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_qsyq.png" alt="picture" />
<h2>全市雨情</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_4" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_cqsq.png" alt="picture" />
<h2>城市雨情</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_5" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_qxyq.png" alt="picture" />
<h2>区县雨情</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_6" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_myly.png" alt="picture" />
<h2>密云流域</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_7" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_gtly.png" alt="picture" />
<h2>官厅流域</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_8" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_cqjs.png" alt="picture" />
<h2>城区积水</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_9" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_qssq.png" alt="picture" />
<h2>全市水情</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_10" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_ldhb.png" alt="picture" />
<h2>延庆雨情</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_11" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_wxyt.png" alt="picture" />
<h2>大兴雨情</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_12" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_cqjs.png" alt="picture" />
<h2>昌平雨情</h2>
</div>
</div>
<div class="panelMenu cloumn-model" id="panel_13" model="menu" persist="true">
<div class="insideMenu cloumn-model-title">
<img src="./Image/SliderMenu/pr_cqsq.png" alt="picture" />
<h2>顺义雨情</h2>
</div>
</div>
</div>
</div>
<img class="scrollButtonsMenu rightMenu" src="./Image/SliderMenu/rightarrow.png" height="28" width="39">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#wrapperMenu").slider();
});
</script>
</body>
样式文件
* {
margin: 0;
padding: 0;
}
#wrapperMenu {
margin: 0px auto;
text-align: center;
height:81px;
}
#sliderMenu {
margin: 0 auto;
height:81px;
width:836px;
}
.slider img.scrollButtons { display:block; height:28px; width:39px; float:left; margin:26px 0}
.insideMenu:hover {
background:url(../../Image/SliderMenu/hover_img.png) no-repeat center top;
}
.scroll_back {
background:url(../../Image/SliderMenu/bj_ll.png) no-repeat center bottom; padding:0 35px 5px;
bottom:-20px;
}
.scrollMenu {
overflow: hidden;
margin: 0 auto;
width:756px;
float:left;
}
.scrollContainer {
width:756px;
height:81px;
overflow:hidden;
}
.scrollContainer div.panelMenu {
padding-top:5px;
float:left;
width: 84px;
height:auto;
}
.scrollContainer div.panelMenu h2 {
font-size: 12px;
}
/*border: 1px solid #999;*/
.insideMenu {
text-align:center;
}
.insideMenu h2{ padding-top:8px;}
.insideMenu:hover h2{ color:#333391; font-weight:bold;}
.insideMenu img {
display: block;
margin: 0px auto;
}
.insideMenu h2 {
font-weight: normal;
font-size: 10px;
margin: 0 0 8px 0;
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
.insideMenu p {
font-size: 12px;
color: #ccc;
}
a {
color: #999;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}
a:hover {
border-bottom: 1px solid #999;
}
.scrollButtonsMenu {
display:block;
cursor: pointer;
}
.scrollButtonsMenuGrey{
opacity:0.2;
filter:alpha(opacity=20);
}
.scrollButtonsMenu.leftMenu {
padding-top:30px;
float:left;
}
.scrollButtonsMenu.rightMenu {
padding-top:30px;
float:left
}
js文件
/*
* JQuery 插件
*/
(function ($) {
var option = {
$panels: {}, ///"scrollContainer"div下面的直接div标签
totalPanels: 0,///计算出总共有多少 图片
movingDistance: 0,//parseInt($( $(".panel")[0]).css("width"))+10,//94,///左右移动的距离
defaultPanelCount: 9,
panelCont: 0,一个滚动div里面的 图片个数
curPanelInit: 1,///默认第几个图片为需要突出显示的
curPanel: 3///当前突出显示的面板
};
var init = function () {
option.$panels.css({ 'float': 'left' });
$("#sliderMenu").data("currentlyMoving", false);
///当不需要左右轮换的时候,
if (option.panelCont >= option.totalPanels) {
$(".leftMenu").addClass("scrollButtonsMenuGrey");
$(".rightMenu").addClass("scrollButtonsMenuGrey");
}
//如果第一张图片放在第一个位置 ,就不需要想右移动
if (option.curPanel == 1) {
$(".rightMenu").addClass("scrollButtonsMenuGrey");
}
if (option.curPanel == (option.totalPanels - option.panelCont + 1)) {
$(".leftMenu").addClass("scrollButtonsMenuGrey");
}
//when the left/right arrows are clicked
$(".rightMenu").bind("click", function () { change(false); });
$(".leftMenu").bind("click", function () { change(true); });
};
var changeImgOpacity = function (direction) {
$(".leftMenu").removeClass("scrollButtonsMenuGrey");
$(".rightMenu").removeClass("scrollButtonsMenuGrey");
if (direction == true) {
$(".leftMenu").addClass("scrollButtonsMenuGrey");
} else if (direction == false) {
$(".rightMenu").addClass("scrollButtonsMenuGrey");
}
};
//direction true = left, false = right
var change = function (direction) {
changeImgOpacity();
if ((direction && !(option.curPanel + option.panelCont < option.totalPanels)) ||
(!direction && (option.curPanel - 2 <= 0))) {
changeImgOpacity(direction);
}
//if not at the first or last panel
if ((direction && !(option.curPanel + option.panelCont-1 < option.totalPanels)) ||
(!direction && (option.curPanel - 1 <= 0))) {
return false;
}
//if not currently moving
if (($("#sliderMenu").data("currentlyMoving") == false)) {
$("#sliderMenu").data("currentlyMoving", true);
var next = direction ? option.curPanel + 1 : option.curPanel - 1;
//在网上找的案例,这个地方 滚动的原理是 移动位置,我这儿由于不能让外出div定位,所以改变了滚动的效果,不过最终的效果差不多
if (direction) {
$(option.$panels[option.curPanel-1]).hide("slow");
} else {
$(option.$panels[option.curPanel-1-1]).show("slow");
}
$("#sliderMenu").data("currentlyMoving", false);
option.curPanel = next;
}
}
// drafting defind
$.fn.slider = function (optionInput) {
var optionPerson = {
$panels: $('#sliderMenu .scrollContainer > div'),///"scrollContainer"div下面的直接div标签
totalPanels: $(".scrollContainer").children().size(),///计算出总共有多少 图片
movingDistance: $("#sliderMenu .panelMenu")[0].offsetWidth,//parseInt($( $(".panel")[0]).css("width"))+10,//94,///左右移动的距离
defaultPanelCount: 9,
panelCont: 0,一个滚动div里面的 图片个数
curPanelInit: 1,///默认第几个图片为需要突出显示的
curPanel: 3///当前突出显示的面板
};
// 合并函数
$.extend(true, optionPerson, optionInput);
optionPerson.panelCont = optionPerson.totalPanels > optionPerson.defaultPanelCount ? optionPerson.defaultPanelCount : optionPerson.totalPanels;一个滚动div里面的 图片个数
optionPerson.curPanel = optionPerson.curPanelInit;
// 合并函数
$.extend(true, option, optionPerson);
init();
}
})(jQuery);
网上找的案例参考: http://download.csdn.net/detail/stamsuper1/5435753
推荐个图片轮换的ui:http://galleria.io/(挺不错的)