老婆是前端，接到了设计师的一个效果图，有点懵圈了：上面左右鼠标可以点击滚动图片，点击每个图片下面可以显示这个案例的一点介绍，最近在恶补Jquery，所以我就帮助写了一下这个效果，为了偷懒，我是找了一个效果差不多的修改了一下，那就是小猪CMS展示站首页的“功能介绍”的效果进行了修改。
小猪CMS上面的下面的文字是通过AJAX的调用的，我在这里做了修改。
效果：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./common.js"></script>
</head>
<body>
<script type="text/javascript">
</script>
<div class="functionDesc">
<div class="w1000">
<div class="caseDesc">
<div class="minNav clearfix">
<div class="scrollBtn">
<a href="javascript:;" class="prev">
</a>
<a href="javascript:;" class="next">
</a>
</div>
<div class="scrollBox">
<ul class="clearfix" id="tianchong" style="/*margin-left: -1160px;*/ width: 2900px;">
<li key="1" class="">
<img src="img/xxx1.png" alt="icon">
<div class="hoverUp">
<h3 class="xtitle_zw">
周口网
</h3>
<span class="xdesc">
周口网拇指姑娘》x都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
</span>
</div>
</li>
<li key="2" class="">
<img src="img/xxx2.png" alt="icon">
<div class="hoverUp">
<h3 class="xtitle_zw">
武警河南省总队医院
</h3>
<span class="xdesc">
武警河南省总队医院拇指姑娘》x都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
</span>
</div>
</li>
<li key="3">
<img src="img/xxx3.png" alt="icon">
<div class="hoverUp">
<h3 class="xtitle_zw">
中域在线
</h3>
<span class="xdesc">
武警河南省总队医院拇指姑娘》x都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
</span>
</div>
</li>
<li key="4">
<img src="img/xxx4.png" alt="icon">
<div class="hoverUp">
<h3 class="xtitle_zw">
中域在线
</h3>
<span class="xdesc">
span》x都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
</span>
</div>
</li>
<li key="5">
<img src="img/xxx1.png" alt="icon">
<div class="hoverUp">
<h3 class="xtitle_zw">
上上集团
</h3>
<span class="xdesc">
上上集团都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<h3 class="title_zw">
</h3>
<div class="textDesc">
<p>
<strong>
功能介绍：
</strong>
<span class="desc">
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS样式：
ul, ol, li {
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
p{
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.minNav ul li img{
transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, section, article, aside, header, footer, nav, dialog, figure, hgroup, em, button ,a,input{ font-family:"微软雅黑";margin:0;padding:0;-webkit-tap-highlight-color: rgba(0,0,0,0)}
.w1000{margin: 0 auto;max-width: 950px;}
.functionDesc{padding-top: 60px}
.caseDesc{padding-top: 50px;position: relative;
height: 110px;}
.caseDesc h3{font-size: 20px;color: #1bbc6b;font-weight: normal}
.caseDesc .textDesc{font-size: 14px;color: #666;line-height: 24px;padding-top: 20px;height: 268px;overflow: auto;}
.caseDesc .textDesc p{ padding-bottom: 20px;}
.caseDesc .qrCode{position: absolute;right: 0;top: -50px}
.caseDesc .qrCode .redCode{display: block;margin-left: 60px;width: 92px;height: 103px;background:url("img/qrCode.png") no-repeat top center;overflow: hidden;}
.caseDesc .qrCode .redCode img{display: block;width: 78px;height: 78px; margin-top: 7px;margin-left: 7px;background-color: #fff;}
.caseDesc .qrCode em{color: #fff;font-size: 14px;background: #f26161;padding: 5px 10px;border-radius: 5px;display: inline-block}
.caseDesc .qrCode em{*display: inline}
.minNav{overflow: hidden; position: absolute;width: 950px;}
.minNav .scrollBox{margin:0 auto;width: 840px;overflow: hidden;*position: relative;}
.minNav .scrollBtn a{position: absolute;width: 16px;height: 27px;background: url("img/icons.png") no-repeat -16px -12px;display: block;z-index: 99;top: 30px}
.minNav .scrollBtn a.prev{background-position: 0 -12px}
.minNav .scrollBtn a.next{right: 0px;}
.minNav ul li{float: left;width: 188px;height: 90px;text-align: center;margin-right: 25px;position: relative;color: #ccc;cursor: pointer;font-size: 13px;}
.minNav ul li img{margin: 10px 0;height: 78px;}
.minNav ul li .hoverUp{position: absolute;width: 118px;height: 90px;top: 0;left: 0;right: 0;bottom: 0;color: #fff;display: none;}
.minNav ul li.on .hoverUp{display: block}
.minNav ul li img:hover{opacity: 0.6;filter: alpha(opacty=60);}
.title_zw{color:#3FBCF9;}
.textDesc{font-size:14px;color:#999;line-height:24px;margin-top:10px;}
Jquery代码：
//作者：寅春树
//QQ:616885052
//博客：http://www.cnblogs.com/chunshu
$(function($) {
funScroll();
});
//首页产品介绍的图片滚动和按钮点击滚动
function funScroll(){
var i=0;
var r=0;
var phoneLI = $(".imgHolder .imgScroll ul>li");
var phoneLiLen = phoneLI.length;
var phoneLiW = phoneLI.width();
var imgSroll = $(".imgHolder .imgScroll ul");
imgSroll.width(phoneLiLen*phoneLiW);
var btn = $(".minNav ul li");
var btnLen=btn.length;
var scrollUl=$(".minNav ul")
var btnW=btn.outerWidth(true);
var btnLen5=Math.ceil(btn.length/4);
var btnLen5w=btnW*4;
var prevBtn=$(‘.minNav .scrollBtn a.prev‘);
var nextBtn=$(‘.minNav .scrollBtn a.next‘);
$(".minNav .scrollBox ul").width(btnLen*btnW);
btn.each(function(index) {
$(this).live(‘click‘,function() {
i = index;
var key_id=btn.eq(index).attr("key");
$(".title_zw").html($(this).find(‘.xtitle_zw‘).html());
$(".desc").html($(this).find(‘.xdesc‘).html());
});
}).eq(0).trigger("click");
prevBtn.bind(‘click‘,function(){
prev();
btnScroll();
});
nextBtn.bind(‘click‘,function(){
next();
btnScroll();
});
function next() {
r++;
if (r == btnLen5) {
r = 0
}
}
function prev() {
r--;
if (r < 0) {
r = btnLen5 - 1
}
}
function btnScroll(){
scrollUl.stop().animate({
‘margin-left‘: -btnLen5w * r + ‘px‘
},
1000);
}
}
下面是源文件下载：http://pan.baidu.com/s/1kUuOOh5
时间： 2024-10-10 10:51:15