//jquery请不要用远程引入的//动画效果在谷歌浏览器中 无效 其他浏览器都实现了<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .wrap { width: 100px; height: 100px; overflow: hidden; margin: 0 auto; position: relative; } ul { overflow: hidden; position: absolute; left: 0; top: 0; } li { float: left; width: 100px; height: 100px; list-style: none; font-size: 30px; font-weight: bolder; } .item1 { background: red; } .item2 { background: green; } .item3 { background: orange; } .item4 { background: blue; } .item5 { background: black; } </style></head><body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script src="jquery.js"></script> <script type="text/javascript" src="js.js"> </script></body></html>//以下是js可以直接粘贴运行$(function() { /*为什么我这样写，在谷歌里面只会移动一个画面*/ /* li的宽度*/ var liw = $('li').width(); /* li的个数*/ var lin = $('li').length; var index = 0; /* 定时器*/ var timer = null; /*给ul设置宽度*/ $('ul').css({ width: liw * lin + 'px' }); /*每2秒移动一次*/ $('ul').hover(function() { clearInterval(timer); }, function() { timer = setInterval(move, 2000); }).trigger('mouseleave');function move() { index++; left = index * liw; if (index == 5) { index = 0; } else { $('ul').stop(true, false).animate({ /*每次移动的距离*/ left: -left }, 300); } };})
添加回答
举报
0/150
提交
取消