实现即时通信软件商城点击左右滚动框架焦点图特效的代码！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。" DTD "

html xmlns=" http://。w3。" org/1999/XHTML "

头

(资料图片)

meta http-equiv=" Content-Type " Content=" text/html；charset=gb2312" /

style type="text/css "

body { font-size:12px；颜色：# 222;字体系列：凡尔登、阿里亚、Helvetica、无衬线；背景：# f0f0f0}

ul，李{列表式：无；边距：0px填充：0px}

img { border:0；}

/* 仿即时通信软件商城点击左右滚动框架焦点图特效插件*/。焦点{宽度：800像素高度：280像素溢出：隐藏；位置：相对；}。焦点ul {高度：380像素位置：绝对；}。focus ul Li { float:left；宽度：800像素高度：280像素溢出：隐藏；位置：相对；背景：# 000;}。聚焦ul李部门{位置：绝对；溢出：隐藏；}。专注btnBg {位置：绝对；宽度：800像素高度：20px左：0;底部：0;背景：# 000;显示：无；}。专注btn {位置：绝对；宽度：780像素高度：23px填充：0px 10px 0px 10px右：0;底部：6px文本对齐：右对齐；}。专注BTN span { display:inline-block；_ display:inline；_ zoom:1；宽度：25px高度：24px行高：24px文本对齐：居中；_ font-size:0；左边距：5px光标：指针；背景：# fff}。专注BTN跨度。在{ background:# fff；}。专注preNext { width:45px；高度：100像素位置：绝对；顶配：90px背景：url(img/sprite.png)无重复0 0;光标：指针；}。专注pre { left:0；}。专注。下一个{右：0;背景-位置：右上；}

/风格

脚本类型=" text/JavaScript " src=" js/jquery。量滴js "/脚本

脚本类型=" text/JavaScript " src=" js/sl。js "/脚本

脚本类型="文本/javascript "

$(文档)。ready(function(){

$.焦点(" #焦点001 ")；

$.焦点(" #焦点002 ")；

});

/脚本

/头

身体

h1/h1

div class="focus" id="focus001 "

保险商实验所

lia href=" http://www。51学点脑。com/" target=" _ blank " img src=" img/03。jpg " alt=" jquery特效//a/li

lia href=" http://www。51学点脑。com/" target=" _ blank " img src=" img/02。jpg "//a/Li

lia href=" http://www。51学点脑。com/" target=" _ blank " img src=" img/03。jpg " alt="仿即时通信软件商城点击左右滚动框架焦点图特效//a/li

/ul

/div

p修改的几个地方：1、隐藏了半透明背景条，2、把那个小常条滑块读出了1234这些数字。你不喜欢这样你可以修改样式和自己改动下框架代码100元/人

p调用方法：很简单，$.焦点(" #焦点001 ")；一些参数设置，可以修改射流研究…中的设置，源作者已经注释的很清楚了100元/人

/body

/html

射流研究…

$(function() {

jQuery.focus=function(slid) {

var sWidth=$(slid).width()；//获取焦点图的宽度（显示面积)

var len=$(slid).查找(" ul li ").长度；//获取焦点图个数

定义变量指数=0;

var picTimer

//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮

var BTN=" div class=" btnBg "/div BTN；

for(var I=0；我leni ) {

var ii=I 1；

BTN=" span " ii "/span；

}

BTN="/div div class=" preNext pre "/div div class=" preNext next "/div；

$(滑)。追加(BTN)；

$(滑)。查找(" div.btnBg ").css("不透明度",0.5);//find()函数返回在字符串中子字符串的位置。

//为小按钮添加鼠标滑入事件，以显示相应的内容

$(slid " div.btn span ").css("不透明度",0.4)。mouseenter(function() {

index=$(slid " .BTN斯潘).指数（这个);

展示图片(索引);

}).等式(0)。触发器(‘鼠标回车’)；

//上一页、下一页按钮透明度处理

$(滑动的。preNext).css("不透明度",0.2)。hover(function() {

$(这个)。停止（对，错)。动画({"opacity":"0.5"}，300)；

}，function() {

$(这个)。停止（对，错)。动画({"opacity":"0.2"}，300)；

});

//上一页按钮

$(滑动的。前")。单击（函数(){

index-=1；

if(index==-1){ index=len-1；}

展示图片(索引);

});

//下一页按钮

$(滑动的。下一个)。单击（函数(){

指数=1;

if(index==len){ index=0；}

showPics(索引)；

});

//这个例子是左右滚动，即所有li元素在同一行向左浮动，所以这里需要计算外围ul元素的宽度。

$(slid " ul ")。css("width "，sWidth *(len))；

//鼠标向上滑动焦点图时自动停止播放，滑出时自动开始播放。

$(滑)。hover(function() {

clear interval(picTimer)；

}，function() {

picTimer=setInterval(function(){

showPics(索引)；

指数；

if(index==len){ index=0；}

},4000);//这个4000代表自动播放的间隔，以毫秒为单位。

}).触发器(" mouse leave ")；

//显示图片功能，根据接收到的索引值显示相应的内容

函数showPics(index) {//正常切换

var now left=-index * sWidth；//根据索引值计算ul元素的左值

$(slid " ul ")。停止(对，错)。animate({"left":nowLeft}，300)；//通过animate()调整ul元素滚动到计算的位置

$(滑动的"。BTN span’)。removeClass("on ")。eq(指数)。add class(“on”)；//切换到当前按钮的选定效果

$(滑动的"。BTN span’)。停止(对，错)。动画({"opacity":"0.4"}，300)。eq(指数)。停止(对，错)。动画({"opacity":"1"}，300)；//切换到当前按钮的选定效果

}

};

});

猜猜你喜欢什么：

1.jS获取鼠标坐标和鼠标像素。

2.如何用js实现简单的鼠标跟随效果？

3.3.js如何获取鼠标在div中的相对位置？

4.js设置鼠标光标形状

5.如何使用5的鼠标手势？Chrome浏览器

本文到此结束，希望对大家有所帮助。