<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="<head><meta httpequiv="ContentType" content="text/html; charset=gb" /><style type="text/css">body {fontsize:px; color:#; fontfamily:VerdanaArialHelveticasansserif; background:#fff;}ulli {liststyle:none; margin:px; padding:px;}img {border:;}/* 仿QQ商城点击左右滚动jquery焦点图特效插件 */focus {width:px; height:px; overflow:hidden; position:relative;}focus ul {height:px; position:absolute;}focus ul li {float:left; width:px; height:px; overflow:hidden; position:relative; background:#;}focus ul li div {position:absolute; overflow:hidden;}focus btnBg {position:absolute; width:px; height:px; left:; bottom:; background:#; display:none;}focus btn {position:absolute; width:px; height:px; padding:px px px px; right:; bottom:px; textalign:right;}focus btn span {display:inlineblock; _display:inline; _zoom:; width:px; height:px; lineheight:px; textalign:center; _fontsize:; marginleft:px; cursor:pointer; background:#fff;}focus btn spanon {background:#fff;}focus preNext {width:px; height:px; position:absolute; top:px; background:url(img/spritepng) norepeat ; cursor:pointer;}focus pre {left:;}focus next {right:; backgroundposition:right top;}</style><script type="text/javascript" src="js/jqueryminjs"></script><script type="text/javascript" src="js/sljs"></script><script type="text/javascript"> $(document)ready(function(){ $focus("#focus"); $focus("#focus"); });</script></head><body> <h></h> <div class="focus" id="focus"> <ul> <li><a href="特效" /></a></li> <li><a href=" <li><a href="仿QQ商城点击左右滚动jquery焦点图特效" /></a></li> </ul> </div><p>修改的几个地方隐藏了半透明背景条把那个小常条滑块读出了这些数字 你不喜欢这样你可以修改样式和自己改动下jquery代码</p><p>调用方法很简单$focus("#focus"); 一些参数设置可以修改js中的设置源作者已经注释的很清楚了</p></body></html>
JS
$(function() { jQueryfocus = function(slid) { var sWidth = $(slid)width(); //获取焦点图的宽度（显示面积） var len = $(slid)find("ul li")length; //获取焦点图个数 var index = ; var picTimer; //以下代码添加数字按钮和按钮后的半透明条还有上一页下一页两个按钮 var btn = "<div class=btnBg></div><div class=btn>"; for(var i=; i < len; i++) { var ii = i+; btn += "<span>"+ii+"</span>"; } btn += "</div><div class=preNext pre></div><div class=preNext next></div>"; $(slid)append(btn); $(slid)find("divbtnBg")css("opacity");//find() 函数返回在字符串中子字符串的位置 //为小按钮添加鼠标滑入事件以显示相应的内容 $(slid+" divbtn span")css("opacity")mouseenter(function() { index = $(slid+" btn span")index(this); showPics(index); })eq()trigger("mouseenter"); //上一页下一页按钮透明度处理 $(slid+" preNext")css("opacity")hover(function() { $(this)stop(truefalse)animate({"opacity":""}); }function() { $(this)stop(truefalse)animate({"opacity":""}); }); //上一页按钮 $(slid+" pre")click(function() { index = ; if(index == ) {index = len ;} showPics(index); }); //下一页按钮 $(slid+" next")click(function() { index += ; if(index == len) {index = ;} showPics(index); }); //本例为左右滚动即所有li元素都是在同一排向左浮动所以这里需要计算出外围ul元素的宽度 $(slid+" ul")css("width"sWidth * (len)); //鼠标滑上焦点图时停止自动播放滑出时开始自动播放 $(slid)hover(function() { clearInterval(picTimer); }function() { picTimer = setInterval(function() { showPics(index); index++; if(index == len) {index = ;} }); //此代表自动播放的间隔单位毫秒 })trigger("mouseleave"); //显示图片函数根据接收的index值显示相应的内容 function showPics(index) { //普通切换 var nowLeft = index*sWidth; //根据index值计算ul元素的left值 $(slid+" ul")stop(truefalse)animate({"left":nowLeft}); //通过animate()调整ul元素滚动到计算出的position $(slid+" btn span")removeClass("on")eq(index)addClass("on"); //为当前的按钮切换到选中的效果 $(slid+" btn span")stop(truefalse)animate({"opacity":""})eq(index)stop(truefalse)animate({"opacity":""}); //为当前的按钮切换到选中的效果 } }; });
