广告轮播效果实现图片轮播广告轮播代码下载

最新推荐文章于 2024-06-16 11:17:26 发布

atv36117

最新推荐文章于 2024-06-16 11:17:26 发布

阅读量536

点赞数

原文链接：http://www.cnblogs.com/iStu/p/8565031.html

版权

<body>
    <div id="Tv">
        <div id="TvScreen">
            <img src="images/adver01.jpg" height="454" width="730"/>
            <img src="images/adver02.jpg" height="454" width="730"/>
            <img src="images/adver03.jpg" height="454" width="730"/>
            <img src="images/adver04.jpg" height="454" width="730"/>
            <img src="images/adver05.jpg" height="454" width="730"/>
            <img src="images/adver06.jpg" height="454" width="730"/>
        </div>
        <div id="Btn">
            <div id="Left">
                <
            </div>
            <div id="Right">
                >
            </div>
        </div>
        <ul id="TvSelector">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>

</body>

首先看Body部分代码。

思路：

制作一个非常长的广告条（“#TvScreen“）我们设置宽度为99999，将全部广告横向排列在其中，然后使用外框（”#Tv“）遮盖住多余的部分

遮盖前

给“#Tv“添加overflow：hidden属性遮盖后；

点击下方圆圈时会根据圆圈内的值计算出广告条需要移动的位置

点击左右键将会使广告条滑动

广告条css如下

#TvScreen{
    width:99999px;
    position:relative;
    left:0px;
    transition: 0.5s;
}

所以改变位置时，只需要修改这个“left“的值就可以了。

为了使效果更华丽，添加了transition属性，使其移动时具有动画效果。

Js代码如下

        var index=1;
        $(function () {
            $("li").click(function(){
                index= parseInt($(this).html());//传递小圆圈中的值
                move();
            });

            $("#Left").click(function(){//点击左键头
                index--;
                if(index==0)//防止广告条移动溢出
                {index=6;}
                move();
            });
            $("#Right").click(function(){//点击右箭头
                index++;
                if(index==7)
                {index=1;}
                move();
            });
        });
        function move() {
            var pos=-(parseInt(index)*730-730);//计算广告条位置
            $("#TvScreen").css("left",pos+"px");//应用广告条位置
            return 0;
        }

自动播放效果以后有时间我会添加上。

完整代码下载

链接：https://pan.baidu.com/s/1d-5WJNkK_DCkvQBBK4vRmQ 密码：z067

这个效果，其实近用js，不用jq也可以做出来，因为我写这篇博文时正在学习jq，就先拿jq练手了，以后有时间，再写下纯js版的。

转载于:https://www.cnblogs.com/iStu/p/8565031.html

atv36117

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
广告轮播效果实现图片轮播广告轮播代码下载

<body> <div id="Tv"> <div id="TvScreen"> <img src="images/adver01.jpg" height="454" width="730"/> <img src="images/adver02.jpg...
复制链接

扫一扫