jsp 页面图片自动切换代码

Question

要求：
1、支持跨浏览器（常用的几种），IE需要支持低版本（IE6-IE8）；
2、支持手机浏览（苹果IOS和android系统）；
3、图片数量及切换的窗口大小可以自己设置（不要多处修改）；
4、图片从有到左滚动，鼠标放上面，图片停止滚动，点击图片可以跳转到指定页面。

可以用jquery，多页面可以调用（只需修改图片参数即可）。

效果类似下面网页：
http://www.bj969.com/news/201601.xml

测试好了再回答，谢谢。

Answer 1

直接扣下来就好了，这种效果大把

<style type="text/css">
#owl-demo{position:relative;width:800px;height:533px;margin:20px auto 0 auto;}
#owl-demo .item{ position:relative;display:block;}
#owl-demo img{display:block;width:800px;height:533px;}
#owl-demo b{position:absolute;left:0;bottom:0;width:100%;height:78px;background-color:#000;opacity:.5;filter:alpha(opacity=50);}
#owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;}
.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;}
.owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(http://www.bj969.com/news/images/bg15.png);*display:inline;*zoom:1;}
.owl-pagination .active{width:25px;background-image:url(http://www.bj969.com/news/images/bg16.png);}
.owl-buttons{display:none;}
.owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;}
.owl-prev{left:0;background-image:url(http://www.bj969.com/news/images/bg17.png);}
.owl-next{right:0;background-image:url(http://www.bj969.com/news/images/bg18.png);}
.owl-prev:hover{background-image:url(http://www.bj969.com/news/images/bg19.png);}
.owl-next:hover{background-image:url(http://www.bj969.com/news/images/bg20.png);}
body{font-family: Microsoft Yahei;margin-top: 2em;background-color: #fcfcfc;}
.div-title,.div-content{width:800px;text-align: left;}
.div-title i{color: gray;}
.div-title p{font-size:13px;line-height: 25px;}         
.div-content p{font-size:13px;line-height: 25px;text-indent: 2em;}
a{font-size:13px;color: blue;text-decoration: none;}
a:HOVER{color: red;}
</style>
<link rel="stylesheet" href="http://www.bj969.com/news/css/owl.carousel.css">
<script type="text/javascript" src="http://www.bj969.com/news/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://www.bj969.com/news/js/owl.carousel.js"></script>
<script>
    $(function () {
        $('#owl-demo').owlCarousel({
            items: 1,
            navigation: true,
            navigationText: ["上一个", "下一个"],
            autoPlay: true,
            stopOnHover: true
        }).hover(function () {
            $('.owl-buttons').show();
        }, function () {
            $('.owl-buttons').hide();
        });
    });
</script>
<div id="owl-demo" class="owl-carousel">
    <a class="item" href="#"><img src="http://www.bj969.com/news/images/201601-1.jpg" /><b></b><span></span></a>
    <a class="item" href="#"><img src="http://www.bj969.com/news/images/201601-2.jpg" /><b></b><span></span></a>
    <a class="item" href="#"><img src="http://www.bj969.com/news/images/201601-3.jpg" /><b></b><span></span></a>
    <a class="item" href="#"><img src="http://www.bj969.com/news/images/201601-4.jpg" /><b></b><span></span></a>
</div>

javascript水平方向手风琴焦点图
jquery焦点图代码，幻灯过渡特效，仿IE特效滤镜
jquery水平方向平铺焦点图

模仿淘宝，拍拍图片效果