求 图片轮播代码

<style type="text/css">

#banner {position:relativewidth:1070pxheight:280pxoverflow:hiddenmargin:0 auto}

#banner_list img {border:0px}

#banner_bg {position:absolutebottom:0background-color:#000height:30pxfilter: Alpha(Opacity=30)opacity:0.3z-index:1000

cursor:pointerwidth:478px}

#banner_info{position:absolutebottom:0left:5pxheight:22pxcolor:#fffz-index:1001cursor:pointer}

#banner_text {position:absolutewidth:120pxz-index:1002right:3pxbottom:3px}

#banner ul {position:absolutelist-style-type:nonefilter: Alpha(Opacity=80)opacity:0.8border:1px solid #fffz-index:1002

margin:0padding:0bottom:3pxright:5px}

#banner ul li { padding:0px 8pxfloat:leftdisplay:blockcolor:#FFFborder:#e5eaff 1px solidbackground:#6f4f67cursor:pointer}

#banner ul li.on { background:#900}

#banner_list a{position:absolute} <!-- 让四张图片都可以重叠在一起-->

</style>

<script src="../jquery.js" type="text/javascript"></script>

<script type="text/javascript">

var t = n = 0, count

$(document).ready(function(){

count=$("#banner_list a").length

$("#banner_list a:not(:first-child)").hide()

$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'))

$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")})

$("#banner li").click(function() {

var i = $(this).text() - 1//获取Li元素内的值，即1，2，3，4

n = i

if (i >= count) return

$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'))

$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})

$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000)

document.getElementById("banner").style.background=""

$(this).toggleClass("on")

$(this).siblings().removeAttr("class")

})

t = setInterval("showAuto()", 4000)

$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000)})

})

function showAuto()

{

n = n >=(count - 1) ? 0 : ++n

$("#banner li").eq(n).trigger('click')

}

</script>

========================以上是CSS和脚本=======================

<div id="banner">

<div id="banner_bg"></div> <!--标题背景-->

<div id="banner_info"></div><!--标题-->

<ul>

<li class="on">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

<div id="banner_list">

<a href="#" target="_blank"><img src="../images/jsbg1.jpg" title="" alt="" /></a>

<a href="#" target="_blank"><img src="../images/jsbg2.jpg" title="" alt="" /></a>

<a href="#" target="_blank"><img src="../images/jsbg3.jpg" title="" alt="" /></a>

<a href="#" target="_blank"><img src="../images/jsbg4.jpg" title="" alt="" /></a>

</div>

</div>

图片在哪里放，你应该看的很清楚吧，

轮播的HTML如下： 注意container  CLASS样式必需要写相对定位：position: relative

<div class="container">

    <ul>

        <volist name="getBannerImg" id="vo">

            <li>

                <if condition="CONTROLLER_NAME eq 'Listing'">

                <div class="pic"><a href="javascript:" id="video-btn"><img src="{$vo.titlepic}" width="100%"/></a></div>

                <else/>

                <div class="pic"><img src="{$vo.titlepic}" width="100%"/></div>

                </if>

            </li>

        </volist>

    </ul>

<div class="video" id="videobox">

    <!-- <img src="{$culturedata.titlepic}" /> -->

</div>

</div>

JS代码

<!-- 视频播放 -->

<script type="text/javascript">

    $(function(){

        var vurl = '{$video}',

            flag = 0

        if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){

             $('#videobox').append("<div class='close'></div><embed src='' width='785px' height='100%'  allowfullscreen='true'  wmode='transparent'></embed>")

             $('#videobox').find('.close').css('top',-36)

       }

       else{

          $('#videobox').append("<div class='close'></div><video src='' width='auto' height='530' controls='controls' id='myvideo'></video>")

       }

       $('#videobox').children('video').attr('src',vurl)

       $('#videobox').children('embed').attr('src',vurl)

       $('#video-btn').click(function(){

         $('#videobox').show()

         document.getElementById('myvideo').play()

         // $('#myvideo').play()

       })

       $('#videobox').find('.close').click(function(event){

            event.stopPropagation()

            $('#videobox').hide()

            document.getElementById('myvideo').pause()

       })

       document.getElementById('myvideo').onclick = function(){

            if(flag==0){

                this.pause()

                flag = 1

            }else{

                this.play()

                flag = 0

            }

       }

    })

</script>

部份 CSS

.slide .container {height: 500pxoverflow: hiddenposition: relative}

.container .video {height: 442pxmargin-top: 6pxposition: fixedtop: 40%left: 25%margin-top: -221pxdisplay: nonez-index: 10000}

.container .video .close {width: 36pxheight: 36pxposition: absolutetop: 5pxright: 140pxbackground: url(../img/video-close.png) no-repeat centerz-index: 10001}

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>css实现轮播图</title>

<style>

body {

margin: 0

background: #dfe

}

ul {

margin: 0

padding: 0

list-style: none

}

.my-swiper {

position: relative

width: 800px

height: 450px

margin: 100px auto

overflow: hidden

}

.swiper-list {

position: absolute

top: 0

left: 0

width: 4000px

height: 100%

overflow: hidden

animation: swiper 10s steps(1, end) infinite

transition: left 1s linear

}

.swiper-slide {

width: 800px

height: 100%

float: left

overflow: hidden

}

.swiper-slide a {

display: block

height: 100%

}

.swiper-slide img {

display: block

width: 100%

height: 100%

object-fit: cover

}

/* 分页 */

.pagination {

position: absolute

bottom: 0

left: 0

right: 0

line-height: 45px

background: rgba(255, 255, 255, 0.3)

text-align: center

}

.dot {

display: inline-block

width: 10px

height: 10px

margin: 0 2px

background: #fff

border-radius: 50%

}

/* 橙色小圆点 */

.dot.active {

position: absolute

left: 356px

top: 18px

width: 11px

height: 11px

margin: 0

background: tomato

animation: swiper-dot 10s steps(1, end) infinite

transition: left 1s linear

}

@keyframes swiper {

0%,

100% {

left: 0

}

20% {

left: -800px

}

40% {

left: -1600px

}

60% {

left: -2400px

}

80% {

left: -3200px

}

/* 100% {

left: -3200px

} */

}

@keyframes swiper-dot {

0%,

100% {

left: 358px

}

20% {

left: 376px

}

40% {

left: 395px

}

60% {

left: 413px

}

80% {

left: 432px

}

}

</style>

</head>

<body>

<div>

<ul>

<li class="swiper-slide swiper-slide1">

<a href="javascript:">

<img src="banner.jpg" alt="">

</a>

</li>

<li class="swiper-slide swiper-slide2">

<a href="javascript:">

<img src="banner1.jpg" alt="">

</a>

</li>

<li class="swiper-slide swiper-slide3">

<a href="javascript:">

<img src="banner2.jpg" alt="">

</a>

</li>

<li class="swiper-slide swiper-slide4">

<a href="javascript:">

<img src="banner.jpg" alt="">

</a>

</li>

<li class="swiper-slide swiper-slide5">

<a href="javascript:">

<img src="banner1.jpg" alt="">

</a>

</li>

</ul>

<div>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span class="dot active"></span>

</div>

</div>

</body>

</html>

---