简单常用的图片轮播，新闻轮播，焦点新闻轮播

最新推荐文章于 2019-06-09 22:03:17 发布
最新推荐文章于 2019-06-09 22:03:17 发布
阅读量2.1k 收藏 4
点赞数
分类专栏： 网站常用jquery效果 各种焦点图滚动效果 文章标签： jQuery 点击滚动 常用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/congcong875/article/details/8989303
版权

简单常用的图片轮播，新闻轮播，焦点新闻轮播,废话不说，贴代码，代码简单易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下

<!DOCTYPE html>
<html>
	<head>
		<title>简单常用的图片轮播，新闻轮播，焦点新闻轮播</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
		<script type="text/javascript">
			$(function(){		   
				var index=0;
				var slideFlag = true;
				var length=$(".roll_pic img").length;

				function showImg(i){
					$(".roll_pic a")
					.eq(i).stop(true,true).fadeIn(600)
					.siblings("a").hide();

					$(".roll_num li").removeClass("roll_num_hover");
					$(".roll_num li").eq(i).addClass("roll_num_hover");

					$(".roll_title a")
					.eq(i).stop(true,true).fadeIn(600)
					.siblings("a").hide();
				}
				showImg(index);
				
				$(".roll_num li").click(function(){
					index = $(".roll_num li").index(this);
					showImg(index);
					//slideFlag = false;
				});	
				
				function autoSlide() {
					setInterval(function() {
						if(slideFlag) {
							showImg((index+1) % length);
							index = (index+1)%length;
						}
						//slideFlag = true;	
					}, 3000);
				}
	
				autoSlide();
				
				$("div.roll").hover(function(){
					slideFlag = false;
				}, function(){
					slideFlag = true;
				});

			});
		</script>
		<style type="text/css">
			* {padding:0px;	margin:0px;}
			.roll {width:580px;height:300px;border:solid 1px #c1c1c1;position:relative;}
			.roll_num li.roll_num_hover {background:#dc282b;color:#fff;}
			.roll_pic img {width:580px;height:300px;display:block;}
			.roll_num {position:relative;top:-25px;margin-right:5px;float:right;z-index:10;}
			.roll_num li {list-style:none;float:left;font-size:12px;font-weight:600;width:18px;height:18px;line-height:18px;cursor:pointer;margin:0 3px;text-align:center;color:#dc282b;background:#fff;-moz-border-radius:8px;border-radius:8px;}
			.roll_title {position:relative;top:-30px;padding-left:10px;height:30px;line-height:22px;z-index:10;float:left;}
			.roll_title a {font-size:12px;text-decoration:none;color:#fff;}
			.roll_title a:hover {color:red;}
			.roll_mask{position:relative;background:#000;opacity:0.50;z-index:5;top:-30px;height:30px;}
		</style>
	</head>
	<body>
		<div class="roll">
			<div class="roll_pic">
				<a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-05-22/1751132091.jpg"></a>
				<a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" ></a>
				<a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-04-12/1003432197.jpg"></a>
			</div>
			
			<div class="roll_num">
				<ul>
					<li class="roll_num_hover">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</div>
			<div class="roll_title">
				<a href="http://www.875.cn/" target="_blank">图片1的标题</a>
				<a href="http://www.875.cn/" target="_blank" style="display:none">图片2的标题</a>
				<a href="http://www.875.cn/" target="_blank" style="display:none">图片3的标题</a>
			</div>
			<div class="roll_mask"></div>
		</div>
	</body>
</html>



阿聪世家
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery实现图片轮播效果，jQuery实现焦点新闻
不积跬步无以至千里，不积小流无以成江海。
05-28 1万+
效果图： 实现代码： 图片轮播，新闻轮播，焦点新闻轮播 $(document).ready(function(){ var index=0; var slideFlag = true; var length=$(".roll-news-image img").length; function showImg
新闻轮播图
12-21
仿网易新闻轮播、无限轮播、消息的发送与取消、长按滑动取消滚动，手指移动恢复滚动
一个新闻轮播图
zhengpeiqiang183的博客
12-14 457
pt        #zong{width:640px;height:349.5px;margin:100px auto;overflow:hidden;}    #bwai{width:1932px;height:275px;}    #bimg{width:640px;height:275px;position:absolute;}    #swai{width:1932px;
10新闻轮播图
xiaogeldx的博客
06-09 869
后台传给前端：context，ajax 前端传给后台：form表单
头条新闻的轮播图制作
日常分享
07-06 1148
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
基于JQuery实现图片轮播效果(焦点图)
11-23
自己写了一个纯jq形式的横向轮播焦点图，可点击小圆点或者左右按钮进行切换，属于定宽类型。改成自适应宽度的也不难，将css里面的bannerCon宽度改为百分比，再在js里面将ul和li的宽度跟随父级容器的宽度变化即可，...
jQuery右侧选项卡焦点图片轮播特效代码分享
11-25
本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码。分享给大家供大家参考。具体如下： jQuery实现的右侧选项卡焦点图片轮播动画特效源码，是一段清新可爱的焦点图轮播代码，支持自动轮播与手动点击。 运行效果图...
jQuery右侧选项卡焦点图片轮播代码
04-07
本篇文章将详细讲解如何利用jQuery实现一个右侧选项卡焦点图片轮播的功能，以及相关的技术要点。 首先，我们需要理解jQuery选项卡的基本原理。选项卡通常由一组可切换的面板组成，每个面板对应一个选项卡。用户点击...
jQuery插件实现带圆点的焦点图片轮播切换
01-19
这次分享的代码是jQuery插件，HovertreeImg是一个图片轮播jquery插件，使用方便，可以设置大小，圆点位置等，代码简洁 <!DOCTYPE html> <html> <head> <meta ...
jQuery焦点图片轮播切换代码
04-09
jQuery焦点图片轮播切换代码是一种常见的网页动态效果，用于展示一组图片并自动或手动进行循环播放，常用于网站的首页或者产品展示区域。这个代码基于流行的JavaScript库jQuery，利用其强大的DOM操作能力和事件处理...
适合新闻首页的轮播
06-12
适合新闻首页的轮播
带标题简介的图片轮播
10-10
带标题简介的图片轮播：适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
kinMaxShow1.1 带标题轮播图
10-25
kinMaxShow1.1 带标题的淡入淡出轮播图 里面有详细的api文档 简单实用
CSS3 transition 实现通知消息轮播条
01-18
Vue 版本，拷贝到文件即可使用 <template> <!-- 轮播视图 --> <div id=carousel-view> <!-- 轮播列表 --> <ul id=carousel-list-view class={> <li v-for=(item, key=index>{{ item }}</li> </ul> </div> </template> [removed] export default {
新闻图片轮播网页代码
07-16
现在很多网站都有轮流播放的新闻图片，想知道他的源代码吗？可以试试这个示例。
轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播
weixin_34015860的博客
05-29 133
空话就不多说了，开始。。。     简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下          每日一道理 感叹人生，是因为曾经没有过轰轰烈烈的壮举，觉得渺小，觉得平庸，似乎生活过于简略，简略得让人感觉烦躁。没有大言不惭地说过将来，只是比较现实地握住了现在，我想，这是一条路，每个人所必须踏上的一次...
新闻上下轮播
Mo_zifeng的博客
05-08 679
项目中用到了新闻上下轮播，在网上找比较好的方法，记录一下。（转载自：https://blog.csdn.net/weixin_39522730/article/details/84931667） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
焦点图片轮播代码
隔壁老王的博客
10-16 1391
最近学习了一下通过js来控制焦点图片轮播，学习的目的是领悟代码实现过程和实现思路，以下附上代码，可以学习学习领悟一下： HTML文件mytest.html:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试焦点轮播图片</title> <link rel="styles
新闻轮播banner轮播解析
maoguiyou的专栏
04-01 1617
搬了办公室，先来撸一撸先，今天就来撸一撸前端最常用的一个效果，轮播，不管是文字轮播还是banner轮播还是页面轮播，各种各样，网上的插件也很多，由于时间有限，主要是将实现原理，如果是一点基础也没有的话那我也没办法了。实现方法主要分三类： 1.通过改变定位的left值来实现水平轮播，有个性的也可以通过改变margin来实现，主要是用定时器不断改变数值达到动的效果 2.第二种主要是通过使用css3
js带文字和圆点的新闻焦点轮播图代码
最新发布
06-09
以下是一个简单的文字和圆点的新闻焦点轮播图的示例代码： HTML 代码： ```html <div class="slider"> <div class="slider-wrapper"> <div class="slider-item"> <img src="image1.jpg" alt="Image 1"> <div class="slider-caption"> <h3>标题 1</h3> <p>描述 1</p> </div> </div> <div class="slider-item"> <img src="image2.jpg" alt="Image 2"> <div class="slider-caption"> <h3>标题 2</h3> <p>描述 2</p> </div> </div> <div class="slider-item"> <img src="image3.jpg" alt="Image 3"> <div class="slider-caption"> <h3>标题 3</h3> <p>描述 3</p> </div> </div> </div> <div class="slider-dots"> <span class="active"></span> <span></span> <span></span> </div> </div> ``` CSS 代码： ```css .slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider-wrapper { position: absolute; width: 300%; height: 100%; left: 0; } .slider-item { float: left; width: 33.333%; height: 100%; } .slider-item img { width: 100%; height: 100%; object-fit: cover; } .slider-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; } .slider-caption h3 { font-size: 2rem; margin-bottom: 1rem; } .slider-caption p { font-size: 1rem; margin-bottom: 1rem; } .slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .slider-dots span { width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; margin-right: 10px; cursor: pointer; } .slider-dots span.active { background-color: #fff; } ``` JavaScript 代码： ```javascript let slideIndex = 0; const slides = document.querySelectorAll('.slider-item'); const dots = document.querySelectorAll('.slider-dots span'); function showSlides() { // 隐藏所有幻灯片和圆点 for (let i = 0; i < slides.length; i++) { slides[i].style.display = 'none'; dots[i].classList.remove('active'); } // 显示当前幻灯片和圆点 slides[slideIndex].style.display = 'block'; dots[slideIndex].classList.add('active'); // 自动切换到下一张幻灯片 slideIndex++; if (slideIndex >= slides.length) { slideIndex = 0; } // 每 3 秒自动切换 setTimeout(showSlides, 3000); } // 点击圆点切换幻灯片 dots.forEach((dot, index) => { dot.addEventListener('click', () => { slideIndex = index; showSlides(); }); }); // 自动切换幻灯片 showSlides(); ``` 说明： - HTML 中 `.slider` 是最外层容器，`.slider-wrapper` 包含所有幻灯片，`.slider-item` 是每个幻灯片，`.slider-caption` 是幻灯片中的标题和描述，`.slider-dots` 是圆点容器。 - CSS 中使用 `position: absolute` 和 `left` 属性来实现幻灯片的滚动效果，使用 `object-fit: cover` 属性来保持幻灯片的宽高比例。 - JavaScript 中使用 `setInterval()` 函数实现自动切换幻灯片，使用 `addEventListener()` 函数实现点击圆点切换幻灯片。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值