js实现点击左右滚动jquery焦点图特效（jquery左右滑动效果）
大家好,今天就和丹尼一起来看看这个问题吧 。jquery左右滑动效果，js实现点击左右滚动jquery焦点图特效很多人还不知道，现在让我们一起来看看吧！
实现即时通信软件商城点击左右滚动框架焦点图特效的代码！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 :12 px颜色： # 222字体系列：宋体，宋体、Helvetica、无衬线. background: # f0f0f0}
ul，李{列表式：无；保证金：0 pxpadding:0px}
img { border:0}
/* 仿即时通信软件商城点击左右滚动框架焦点图特效插件*/。焦点{宽度：800像素高度：280像素溢出：隐藏；位置：相对相对；}。焦点ul { height:380px位置：绝对；}。焦点ul li { float:left宽度宽度：800像素高度：280像素溢出：隐藏；位置：相对相对；背景： # 000}。焦点ul李div {位置：绝对；溢出：隐藏；}。专注btnBg { position:absolute宽度宽度：800像素高度：20像素左：0;底部：0;背景： # 000显示：无；}。专注btn {绝对位置：宽度width :780 px height :23 px padding :0 px 10px 0px 10 px right :0 bottom :6 pxtext-align : right；}。专注BTN span { display : inline-block；_ display : inline _ zoom :1 width :25 px height :24 px行高：24 px文本对齐：居中；_ font-size :0左边距：5 px光标：指针；background: # fff}。专注BTN跨度。在{ background : # fff}。专注preNext { width :45 px height :100 px位置：绝对；top :90 px background : URL(img/sprite。png)无重复0 0；光标：指针；}。专注pre { left:0}。专注。接下来{ right:0背景-位置：右上；}
/风格
脚本类型=' text/JavaScript ' src=' js/jquery。量滴js '/脚本
脚本类型=' text/JavaScript ' src=' js/sl。js '/脚本
脚本类型='文本/javascript '
$(文档)。ready(function(){
$.焦点(' #焦点001 ')；
$.焦点(' #焦点002 ')；
});
/脚本
/头
bodyg
<h1></h1>
<div class="focus" id="focus001">
<ul>
<li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/03.jpg" alt="jquery特效" /></a></li>
<li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/02.jpg"/></a></li>
<li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/03.jpg" alt="仿QQ商城点击左右滚动jquery焦点图特效" /></a></li>
</ul>
</div>
<p>修改的几个地方：1、隐藏了半透明背景条，2、把那个小常条滑块读出了1234这些数字。 你不喜欢这样你可以修改样式和自己改动下jquery代码。</p>
<p>调用方法：很简单，$.focus("#focus001"); 一些参数设置，可以修改js中的设置，源作者已经注释的很清楚了。</p>
</body>
</html>
JS
$(function() {
jQuery.focus = function(slid) {
var sWidth = $(slid).width(); //获取焦点图的宽度(显示面积)
var len = $(slid).find("ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
var ii = i+1;
btn += "<span>"+ii+"</span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$(slid).append(btn);
$(slid).find("div.btnBg").css("opacity",0.5);//find() 函数返回在字符串中子字符串的位置。
//为小按钮添加鼠标滑入事件，以显示相应的内容
$(slid+" div.btn span").css("opacity",0.4).mouseenter(function() {
index = $(slid+" .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//上一页、下一页按钮透明度处理
$(slid+" .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
//上一页按钮
$(slid+" .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
//下一页按钮
$(slid+" .next").click(function() {
index += 1;
if(index == len) {index = 0;}
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 = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$(slid+" ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
$(slid+" .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$(slid+" .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
};
});
猜你喜欢：
1.jS获取鼠标坐标、获取鼠标像素点
2.怎么用js实现简单鼠标跟随效果
3.js怎么获取鼠标在div中的相对位置
4.js设置鼠标光标形状
5.Chrome浏览器的鼠标手势的使用方法
这篇文章到此就结束，希望能帮助到大家。
扫描二维码推送至手机访问。
版权声明：文章内容摘自网络，如果无意之中侵犯了您的版权，请联系本站，本站将在3个工作日内删除。谢谢！
