DZX3.4如何做首页图片连续向左滚动的效果
我做了一个，效果不好，
用了JS代码，但是360浏览器不能完美支持，会阻止一些脚本文件
以下是JS文件代码
- var id = function(el) { return document.getElementById(el); },
- c = id('photo-list');
- if(c) {
- var ul = id('scroll'),
- lis = ul.getElementsByTagName('li'),
- itemCount = lis.length,
- width = lis[0].offsetWidth, //获得每个img容器的宽度
- marquee = function() {
- c.scrollLeft += 2;
- if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
- ul.appendChild(ul.getElementsByTagName('li')[0]);
- c.scrollLeft = 0;
- };
- },
- speed = 50; //数值越大越慢
- ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度
- var timer = setInterval(marquee, speed);
- c.onmouseover = function() {
- clearInterval(timer);
- };
- c.onmouseout = function() {
- timer = setInterval(marquee, speed);
- };
- };
- @charset "gb2312";
- /* CSS Document */
- * { padding:0; margin:0;} /*设置所有对像的内边距为0*/
- body { text-align:center;} /*设置页面居中对齐*/
- #photo-list {
- /* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
- 计算：6*(100+2*2+1*2+9) - 9
- 之所以减去9是第6张图片的右边留白 */
- width:681px;
- /* 图片的宽度（包含高度、padding、border）
- 计算：100+2*2+1*2 */
- height:106px;
- margin:50px auto;
- overflow:hidden; /*溢出部份将被隐藏*/
- border:1px dashed #ccc;
- }
- #photo-list ul { list-style:none;}
- #photo-list li { float:left; padding-right:9px;}
- #photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}
以上是CSS
以下是HTML代码
- <!doctype html>
- <html>
- <head>
- <meta charset="gb2312">
- <title>滚动图片效果</title>
- <link rel="stylesheet" type="text/css" href="MyStyle.css">
- </head>
- <body>
- <div id="photo-list">
- <ul id="scroll">
- <li><a href="#"><img src="images/1.jpg" width="160px" height="220px" alt=""/></a></li>
- <li><a href="#"><img src="images/2.jpg" width="160px" height="220px" alt=""/></a></li>
- <li><a href="#"><img src="images/3.jpg" width="160px" height="220px" alt=""/></a></li>
- <li><a href="#"><img src="images/4.jpg" width="160px" height="220px" alt=""/></a></li>
- <li><a href="#"><img src="images/5.jpg" width="160px" height="220px" alt=""/></a></li>
- <li><a href="#"><img src="images/6.jpg" width="160px" height="220px" alt=""/></a></li>
- </ul>
- <script type="text/javascript" src="MoveEffect.js">
- </script>
- </div>
- </body>
- </html>
请部大家代码如何修改和优化，才能让各种浏览器都支持，不让其阻止脚步文件，不需要手动修改浏览器设置的，在任何情况下都能正常打开的。
如何做才好职？ |
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡