JS实现图片轮播效果

文章原创地址:http://www.shuonar.com/blog/b2b4a3fc-c7b2-44a5-8e52-0b51e4ab37d8.html

我们首先在HTML页面中建立一个div,div里面放需要轮播的东西.
<div class="home_picture_div" id="home_picture_div">
<div id="banner_bg"></div>
<div id="banner_info">说哪儿网</div>
<ul>
<li>1</li>
<li class="on">2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a style="display: inline;" href="#" target="_blank"><img alt="说哪儿网" src="image/1.png"></a>
<a style="display: inline;" href="#" target="_blank"><img alt="shuonar" src="image/2.png"></a>
<a style="display: inline;" href="#" target="_blank"><img alt="shuonar.com" src="image/3.jpg"></a>
<a style="display: inline;" href="#" target="_blank"><img alt="说客" src="image/4.jpg"></a>
</div>

下面对文本做CSS修饰。
<style type="text/css">
.home_picture_div {
position: relative;

width: 300px;
height: 300px;
float: left;
overflow: hidden;

}
/* 图片列表的图片 */
#banner_list img{
border: 0px;
}
/* 图片标题背景 */
#banner_bg{
position: absolute;
bottom: 0;
background-color: #000000;
height: 30px;
filter:Alpha(Opacity=40);
opacity: 0.4;
z-index: 1000;
cursor: pointer;
width: 300px;
}
/* 图片标题 */
#banner_info{
position: absolute;
bottom: 0;
left: 5px;
height: 22px;
color: #FFF;
z-index: 1001;
cursor: pointer;
font-weight: bold;
}

.home_picture_div ul {
position:absolute;
list-style-type:none;
filter: Alpha(Opacity=80);
opacity:0.8;
border:1px solid #FFFFFF;
z-index:1002;
margin:0;
padding:0;
bottom:3px;
right:5px;
border-radius: 5px;
}

.home_picture_div ul li{
padding: 0px 8px;
float: left;
display: block;
color: #FFF;
border: #E5EAFF 1px solid;
background: #454545;
cursor: pointer;
}
.home_picture_div ul li.on {
background:#5CACEE;
}
</style>

下面用js对图片做轮播效果,我们在这里使用了jquery:

var t = n =0, count;

$(document).ready(function(){
$("#register_button").click(function(){
window.location.href = "nar_quick_register.html";
});
count = $("#banner_list a").length; //4
$("#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");
});
$(".home_picture_div li").click(function(){
var i = $(this).text()-1; //获取当前图片的索引值
n = i;
if(i>=count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr("alt"));//给每张显示的图片加上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("home_picture_div").style.background = "";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});

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

function showAuto(){
n = n>=(count-1)?0: ++n;
$("#home_picture_div li").eq(n).trigger("click");
}
要查看该效果,可以到http://www.shuonar.com的首页查看图片轮播效果,这里是源代码。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 您好,可以使用以下代码实现图片效果: HTML代码: ``` <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` CSS代码: ``` .slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slider img.active { opacity: 1; } ``` JavaScript代码: ``` var images = document.querySelectorAll('.slider img'); var currentImage = 0; function changeImage() { images[currentImage].classList.remove('active'); currentImage = (currentImage + 1) % images.length; images[currentImage].classList.add('active'); } setInterval(changeImage, 3000); ``` 这段代码会每隔3秒钟切换一张图片实现效果。 ### 回答2: 要使用JavaScript实现图片效果,可以按照以下步骤进行操作: 1.HTML结构:创建一个包含图片的容器,通常使用div元素,并为其添加一个特定的ID,以便在JavaScript中进行访问。在容器内部创建一个图片列表,每个图片使用img标签来表示。 2.CSS样式:使用CSS对容器进行样式设置,指定容器的宽度和高度,并隐藏超出容器范围的图片。为了实现图片的切换效果,可以使用CSS3的过渡效果或者动画效果。 3.JavaScript代码:使用JavaScript来控制图片的切换。首先,获取容器和图片列表的引用。然后,创建一个变量来记录当前显示的图片索引。使用定时器函数setInterval来循环切换图片。在定时器回调函数中,根据当前显示的图片索引,修改图片列表的偏移量,使下一张图片显示出来。同时,更新当前显示的图片索引。 4.添加事件监听器:可以为图片列表添加鼠标移入和移出的事件监听器,当鼠标移入时,停止图片切换;当鼠标移出时,重新开始切换。 5.其他功能:根据需求,还可以添加其他功能,例如添加导航按钮,点击按钮可以切换到特定的图片;添加图片指示器,显示当前显示图片的信息等。 总之,使用JavaScript实现图片效果的关键是通过控制图片列表的偏移量来切换图片,并使用定时器来循环切换。同时,可以通过CSS样式和JavaScript事件监听器来增强用户体验和功能。 ### 回答3: 实现图片效果可以使用JavaScript编写代码,以下是一个基本的实现方法: 1. 首先,HTML中需要一个图片展示的区域,可以使用`<div>`标签或者`<img>`标签来实现。 2. 使用JavaScript获取到需要进行轮图片列表,可以使用数组来存储,每个元素存储图片的路径。 3. 设置一个计数器,初始值为0,用于记录当前显示的图片索引。 4. 创建一个函数,用于切换图片,可以命名为`changeImage`。 5. 在`changeImage`函数中,通过获取图片展示区域的元素,然后设置其`src`属性为当前图片索引所对应的图片路径。 6. 在`changeImage`函数中,将计数器加1,然后判断是否超出了图片列表的长度,如果超出了,则将计数器重置为0,从头开始循环轮。 7. 为了实现效果,可以使用`setInterval`函数来设置一个定时器,每隔一定的时间间隔调用一次`changeImage`函数。 下面是一个示例代码: ```html <body> <div id="imageArea"> <img id="image" src=""> </div> <script> var imageList = ["image1.jpg", "image2.jpg", "image3.jpg"]; // 图片列表 var currentIndex = 0; // 当前显示的图片索引 function changeImage() { var imageArea = document.getElementById("imageArea"); var image = document.getElementById("image"); image.src = imageList[currentIndex]; currentIndex++; if (currentIndex >= imageList.length) { currentIndex = 0; // 重置索引,从头开始循环轮 } } setInterval(changeImage, 2000); // 每隔2秒切换一次图片 </script> </body> ``` 通过以上的代码,每隔2秒钟,图片会自动切换一次,实现了简单的图片效果。可以根据实际需求修改代码,适配自己的图片列表和时间间隔。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值