ycn5202005 2016-03-05 08:04 采纳率: 0%
浏览 2355
已结题

jsp 页面图片自动切换代码

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

可以用jquery,多页面可以调用(只需修改图片参数即可)。

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

测试好了再回答,谢谢。

  • 写回答

2条回答

  • Go 旅城通票 2016-03-05 11:54
    关注

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

    
    <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水平方向平铺焦点图

    模仿淘宝,拍拍图片效果

    评论

报告相同问题?

悬赏问题

  • ¥15 arduino控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥85 maple软件,solve求反函数,出现rootof怎么办?
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题