图片滚动控制栏

最新推荐文章于 2021-05-31 09:52:13 发布

男儿当自强-

最新推荐文章于 2021-05-31 09:52:13 发布

阅读量1.1k

点赞数

分类专栏： javascript jquery

本文链接：https://blog.csdn.net/stamsuper/article/details/8965467

版权

javascript 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

jquery

15 篇文章 0 订阅

订阅专栏

最近要做一个图片滚动的控制栏，在网上找了几个案例，觉得还不错，我把我从网上找的案例上传，供参考

这个是我最终做出来的效果，看这还不错，这要归功于美工啦

下面是页面内容

<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/（挺不错的）