87,955
社区成员
发帖
与我相关
我的任务
分享怎么让图片平滑的移动且可以有checkbox事件？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/extra_1.0.0.js"></script>
</head>
<body>
<div id="demo" style="" onmouseover="stopscroll();"
onmouseout="doscroll()">
<form action="" method="">
<div class="demo1" id="hj_carousel" style="white-space:nowrap;padding:0;" >
<ul style="width:10000px;">
<li class="text-img">
<label for="ch1"><img src="img/wlwyun/bgbottom.png" height=268 width=156
border=0 /></label>111
<input id="ch1" type="checkbox" value="閫夋嫨鎴? checked />
</li>
<li class="text-img">
<label for="ch2"><img for="ch2" src="img/wlwyun/bgquen.png" height=268 width=156
border=0></label>222
<input id="ch2" type="checkbox" value="閫夋嫨鎴? checked/>
</li>
<li class="text-img">
<label for="ch3"><img for="ch2" src="img/wlwyun/bgquen1.png" height=268 width=156
border=0></label>333
<input id="ch3" type="checkbox" value="閫夋嫨鎴? checked />
</li>
<li class="text-img">
<label for="ch4"><img for="ch2" src="img/wlwyun/loginbp.png" height=268 width=156
border=0></label>444
<input id="ch4" type="checkbox" value="閫夋嫨鎴? checked/>
</li>
<li class="text-img">
<label for="ch5"><img for="ch2" src="work2007/images/1_222.jpg" height=268 width=156
border=0></label>555
<input id="ch5" type="checkbox" value="閫夋嫨鎴? checked />
</li>
<li class="text-img">
<label for="ch6"><img for="ch2" src="work2007/images/1_222.jpg" height=268 width=156
border=0></label>666
<input id="ch6" type="checkbox" value="閫夋嫨鎴? checked/>
</li>
<li class="text-img">
<label for="ch7"><img for="ch2" src="work2007/images/1_222.jpg" height=268 width=156
border=0></label>777
<input id="ch7" type="checkbox" value="閫夋嫨鎴? checked/>
</li>
<li class="text-img">
<label for="ch8"><img for="ch2" src="work2007/images/1_222.jpg" height=268 width=156
border=0></label>888
<input id="ch8" type="checkbox" value="閫夋嫨鎴? checked/>
</li>
</div>
</form>
<div class="carousel_prev"><</div>
<div class="carousel_next">></div>
</div>
<div class="demo1" style="white-space:nowrap;padding:0;margin-top: 20px;width:400px;" >
<ul style="width:10000px;">
<li class="text-img">
<label for="ch11"><img src="img/wlwyun/bgbottom.png" height=268 width=156
border=0 /></label>111
<input id="ch11" type="checkbox" value="閫夋嫨鎴? checked />
</li>
<li class="text-img">
<label for="ch12"><img for="ch2" src="img/wlwyun/bgquen.png" height=268 width=156
border=0></label>222
<input id="ch12" type="checkbox" value="閫夋嫨鎴? checked/>
</li>
</ul>
</div>
<!--婊氬姩鐨刯avascript-->
<script type="text/javascript">
/*var t=demo.scrollWidth
demo1.innerHTML+=demo1.innerHTML
function doMarquee()
{
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth
}
function doscroll()
{
sc=setInterval(doMarquee,20)
}
function stopscroll()
{
clearInterval(sc)
}
doscroll() */
$('#hj_carousel').hj_carousel({
btnPrev: ".carousel_prev", //瀹氫箟鍚戝乏婊氬姩鎸夐挳
btnNext: ".carousel_next", //瀹氫箟鍚戝彸婊氬姩鎸夐挳
auto: true, //鏄惁鑷姩鎾斁
display: 2, //姣忔闇€瑕佹粴鍔ㄧ殑涓暟
resize:false,
speed: 2000,
start: 0 ,
show: 6
});
</script>
</body>
</html>
$.fn.extend({
//左右轮播切换
hj_carousel: function (o) {
o = $.extend({
btnNext: null,
btnPrev: null,
auto: false,
display: 3,
resize: false,
speed: 5000,
start: 0,
show: 4
}, o || {})
//DOM对象定义
var div = $(this),
ul = $("ul:first", div),
li = ul.children('li'),
liN = li.size(),
liW = li.outerWidth(true);
//判断Li的数量是否大于显示的数量，如果少于显示数量按钮隐藏
if (liN <= o.show) {
$(o.btnNext).hide();
$(o.btnPrev).hide();
o.auto = false;
}
//判断是否需要自适应UL的宽度
if (o.resize) {
$(window).resize(function () {
liW = $(window).width();
div.css({
width: liW
});
ul.css({
width: liW * liN
});
li.css({
width: liW
});
}).resize()
}
else {
var liW = li.outerWidth(true);
}
//判断是否需要自动播放
if (o.auto) {
$(this).parent().hover(function () {
clearInterval(o.timer);
}, function () {
o.timer = setInterval(function () {
return go(o.start - o.display);
}, o.speed);
}).trigger("mouseleave");
function autoPlay() {
return go(o.start - o.display);
o.timer = setTimeout(autoPlay, o.speed);
}
}
//向右点击
$(o.btnNext).click(function () {
return go(o.start - o.display);
})
//向左点击
$(o.btnPrev).click(function () {
return go(o.start + o.display)
})
//执行
function go(to) {
o._s = to <= o.start ? o.start : liN - o.display;
o._e = to <= o.start ? o.display : liN;
if (!ul.is(":animated")) {
if (to <= o.start) {
ul.stop(true, false).animate({
left: "+=" + liW * to
}, 500, function () {
$(ul).children("li").slice(o._s, o._e).detach().appendTo(ul);
ul.css("left", 0);
})
}
else {
ul.stop(true, false).animate({
left: "-=" + liW * to
}, 0, function () {
$(ul).children("li").slice(o._s, o._e).detach().prependTo(ul);
ul.stop(true, false).animate({
left: 0
})
})
}
}
}
},
})
...全文
请发表友善的回复…
发表回复
qq_27436659 2015-06-10
- 打赏
- 举报
有无缝连接的移动，但是选择checkbox后只对第一轮的图片有效果
