admin管理员组

文章数量:829160

图片走马灯

直接上代码
<!DOCTYPE html>
<html>
<head><title>Bootstrap 模板</title><!-- 包含头部信息用于适应不同设备 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><!-- 引入 Bootstrap --><link href=".3.7/css/bootstrap.min.css" rel="stylesheet"><script src=".js"></script><!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --><!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 --><!--[if lte IE 9]><script src=".7.0/html5shiv.js"></script><script src=".js/1.3.0/respond.min.js"></script><![endif]--><style>.box, .box2 {width: 800px;height: 260px;margin: 160px auto;overflow: hidden;position: relative;}.box, .box2 p {text-align: center;}.picBox, .picBox2 {margin: 0px;padding: 0px;list-style: none;width: 1500px;}.picBox:hover, .picBox2:hover {cursor: pointer;}.picBox li, .picBox2 li {float: left;}.picBox img, .picBox2 img {width: 200px;height: 240px;}</style>
</head>
<body>
<div class="box"><p>第一种图片轮播:非无缝轮播</p><ul class="picBox"><li><img src="img/1.jpg" alt="1"/></li><li><img src="img/2.jpg" alt="2"/></li><li><img src="img/3.jpg" alt="3"/></li><li><img src="img/4.jpg" alt="4"/></li><li><img src="img/5.jpg" alt="5"/></li></ul>
</div>
<div class="box2"><p>第二种图片轮播:无缝轮播</p><ul class="picBox2"><li><img src="img/1.jpg" alt="1"/></li><li><img src="img/2.jpg" alt="2"/></li><li><img src="img/3.jpg" alt="3"/></li><li><img src="img/4.jpg" alt="4"/></li><li><img src="img/5.jpg" alt="5"/></li></ul>
</div>
<script>$(function () {<!--第一种图片轮播:非无缝轮播-->function rollOne() {$(".picBox li:first").animate({left: "-200px"}, 2000, "linear", function () {$(this).remove().clone(true).appendTo(".picBox");rollOne();});}rollOne();
//        var startRollOne = setInterval(rollOne, 2000);<!--鼠标移入停止移出继续-->
//        $(".box").hover(function () {
//            clearInterval(startRollOne);
//        }, function () {
//            startRollOne = setInterval(rollOne, 2000);
//        });<!--第二种图片轮播:无缝轮播--><!--这种无缝轮播可以通过设置animate动画播放速度值和setInterval中的函数调用时间间隔实现间隔无缝轮播-->function rollTwo() {$(".picBox2").animate({marginLeft: "-200px"}, 2000, "linear", function () {$(".picBox2 li:first").remove().clone(true).appendTo(".picBox2");$(".picBox2").css({marginLeft: "0px"});//动画运行完了还需要复位一下否则不会运动。?console.log($(".picBox2").css("marginLeft"));})}var startRollTwo = setInterval(rollTwo, 2000);<!--鼠标移入停止移出继续-->$(".picBox2").hover(function () {clearInterval(startRollTwo);}, function () {startRollTwo = setInterval(rollTwo, 2000);});});
</script>
</body>
<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><!-- 包括所有已编译的插件 -->
</body>
</html>

本文标签: 图片走马灯