这个滚动JS适用任何图片滚动，适用按钮，而且不会产生缝隙
代码如下
CSS样式：
.catalog{
width: 335px;
height: 354px;
float: left;
margin-top: 43px;
border: 1px solid #b03924;
position: relative;
overflow: hidden;
}
.catalog .h5{
font-weight: bold;
background: #e4e4e4;
line-height: 20px;
height: 20px;
margin-bottom: 5px;
text-indent: 5px;
}
.catalog .imgbox li{
width: 335px;
height: 354px;
float: left;
overflow: hidden;
background: #FFF;
}
.catalog .arrow{
position: absolute;
width: 50px;
height: 23px;
right: 10px;
top: 243px;
_display: inline;
z-index: 999;
}
.catalog .arrow li{
float: left;
}
.catalog .arrow a.left{
width: 23px;
height: 23px;
line-height: 15px;
display: block;
background: url(../images/icon.png);
background-position:-224px -30px;
overflow: hidden;
float: left;
}
.catalog .arrow a.right{
width: 23px;
height: 23px;
line-height: 15px;
text-indent: -99em;
display: block;
background: url(../images/icon.png);
background-position:-258px -30px;
overflow: hidden;
float: right;
}
.catalog .arrow a.left{
/*width: 50px;
background-position: -76px 0px;*/
}
.catalog .arrow a.right{
/*background-position: -131px 0px;
margin-left: 8px;*/
}
.catalog .arrow a.left:hover{
background-color: #ebebeb;
}
.catalog .arrow a.right:hover{
background-color: #ebebeb;
}
HTML代码如下：
全省大学生村官先进事迹宣讲团走进我校
同心共话乡村情，携手共筑中国梦。4月29日下午，由省委组织部、省教育厅和团省委主办的“青春献沃土·共筑...
全省大学生村官先进事迹宣讲团走进我校
同心共话乡村情，携手共筑中国梦。4月29日下午，由省委组织部、省教育厅和团省委主办的“青春献沃土·共筑...
全省大学生村官先进事迹宣讲团走进我校
同心共话乡村情，携手共筑中国梦。4月29日下午，由省委组织部、省教育厅和团省委主办的“青春献沃土·共筑...
JS代码如下：
var slideX = {
thisUl: $('#catalog ul.imgbox'),
btnLeft: $('#catalog a.left'),
btnRight: $('#catalog a.right'),
thisLi: $('#catalog ul.imgbox li'),
init: function () {
slideX.thisUl.width(slideX.thisLi.length * 335);
slideX.slideAuto();
slideX.btnLeft.click(slideX.slideLeft).hover(slideX.slideStop, slideX.slideAuto);
slideX.btnRight.click(slideX.slideRight).hover(slideX.slideStop, slideX.slideAuto);
slideX.thisUl.hover(slideX.slideStop, slideX.slideAuto);
},
slideLeft: function () {
slideX.btnLeft.unbind('click', slideX.slideLeft);
slideX.thisUl.find('li:last').prependTo(slideX.thisUl);
slideX.thisUl.css('marginLeft', -335);
slideX.thisUl.animate({ 'marginLeft': 0 }, 350, function () {
slideX.btnLeft.bind('click', slideX.slideLeft);
});
return false;
},
slideRight: function () {
slideX.btnRight.unbind('click', slideX.slideRight);
slideX.thisUl.animate({ 'marginLeft': -335 }, 350, function () {
slideX.thisUl.css('marginLeft', '0');
slideX.thisUl.find('li:first').appendTo(slideX.thisUl);
slideX.btnRight.bind('click', slideX.slideRight);
});
return false;
},
slideAuto: function () {
slideX.intervalId = window.setInterval(slideX.slideRight, 3000);
},
slideStop: function () {
window.clearInterval(slideX.intervalId);
}
}
$(document).ready(function () {
slideX.init();
})
转载时请注明出处及相应链接，本文永久地址：/12531.html
微信打赏
支付宝打赏
感谢您对作者gordon的打赏，我们会更加努力！如果您想成为作者，请点我
