2 ycn5202005 ycn5202005 于 2016.03.05 16:04 提问

jsp 页面图片自动切换代码 100C

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

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

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

测试好了再回答,谢谢。

2个回答

showbo
showbo   Ds   Rxr 2016.03.05 19: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水平方向平铺焦点图

模仿淘宝,拍拍图片效果

showbo
showbo 回复ycn5202005: http://www.w3dev.cn/article/20141127/jquery-horizontal-photo-gallery.aspx个支持,你只需要控制容器的宽度,焦点图会自动平铺容器宽度,不过是显示部分而不是等比缩放图片,你结了我给你下一个。
接近 2 年之前 回复
ycn5202005
ycn5202005 这个手机上不行。网站是我做的
接近 2 年之前 回复
WinsenJiansbomber
WinsenJiansbomber   2016.03.05 22:13

直接榨代码就搞下来了,要不然直接搜插件用呀

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!