我在首页diy里加入了静态Html模块。
想做一个特殊点的图片效果，代码肯定没有问题。但是就是无法和测试的显示效果一样。
代码奉上：
<style>
html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
img,a img{border-style:none;border-width:0;}
a,a:hover{ text-decoration:none}
html {margin:0 auto;}
ol,ul,li{list-style: none;}:focus{outline: 0;}
body{background-color:#eef9f8; color:#666}
a,a:visited{ color:#666}
a:hover {color:#009966;}
.main{ font-family:宋体; color:#666; width:912px; margin:0 auto}
.slider-scroll{margin-top:12px; overflow:hidden;height:421px;}
#showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none}
#showArea img{ opacity:0; display:none;}
#scrollDiv{float:left; width:246px; height:421px; background:url(/jscss/demoimg/201402/slider_side.jpg) 0 0 no-repeat}
#scrollDiv ul{ padding:19px 0 0 0}
#scrollDiv li{width:220px;height:57px;padding:10px 0 10px 26px; cursor:pointer; font-family:微软雅黑;}
#scrollDiv li.on{ background:#003030; position:relative;}
#scrollDiv li a{display:block; font-size:16px; height:35px; line-height:35px; color:#fff;}
#scrollDiv li span{display:block; color:#66ffff; font-size:14px; height:15px; line-height:15px; }
#scrollDiv li span.entity-triangle{ display:none; }
#scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;}
</style>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery.extend({
manualScroll:function(opt,callback){
//alert("suc");
this.defaults = {
objId:"", // 滚动区域id
showArea:"", // 大图显示区域id，如果没有就不显示
showWidth:419, // 大图宽度
showHeight:664, // 大图高度
showTitle: false, // 是否在大图下方显示标题
width:300, // 每行的宽度
height:100, // div的高度
picTimer:0, // 间隔句柄，不需要设置，只是作为标识使用
interval:5500
};
//参数初始化
var opts = jQuery.extend(this.defaults,opt);
var jQueryobjId = opts.objId;
var jQueryshowArea = opts.showArea;
var jQueryshowWidth = opts.showWidth;
var jQueryshowHeight = opts.showHeight;
var jQueryshowTitle = opts.showTitle;
var jQuerywidth = opts.width;
var jQueryheight = opts.height;
var jQuerytitleopacity = opts.titleopacity;
var jQuerypicTimer = opts.picTimer;
var index=0;
var jQuerylen = jQuery("#"+jQueryobjId).find("ul li").length;
/*设置显示图片大小*/
jQuery("#"+jQueryshowArea).find("img").css({"height":jQueryshowHeight,"width":jQueryshowWidth});
/*鼠标移动事件*/
jQuery("#"+jQueryobjId).find("ul li").hover(function(){
index = jQuery(this).index();
showimg(index);
});
/*自动切换*/
jQuery(".slider-scroll").hover(function(){
clearInterval(jQuerypicTimer);
},function(){
jQuerypicTimer = setInterval(function() {
if(index==jQuerylen-1)
{
index=0;
}
else
{
index+=1;
}
jQuery("#"+jQueryobjId).find("ul li").removeClass("on");
jQuery("#"+jQueryobjId).find("ul li").eq(index).addClass("on");
jQuery("#"+jQueryshowArea).find("img").css({"display":"none","opacity":"0.3"});
jQuery("#"+jQueryshowArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
},opts.interval); // 自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
function showimg(index)
{
if(index==jQuerylen)
{
index=0;
}
jQuery("#"+jQueryobjId).find("ul li").removeClass("on");
jQuery("#"+jQueryobjId).find("ul li").eq(index).addClass("on");
jQuery("#"+jQueryshowArea).find("img").css({"display":"none","opacity":"0.3"});
jQuery("#"+jQueryshowArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
index+=1;
}
}
});
</script>
</head>
<body>
<script type="text/javascript">
//home 顶部大图切换
jQuery(document).ready(function(){
jQuery.manualScroll({
objId:"scrollDiv",
showArea:"showArea",
showWidth:664, // 大图宽度
showHeight:419, // 大图高度
showTitle: true,
picTimer:0,
interval:3000
});
});
</script>
<div class="main">
<div class="slider-scroll f-c">
<div id="showArea">
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="http://xiaobaosunshine.mcy.7yns.com/data/attachment/block/1b/1be5492531443cc08e1db4a84c43f85b.jpg" width="664px" height="419px"></a>
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="http://xiaobaosunshine.mcy.7yns.com/data/attachment/block/1b/1be5492531443cc08e1db4a84c43f85b.jpg" width="664px" height="419px"></a>
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="http://xiaobaosunshine.mcy.7yns.com/data/attachment/block/1b/1be5492531443cc08e1db4a84c43f85b.jpg" width="664px" height="419px"></a>
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="http://xiaobaosunshine.mcy.7yns.com/data/attachment/block/1b/1be5492531443cc08e1db4a84c43f85b.jpg" width="664px" height="419px"></a>
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="http://xiaobaosunshine.mcy.7yns.com/data/attachment/block/1b/1be5492531443cc08e1db4a84c43f85b.jpg" width="664px" height="419px"></a>
</div>
<div id="scrollDiv">
<ul>
<li class="on"><a href="/" target="_blank">斜弱视专家援疆<!--12个字以内--><span>权威治疗疑难斜弱视<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
<li ><a href="/" target="_blank">IntraLase飞秒激光治近视<!--12个字以内--><span>全程无刀安全治近视首选<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
<li ><a href="/" target="_blank">青少年近视防控<!--12个字以内--><span>非手术治近视<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
<li ><a href="/" target="_blank">白内障防治<!--12个字以内--><span>爱让父母看得见<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
<li ><a href="/" target="_blank">ICL人工晶体植入术<!--12个字以内--><span>无损角膜之高端近视治疗<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
</ul>
</div>
</div>
</div>
<div style="text-align:center;clear:both">
</div>
|
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主